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

edited June 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 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 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 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 2016
    Awesome!!! 
    Thanks Zach.

    It works great!
Sign In or Register to comment.