Hi,
I’m able to set the height of the headers in a widget →
However, is it also possible to change the number of lines from 1 to 2 / 3? I tried a few things in CSS but it didn’t work.
I’m looking for something like this:
Preferably with a title line and a smaller subtitle line
Best answer by Edo Nijmeijer
I can certainly help you with the first part of your question: allowing the title to grow beyond that single line.
The second part is currently not possible, as far as I'm aware, because that would involve more than the plain text you can currently specifiy for widget titles (and we'd better not allow that to prevent people from breaking the page by inserting unwanted html/script/whatever)
Back to the first part. The title styling is wholly ruled by the class title-addon
So overriding that in one of your application-specific stylesheets should suffice. Let me mention the attributes that you need to override at the least:
.title-addon {
white-space: normal;
overflow: visible;
height: auto;
}Of which the white-space and height are the ones to cause this.
You will notice that, as a developer, hovering over the title will animate in the settings-icons from the right, causing your text to potentially jump to even more lines...
To prevent that, I'd also add the next two attributes, to reserve some space and stop the animation:
padding-right: 62px;
transition: none;
Doing it all like this will of course affect all of your widget titles, everywhere and on all pages. So I think you'd better make it more specifc by adding an annotation to the widget if you can, or by picking some other unique attribute from the widget itself. And add that in front of the .title-addon rule:
.my-annotation1 .title-addon {
...
}
// or
[data-widget.uri="YourWidgetsURI"] .title-addon {
...
}Look up the actual widget uri in the inspector of your browser's developer toolbar. Which I assume you've been using before to try things. They're derived from/equal to your widget names in the Widget Manager.
And as a final 'warning': changing the title to two lines *might* have side-effects on elements within the widget, so make sure you test your widget to see if everything is still okay.
Does that help? I hope it inspires you to try some things.
+4I can certainly help you with the first part of your question: allowing the title to grow beyond that single line.
The second part is currently not possible, as far as I'm aware, because that would involve more than the plain text you can currently specifiy for widget titles (and we'd better not allow that to prevent people from breaking the page by inserting unwanted html/script/whatever)
Back to the first part. The title styling is wholly ruled by the class title-addon
So overriding that in one of your application-specific stylesheets should suffice. Let me mention the attributes that you need to override at the least:
.title-addon {
white-space: normal;
overflow: visible;
height: auto;
}Of which the white-space and height are the ones to cause this.
You will notice that, as a developer, hovering over the title will animate in the settings-icons from the right, causing your text to potentially jump to even more lines...
To prevent that, I'd also add the next two attributes, to reserve some space and stop the animation:
padding-right: 62px;
transition: none;
Doing it all like this will of course affect all of your widget titles, everywhere and on all pages. So I think you'd better make it more specifc by adding an annotation to the widget if you can, or by picking some other unique attribute from the widget itself. And add that in front of the .title-addon rule:
.my-annotation1 .title-addon {
...
}
// or
[data-widget.uri="YourWidgetsURI"] .title-addon {
...
}Look up the actual widget uri in the inspector of your browser's developer toolbar. Which I assume you've been using before to try things. They're derived from/equal to your widget names in the Widget Manager.
And as a final 'warning': changing the title to two lines *might* have side-effects on elements within the widget, so make sure you test your widget to see if everything is still okay.
Does that help? I hope it inspires you to try some things.
Hi, I added the functionally as mentioned by Edo. At the moment I’m able to add longer texts in the title:
Which is at least an improvement. Do you have any idea how i can reach the following result?
I tried: “word 1” + many spaces + “word 2”, but it only shows a single space.
+4Because we make sure that the value that is inserted is ‘safe’, any html-tags will be escaped upon insertion. You probably noticed how something like <br> is printed 1:1 when you try it. Likewise for any other ‘special’ mark-up or characters. Safe, but undesired for you.
Any combination of white-space is also seen as ‘one space’ by all browsers. You also experienced that already.
Last resort would be to have another escape character in your title, which would result in the html-output to contain a line-feed. And then tweak the styling to force the browser to see those line-feeds as breaks:
[data-widget\.uri="YourWidgetsURI"] .title-addon {
white-space: pre-line;
}Then, where-ever you want the line-break to occur, add a \n to your title value, so:
Lorem ipsum\ndolorem sit amet
This only works from the Advanced tab of the Widget properties, not the Miscellaneous Tab. Or perhaps when you set it up to use a parameter. As long as the line-feed ends up in the title.
Good luck in further experiments!
P.S. your new title might look even better if you tweak the line-height to be less than the default 35px (but also add top- and/or bottom-padding to fix the odd vertical centering that results from that)
Already have an account? Login
Please use your business or academic e-mail address to register
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
Didn't find what you were looking for? Try searching on our documentation pages: