6 Replies Latest reply on Apr 1, 2016 1:26 PM by Robb Barrett

    Radio buttons horizontal

           Is it possible to display radio button lists horizontal?

           I couldn't find an option to change the order. So my question, can we change the order through CSS?
           And if yes, what is the code?

           Thanks!

        • Re: Radio buttons horizontal
               Radio buttons and checkboxes are aligned horizontally by default, as are the labels.
                
               One option (which I did not test in full) would be a CSS property
                
               input[type="radio"] {
                   display:inline-block;
               }
                
               label {
                   display:inline-block;
               }
                
          • Re: Radio buttons horizontal

                 Hi Breno,

                 Can't get it to work. Can you perhaps send the exact Marketo code?

                 I have tried:

                 .mktoForm .mktoRadioList > label,
                 {
                   margin-bottom:0.6em;
                   display:inline-block;
                 }
                 .mktoForm input[type=radio] {
                   width:1em;
                   height:1em;
                   opacity:0;
                   display:inline-block;
                 }

                 Thanks.
            • Re: Radio buttons horizontal
                   This is exactly what I used on one of my forms that I made horizontal.  Hope it helps!

                    
                   .mktoRadioList input, .mktoRadioList label {
                       float: left !important;
                        margin-right: 2px;
                       margin-left: 10px;
                       margin: 2px 2px 2px 2px 2px;
                     padding: 0px 0px 0px 0px 0px;
                       padding-left: 0px;
                     padding-right: 3px;
                       text-indent: 1px;
                       text-align: left;
                    
                   }
              • Re: Radio buttons horizontal
                If you cannot edit the the HTML of an individual landing page or a form, where does this HTML go?
                • Re: Radio buttons horizontal
                  Kristen, you can edit the custom CSS of a form theme. 

                  Here are step-by-step instructions: https://community.marketo.com/MarketoArticle?id=kA050000000LHXhCAO
                  • Re: Radio buttons horizontal
                    Robb Barrett

                    Bumping this thread. I've tried using a couple of types of CSS I've found while searching and nothing is working.