We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 22448
    • 241 Posts
    In Evo it used to be pretty easy with a little css tweaking to make TV input checkboxes and radio buttons to flow horizontally like this http://sottwell.pogwatch.com/tv-input-types.html

    In Revo EXT added power and complexity. Has anybody figured out how to do this in Revo?

    The use case is a TV has a couple dozen options that are cumulative. Although a multi-select list could work it makes it more difficult since all options are not visible at one time. I would like to have checkboxes flow horizontally and wrap around to multiple lines.

    Looking at the generated html each checkbox has the following structure:

    <div id="ext-gen340" class="x-form-item  x-hide-label" tabindex="-1">
        <label id="ext-gen341" for="tv39-0" style="width:100px;" class="x-form-item-label"></label>
        <div class="x-form-element" id="x-form-el-tv39-0" style="padding-left:105px">
            <div style="width: 322px;" id="ext-gen342" class="x-form-check-wrap">
                <input value="AM" class=" x-form-checkbox x-form-field" autocomplete="off" id="tv39-0" name="tv39[]" type="checkbox">
                    <label id="ext-gen343" for="tv39-0" class="x-form-cb-label">AM</label>
            </div>
        </div>
        <div class="x-form-clear-left"></div>
    </div>


    and css is:

    .x-form-item {
        display: block;
        margin-bottom: 4px;
    }


    Apparently all input type dvs are treated the same as "x-form-item" class so it won't be possible just to tweak some css.

    So the question from the ext-illiterate is what would be the proper way to add a input-type specific class (ex. class="x-form_item_checkbox") to the wrapper div? And how to make this change upgrade-proof?

    Thanks in advance.