How to get the picklist- rendered as radio buttons placed horizontally ?

edited June 1, 2018 in Questions
Hi,

I have a picklist field (Payment Type), which is rendered as RADIO_BUTTONS on UI, but it gives them as a column list of radio buttons like shown below.

image



How can I get these side-by-side (horizontally placed) ? 




Comments

  • edited June 1, 2018
    Add the following inline CSS to your page (or to your Custom Field Renderer if you're using that):

    .nx-radiowrapper {
       display: inline-block;
    }
  • edited July 12, 2016
    Hi Zach,

    That works nice!

    But I have several fields of same type (RADIO_BUTTONS),
    but I want to apply this only for a single field .

    SO what I did is that - created a CSS class in inline CSS:

    .paymentMethod{
          display : inline-block;
    }


    And applied this CSS class at field Properties.

    But no luck.

    Any idea how to get this applied for only one single field ?


    Also when applied to see how that works for :

    .nx-radiowrapper {
       display: inline-block;
    }

    The fields are like shrinked and instead of full picklist value being shown it's like:
    (Wrapped Content)

    image

    I tried to adjust the column width as flexible but no luck int his too.



    Note: Bold/Highlighted content was just intended to make content eye-catchy and more readable. 

    Thank You!
  • edited December 21, 2016
    KVin, change your CSS class to be this so that it is saying "within the .paymentMethod field, change the css of all .nx-radiowrapper areas to be something different"

    .paymentMethod .nx-radiowrapper {
       display: inline-block;
       min-width: 11em;
    }

    I'd adjust the min-width to get it to be wide enough to fit the full picklist value on one line. 
  • edited July 12, 2016
    Awesome!!! 
    Thanks Zach.

    It works great!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!