SKUID File Upload Button (vertical-align)

  • 1
  • Question
  • Updated 3 years ago
  • Answered
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?
Photo of Jason Thurgood

Jason Thurgood

  • 654 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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...