to get a header button text to show in two rows and shrink its width?

[John Herdean]

WHen i have long text (at least 2 words) in a button in the header or footer, it just expands in one row and overtakes the Caption. How can i make the text in 2 rows and shrink the width of the button?

[John Herdean]

ohh, also, how can i make the Caption in two rows as well if i have a long text(s)?

[Igor]

Hello John,

You can use CSS. Set button "Class Name". Add CSS style:
code
.buttonClassName {
white-space: normal;
width: 50px;
}
/code

[John Herdean]

Igor, i just tried this code and all this code does is fix the width. WHats the code to fix the with and wrap the remaining text on a 2nd line?

[Maryna Brodina]

Try the following CSS:
code.buttonClassName {
width: 30%;
}
.buttonClassName .ui-btn-inner{
white-space: normal;
}/code

[John Herdean]

well, it did place the text on 2 rows, however it overlapped the header. Is it possible to make the header bigger and fit it inside the header (centered with all items centered)

[Igor]

Hello,

Set "Class Name" for header. Then add css:

code
.className {
height:20px;
}
/code