Css on \render as button\" not working?"

  • 13 September 2017
  • 6 replies
  • 32 views

Badge +2

Howdy everyone!

Working on a nintex form on a sharepoint site and came across an issue I can't find an answer to. I have a choice field with two options I've chose to "render as button". The buttons are too small for the application I need it for (touch screen form). I've tried assigning it a custom css class and it links to it, as it changes properties, but not correctly.

I started with changing the background color, but it changes the background color behind the buttons, not the buttons themselves. Same with border properties, and size properties.

Any idea how I can set the attributes to the choice buttons vs the space (container) around them?!

Thanks! 


6 replies

Userlevel 5
Badge +14

try something like this

(btnCSS is custom CSS class configured for choice control)

.btnCSS label{
     width:  150px;
     height: 50px;
     border-width: 20px;
}

.btnCSS label:not(.ui-state-active) .ui-button-text{
     background-color: red !important;
     height: 100% !important;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

207555_pastedImage_1.png

‌ render as button‌ ‌ css class‌ ‌ sept2017mh‌

Badge +2

Works fantastic, thank you very much! 

Userlevel 5
Badge +14

great!

please mark correct answer.

Badge +9

Hi Marian Hatala‌, is it possible to make each button with a specific value in a different color?!

Userlevel 5
Badge +14

I think so, you just need to write a selector(s) that address(es) each button separately.

Userlevel 5
Badge +13

Hi all,

Our UX team are doing some research into our style builder for Universal Forms. We would appreciate your feedback on your current experience in styling your forms in any platform.

If you would like to provide feedback, please fill out the survey at Applying styles in Nintex Forms.

Thanks,

Euan

Reply