Configurable List Radio Buttons alignment

  • Profile Image
    slocleanair
    Asked on April 27, 2015 at 06:52 PM

    Here is my definition for a Configurable List:

    -------

    Crop : dropdown : Alfafa (241), Almond (101), Apple (102), Apricot (103), Asparagus (247), Avocado (104), Barley (242), Bean (243), Beehives (257), Brush (361), Bushberry (105), Chapparral (362), Cherry (106), Citrus (107), Corn (244), Cotton (245), Date (108), Date Paper Trays (124), Ditchbank & Canal (1 Ton/Mile) (581), Fertilizer, Pesticide Sacks (258), Fig (109), Flax (246), Grape (110), Grass (Grass, Orchard) (584), Kiwi (111), Nectarine (112), Oats (248), Olive (113), Orchard Removal (114), Other field crops (255), Other Prunings (126), Peach (115), Peanuts (249), Pear (116), Pecan (117), Persimmon (118), Pistachio (119), Plum (120), Pomegranate (121), Prune (122), Quince (123), Rice (250), Rye (251), Safflower (252), Slash (471), Sorghum (Milo) (253), Sugar Pea (260), Tumbleweed (583), Unclassified (999), Vegetable Crops (256), Walnut (125), Weeds (582), Wheat (254), Wild Hay (259) : Please Select

    Amount : text : 0

    Tons or Acres: radio : Tons, Acres

    -------

    Is there a way to align the radio button alongside one another instead of stacked? If CSS what is the style required?

  • Profile Image
    jonathan
    Answered on April 27, 2015 at 08:36 PM

    Hi,

    Can you please confirm first that what you meant is for the Radio option in the Configurable list to be in the same line?.. like in the image below.

     

    Let us know if not.

    I'll see how we can do it using custom injected CSS code on the widget

    Thanks.

     

  • Profile Image
    slocleanair
    Answered on April 28, 2015 at 03:25 PM

    The image shows the current capability - I'd like the 0 Tons 0 Acres on the same line i.e. next to one another and not on top of one another.

  • Profile Image
    Kiran
    Answered on April 28, 2015 at 05:42 PM

    Could you please try inserting the following CSS code to the Configurable Widget Custom CSS code section?

    .radio-container {

    min-width: 160px;

    }.radio {

    margin: auto !important;

    float: left;

    }

    After adding the CSS code, the form should be displayed as below :

    Let us know if you need any further assistance. We will be happy to help.

    Thank you!!