SELECT and different output generated

3 posts, 0 answers
  1. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 08 Jun 2012 Link to this post

    I have two the same select tags in my html that generate different results after rendering;

    selectbox 1:

    original html:

    <select id="ctl00_ctrlLocaleList" name="ctl00$ctrlLocaleList" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ctrlLocaleList\')') ">
    <option value="nl-NL" selected="selected">Nederlands</option>
    <option value="de-DE">Deutsch</option>
    <option value="en-US">United Kingdom</option>
    </select>




    output:


     <a style="width: 122px;" class="rfdSelect rfdSelect_mt" tabindex="-1" unselectable="on" id="Skinnedctl00_ctrlLocaleList" href="javascript:void(0)">
     <span class="rfdSelectOuter">
     <span class="rfdSelectText">Nederlands</span>
     </span>
     </a>
     <select _rfddecoratedid="Skinnedctl00_ctrlLocaleList" class="rfdRealInput" id="ctl00_ctrlLocaleList" name="ctl00$ctrlLocaleList" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ctrlLocaleList\')') ">
     <option value="nl-NL" selected="selected">Nederlands</option>
     <option value="de-DE">Deutsch</option><option value="en-US">United Kingdom</option>
     </select>




    Selectbox 2

    original html:

    <select size="1" id="Color_3185_3234" name="Color_3185_3234" onchange="">
    <option value="-,-">Kleur</option>
    <option value="Blauw,Blauw">Blauw</option>
    <option value="Geel,Geel">Geel</option>
    <option value="Groen,Groen">Groen</option>
    <option value="Oranje,Oranje">Oranje</option>
    <option value="Roze,Roze">Roze</option>
    <option value="Wit,Wit">Wit</option>
    </select>




    output:

    <div style="overflow-y: auto; width: 67px; height: 20px;" class="rfdSelectBox rfdSelectBox_mt" id="SkinnedColor_3185_3234">
    <ul>
    <li class="rfdSelect_selected" unselectable="on">Kleur</li>
    <li unselectable="on">Blauw</li>
    <li unselectable="on">Geel</li>
    <li unselectable="on">Groen</li>
    <li unselectable="on">Oranje</li>
    <li unselectable="on">Roze</li>
    <li unselectable="on">Wit</li>
    </ul>
    </div>
    <select _rfddecoratedid="SkinnedColor_3185_3234" class="rfdRealInput" size="1" id="Color_3185_3234" name="Color_3185_3234" onchange="">
    <option value="-,-">Kleur</option>
    <option value="Blauw,Blauw">Blauw</option>
    <option value="Geel,Geel">Geel</option>
    <option value="Groen,Groen">Groen</option>
    <option value="Oranje,Oranje">Oranje</option>
    <option value="Roze,Roze">Roze</option>
    <option value="Wit,Wit">Wit</option>
    </select>



    Any idea why this renders different results? Option 1 seems to be correct, the second one fails (visually).
    Using IE9 and 2012-1.411.35.
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 08 Jun 2012 Link to this post

    Hi,

    The difference between two selects comes form the size property used in the second one. In defines the number of visible options in a drop-down list. When you use it, it is better to use a bigger number, such as five. If you remove RadFormDecorator, you could see that the select with size and without size are displayed in different ways. Without size is displayed as a drop down list, while the one with the size property is displayed as a list with a scroll if it is necessary. That`s why, when we use FormDecorator to remove the real HTML element and to replace it with a Decorated one, we use different HTML outputs, which will better help us to interpret the authentic HTML display. The first case am anchor with span displayed as a dropdown and in the second case, a visible unordered list.

    In the bellow example there a re a few of your selects with different size properties.

    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" />
        <h4>Selects without size property</h4>
        <select id="ctl00_ctrlLocaleList" name="ctl00$ctrlLocaleList">
            <option value="nl-NL" selected="selected">Nederlands</option>
            <option value="de-DE">Deutsch</option>
            <option value="en-US">United Kingdom</option>
        </select>
     
        <select id="Color_3185_3234" name="Color_3185_3234">
            <option value="-,-">Kleur</option>
            <option value="Blauw,Blauw">Blauw</option>
            <option value="Geel,Geel">Geel</option>
            <option value="Groen,Groen">Groen</option>
            <option value="Oranje,Oranje">Oranje</option>
            <option value="Roze,Roze">Roze</option>
            <option value="Wit,Wit">Wit</option>
        </select>
     
        <h4>Selects with size property</h4>
        <select id="Select1" name="ctl00$ctrlLocaleList">
            <option value="nl-NL" selected="selected">Nederlands</option>
            <option value="de-DE">Deutsch</option>
            <option value="en-US">United Kingdom</option>
        </select>
     
        <select size="5" id="Select2" name="Color_3185_3234">
            <option value="-,-">Kleur</option>
            <option value="Blauw,Blauw">Blauw</option>
            <option value="Geel,Geel">Geel</option>
            <option value="Groen,Groen">Groen</option>
            <option value="Oranje,Oranje">Oranje</option>
            <option value="Roze,Roze">Roze</option>
            <option value="Wit,Wit">Wit</option>
        </select>
     
        </form>
    </body>
    </html>

    If you remove the FormDecorator you will see the difference in the displayed elements with size property and without the size property. Of course, the HTML output will be the same, but when using RadForm decorator we choose to replace the authentic HTML element with an elements that will best help us to mimic the original style and behavior.

    All the best,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 11 Jun 2012 Link to this post

    Thanks a lot!
Back to Top