I have added a File Upload component within a wrapper (with a unique ID) so I can apply style to just the button generated by the component. I want to set the text within the button to be aligned vertical-align: middle; instead of top which is what it is inheriting from somewhere.
My CSS looks like this:
#>mywrapperId] .ui-button-text-icon-primary {
width: 300px;
height: 80px;
vertical-align: middle;
}
Everything seems to work except the vertical-align piece.
Would also like to change the size of the text and the size of the icon.
Can this be done?
Page 1 / 1
I’m pretty sure this can be done.
The icon resize will depend on whether you are using the Font Awesome themes or ths Classic themes. FA icons are simply a Font - which means “Font-size” will affect them.
To affect the button I’d encourage you to step up a level . Target the .ui-button class rather than the text itself. There you can address the height and width and font-size. vertical-align is usually only effective in table cells. To get allignment in a div you can add padding to the top ( padding: 30px 0 0 0; ) but you’ll have to be careful because that may make your height larger than you expect.
Welcome to CSS hack land…
View our Community Site Map
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.