4 Replies Latest reply on Aug 9, 2018 9:30 AM by fac586

    radiogroup displayed as pill button

    user5108636

      Hi All,

           Using APEX 5.1.4 with universal theme. On a page I display the radiogroup programmatically using the apex_item.radiogroup() function. All good displays as expected.

       

      However, I want to display the radiogroup as a pill button, what p_attributes should I apply to achieve the same.

       

      Please advise.

       

      Thanks

        • 1. Re: radiogroup displayed as pill button
          Scott Wesley

          Good question.  I'm not sure if there's anything declarative, or if it's just a matter of passing the correct classes.

          Maybe define a declarative item and choose the pill template option, and see what extra classes you may need.

           

          Alternatively, you may find other inspiration in here

          Grassroots Oracle: Make Radio Group look like UT Buttons

          • 2. Re: radiogroup displayed as pill button
            user5108636

            Hi Scott,

                Before posting, I did have a look at the grassroots website. Still could not figure out what CSS classes are to be applied to show it as a pill button. I did an inspect element on the browser and still not establish anything.

             

             

            Please advise.

             

            Thanks

            • 3. Re: radiogroup displayed as pill button
              Scott Wesley

              I just tried to create two radio group items, one defined as pill, and wow. I couldn't discern a different between the generated HTML. I wonder what they're doing?

               

              <div class="t-Form-inputContainer col col-10"><div class="t-Form-itemWrapper"><fieldset tabindex="-1" id="P13_NEW_2" class="radio_group apex-item-radio">
              <legend class="u-VisuallyHidden">New</legend>
              <table role="presentation" class="radio_group">
              <tbody><tr>
              <td nowrap="nowrap">
              <input type="radio" id="P13_NEW_2_0" name="P13_NEW_2" value="Return1"><label for="P13_NEW_2_0">Display1</label></td>
              <td nowrap="nowrap">
              <input type="radio" id="P13_NEW_2_1" name="P13_NEW_2" value="Return2"><label for="P13_NEW_2_1">Display2</label></td>
              </tr></tbody></table></fieldset>
              </div><span id="P13_NEW_2_error_placeholder" class="a-Form-error" data-template-id="571747618103963142_ET"></span></div>
              
              • 4. Re: radiogroup displayed as pill button
                fac586

                Scott Wesley wrote:

                 

                I just tried to create two radio group items, one defined as pill, and wow. I couldn't discern a different between the generated HTML. I wonder what they're doing?

                The Display as Pill Button template option adds the t-Form-fieldContainer--radioButtonGroup class to the t-Form-fieldContainer item container. You've probably not been looking far enough up the tree to spot the difference.

                 

                The CSS rules that utilise this involve descendant selectors that reference classes from the containing form layout elements rather than the attributes of the radio button controls. This means that it's not possible to get the pill button appearance using apex_item.radiogroup parameters. The generated controls would have to be wrapped in container elements having the requisite classes, but then other rules associated with their primary layout function might have unwanted side-effects in whatever context the manually generated control is used.