locked
Drop down becomes smaller after putting it inside the Update Panel RRS feed

  • Question

  • User351619809 posted

    I have a drop down list box on my page. I enclosed the drop down in an update panel so that users cannot see the postback occurring. when I select something from that drop down box, the drop down box becomes smaller than usual. This behavior was not happening when I did not put the drop down in the update panel. It started happening when I put it inside the update panel. Below is my code :

    <div class="ui-block-b ui-margins" >
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <label for="field_Address_DOT_State" class="required"  >State</label>
        
        <asp:DropDownList   ID="ddlState" runat="server" OnSelectedIndexChanged="ddlState_Changed" AutoPostBack="true" AppendDataBoundItems="true">
            <asp:ListItem Text="Please Select" Value="-1"></asp:ListItem>
        </asp:DropDownList>
            </ContentTemplate>
            <Triggers>
                 <asp:AsyncPostBackTrigger ControlID="ddlState" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>   
    </div>
    

    Below is the image when I did not put the update panel around the drop down and select something from drop down:

    enter image description here

    Below is the image when I did put the drop down inside update panel and select something from drop down box:

    enter image description here

    I am not sure why this behavior is happening.

    Any help will be highly appreciated.

    Monday, February 22, 2021 3:16 AM

Answers

  • User-1330468790 posted

    Hi anjaliagarwal5@yahoo.com,

     

    I am not sure why this behavior is happening.

    The reason is that the update panel control will be rendered as a <div> tag which wraps up the select list. You could try to manually reproduce this behavior by replacing the update panel control with a simple <div>. Then you could open the dev-tools window in the browser to check the CSS style.

    The solution, or a workaround, would be enclosing the whole area inside the update panel.

    Otherwise, you might need to provide more codes with css style so that we could modify and make them in an uniform style.

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 23, 2021 8:58 AM

All replies

  • User475983607 posted

    You forgot the CssClass.

    Monday, February 22, 2021 12:48 PM
  • User-1330468790 posted

    Hi anjaliagarwal5@yahoo.com,

     

    I am not sure why this behavior is happening.

    The reason is that the update panel control will be rendered as a <div> tag which wraps up the select list. You could try to manually reproduce this behavior by replacing the update panel control with a simple <div>. Then you could open the dev-tools window in the browser to check the CSS style.

    The solution, or a workaround, would be enclosing the whole area inside the update panel.

    Otherwise, you might need to provide more codes with css style so that we could modify and make them in an uniform style.

     

    Hope helps.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 23, 2021 8:58 AM