Skip to main content
Nintex Community Menu Bar
Question

SKUID File Upload Button (vertical-align)

  • Jul 9, 2024 9:50 PM UTC
  • 1 reply
  • 32 views
  • Translate All

Forum|alt.badge.img+4

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?

This topic has been closed for replies.

1 reply

Forum|alt.badge.img+17
  • Nintex Employee
  • Jul 9, 2024 11:10 PM UTC

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… 

Translate