ListBox controls stack after postback

3 posts, 0 answers
  1. Kim
    Kim avatar
    15 posts
    Member since:
    Apr 2013

    Posted 30 Jul 2014 Link to this post

    I have a modal that has a source ListBox and a selected ListBox with AllowTransfer="true". I also have AutoPostBackOnTransfer="true" because otherwise the selected items didn't persist. the problem I'm having is that when I transfer an item and there is a postback, the ListBox of selected items moves from the right side of the source to directly below it. I can't figure out why this is happening. See the attached screen shots.

    Here is the modal and the button that opens it:

                                                <asp:LinkButton ID="btnDeptDCVL" runat="server" Style="cursor: pointer; text-decoration: underline; padding-left: 10px" Text="Select" />
                                                <ajaxtoolkit:ModalPopupExtender ID="mPopupDept" runat="server" PopupControlID="pnlDept"
                                                    TargetControlID="btnDeptDCVL" BackgroundCssClass="modalProgressGreyBackground"
                                                    DropShadow="false">
                                                </ajaxtoolkit:ModalPopupExtender>
                                                <asp:Panel ID="pnlDept" runat="server" Height="450px" Width="514px" Style="display: none; background-color: AntiqueWhite;">
                                                    <div style="padding: 20px">
                                                        Select Departments from the left. Double-click, drag and drop, or click the arrows to select.<br />
                                                        <telerik:RadAjaxPanel runat="server" ID="rap1">
                                                            <telerik:RadListBox ID="rlbDeptDCVL" runat="server" Width="250" Height="350" TransferMode="Copy"
                                                                AllowTransfer="true" AllowTransferOnDoubleClick="true" EnableDragAndDrop="true" AutoPostBackOnTransfer="true"
                                                                TransferToID="rlbSelectedDeptDCVL">
                                                                <ButtonSettings Position="Right" />
                                                            </telerik:RadListBox>
                                                            <telerik:RadListBox ID="rlbSelectedDeptDCVL" runat="server" Width="220" Height="350">
                                                            </telerik:RadListBox>
                                                        </telerik:RadAjaxPanel>
                                                        <p style="text-align: center;">
                                                            <asp:LinkButton ID="lnkOKDeptDCVL" runat="server" Text="OK" class="label" />
                                                            &nbsp;&nbsp;
                                                            <asp:LinkButton ID="lnkCancelDeptDCVL" runat="server" Text="Cancel" class="label" />
                                                        </p>
                                                    </div>
                                                </asp:Panel>
  2. Kim
    Kim avatar
    15 posts
    Member since:
    Apr 2013

    Posted 30 Jul 2014 in reply to Kim Link to this post

    Looks like a display inline style disappears for no reason. It's a generated div.

    This is what's rendered before any items are added:
    1.<div id="ctl00_ctl00_rlbSelectedDeptDCVLPanel" style="display: inline;">
    2.            <div id="ctl00_rlbSelectedDeptDCVL" class="RadListBox RadListBox_Default RadListBoxScrollable" style="height:100px;width:220px;">
    3.                <div class="rlbGroup rlbGroupRight">
    4. 
    5.                </div><input id="ctl00_rlbSelectedDeptDCVL_ClientState" name="ctl00_rlbSelectedDeptDCVL_ClientState" type="hidden" autocomplete="off" value="{"isEnabled":true,"logEntries":[],"selectedIndices":[],"checkedIndices":[],"scrollPosition":0}">
    6.            </div>
    7.        </div>

    This is what's rendered after adding an item:
    01.<div id="ctl00_ctl00_rlbSelectedDeptDCVLPanel">
    02.        <div id="ctl00_rlbSelectedDeptDCVL" class="RadListBox RadListBox_Default RadListBoxScrollable" style="height:100px;width:220px;">
    03.            <div class="rlbGroup rlbGroupRight">
    04.                <ul class="rlbList">
    05.                    <li id="ctl00_rlbSelectedDeptDCVL_i0" class="rlbItem"><span class="rlbText">18 BED PILLOWS    </span></li>
    06.                </ul>
    07.            </div><input id="ctl00_rlbSelectedDeptDCVL_ClientState" name="ctl00_rlbSelectedDeptDCVL_ClientState" type="hidden" autocomplete="off" value="{"isEnabled":true,"logEntries":[],"selectedIndices":[],"checkedIndices":[],"scrollPosition":0}">
    08.        </div>
    09.    </div>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 04 Aug 2014 Link to this post

    Hi Kim,

    This looks like a stying issue. Can you attach a sample project, so we can inspected the css code?

    Thanks.

    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top