RadListBox looks bad in either IE or Chrome

10 posts, 0 answers
  1. C
    C avatar
    43 posts
    Member since:
    Jul 2013

    Posted 16 Sep 2013 Link to this post

    I have a RadWindow with a panel that is in turn divided into a right and a left subpanel. Each subpanel has a RadListBox that is to display varying amounts of rows.

    Everything was working just fine, until it turned out nothing was being displayed in the boxes for IE users. After looking through the forum, I found removing the "height" property of the RadListBoxes in the .aspx file would fix this in IE. However, after doing this, the page looks quite wrong in Chrome (but not Firefox or IE).

    I have attached two screen shots for comparison.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 19 Sep 2013 Link to this post

    Hello,

    Can you paste the code that you are using for your page and that is causing issues with the appearance of the RadListBox control? Thus, I could be able to test it from my side and check what might be causing the issue  that you get. 

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. C
    C avatar
    43 posts
    Member since:
    Jul 2013

    Posted 19 Sep 2013 Link to this post

    Certainly!

    <asp:Panel runat="server" ID="ManageBalancePartsPanel" ClientIDMode="Static" CssClass="manage-balance-parts">       
            <asp:Panel runat="server" CssClass="left-section">
                <h1><asp:Literal runat="server" Text="<%$ Resx:SiteTextResources.ManageArticles_AssociatedArticles %>" /></h1>
                <telerik:RadListBox runat="server"
                    ID="ConnectedBalancePartsListBox"
                    Height="440px"
                    Width="380px"
                    AllowReorder="true"
                    SelectionMode="Multiple"
                    OnItemDataBound="OnConnectedBalancePartsDataBound"
                    AllowDelete="true"
                    Localization-MoveDown="<%$ Resx:SiteTextResources.ManageArticles_MoveArticlesDown %>"
                    Localization-MoveUp="<%$ Resx:SiteTextResources.ManageArticles_MoveArticlesUp %>"
                    Localization-Delete="<%$ Resx:SiteTextResources.ManageArticles_RemoveSelectedArticles %>">
                    <ButtonSettings ShowDelete="true" />
                    <HeaderTemplate>
                        <ul class="list-header">
                            <li class="part-number-column"><asp:Literal runat="server" Text="<%$ Resx:SiteTextResources.ManageArticles_PartNo %>" /></li>
                            <li class="part-description-column"><asp:Literal runat="server" Text="<%$ Resx:SiteTextResources.ManageArticles_PartDescription %>" /></li>
                        </ul>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <ul>
                            <li class="part-number-column"><%# Eval("PartNo") %></li>
                            <li class="part-description-column"><%# Eval("Description") %></li>
                        </ul>
                    </ItemTemplate>
                </telerik:RadListBox>
            </asp:Panel>
            <asp:Panel runat="server" CssClass="right-section">
                <h1><asp:Literal runat="server" Text="<%$ Resx:SiteTextResources.ManageArticles_FindArticles %>" /></h1>
                <div class="search-articles-wrapper">
                    <telerik:RadTextBox runat="server"
                        Width="348px"
                        ID="BalancePartsFilterTextBox"
                        ClientIDMode="Static"
                        CssClass="search-articles-input"
                        EmptyMessage="<%$ Resx:SiteTextResources.ManageArticles_FindArticlesEmptyMessage %>" />
                    <div id="suggestions"></div>
                </div>
                <div>
                    <telerik:RadListBox ID="BalancePartsFilterResultsListBox"
                        runat="server"
                        Width="380px"
                        Height="420px"
                        EnableDragAndDrop="true"
                        AllowReorder="false"
                        AllowTransfer="true"
                        TransferToID="ConnectedBalancePartsListBox"
                        AutoPostBackOnTransfer="true"
                        SelectionMode="Multiple"
                        TransferMode="Move"
                        OnTransferred="OnBalancePartsTransferred"
                        OnTransferring="OnBalancePartsTransferring"
                        OnItemDataBound="OnFilterBalancePartsDataBound"
                        Localization-ToLeft="<%$ Resx:SiteTextResources.ManageArticles_AssociateSelectedArticle %>"
                        Localization-AllToLeft="<%$ Resx:SiteTextResources.ManageArticles_AssociateAllArticles %>">
                        <ButtonSettings ShowReorder="false" Position="Left" TransferButtons="TransferFrom, TransferAllFrom" />
                        <HeaderTemplate>
                            <ul class="list-header">
                                <li class="part-number-column"><asp:Literal runat="server" Text="<%$ Resx:SiteTextResources.ManageArticles_PartNo %>" /></li>
                                <li class="part-description-column"><asp:Literal runat="server" Text="<%$ Resx:SiteTextResources.ManageArticles_PartDescription %>" /></li>
                            </ul>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <ul>
                                <li class="part-number-column"><%# Eval("PartNo") %></li>
                                <li class="part-description-column"><%# Eval("Description") %></li>
                            </ul>
                        </ItemTemplate>
                    </telerik:RadListBox>
                </div>
            </asp:Panel>
            <div class="clear"></div>
            <telerik:RadButton runat="server" Text="Spara ändringar" ID="SaveChangesButton" OnClick="SaveChangesClick" CssClass="save-changes-button" />
        </asp:Panel>
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 24 Sep 2013 Link to this post

    Hi,

    I tested the code that you provided and I seem to be getting one and the same look in both Firefox and Chrome browsers (check the attached image file). Can you please clarify if you are using any custom css class that might be styling the page? 

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. C
    C avatar
    43 posts
    Member since:
    Jul 2013

    Posted 24 Sep 2013 Link to this post

    This problem persists when I turn all custom css off.
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 27 Sep 2013 Link to this post

    Hi,

    I have been testing the code that you provided again but still I am not able to replicate the issue that you are describing. Can you please check our on-line demos as well and let me know if you get the issues there? Any additional information on how to replicate the look that you get from my side would be greatly appreciated.

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Heather
    Heather avatar
    5 posts
    Member since:
    May 2013

    Posted 05 Jun 2014 Link to this post

    Has there ever been a fix for this? I am having a similar issue, but it is only happening in Chrome. 
  9. Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 09 Jun 2014 Link to this post

    Hello Heather,

    We are not aware of such known issue with RadListBox. Would you please share the exact mark up that will help us replicate the issue and me more helpful with a possible solution?

    Regards,
    Plamen
    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.

     
  10. Heather
    Heather avatar
    5 posts
    Member since:
    May 2013

    Posted 09 Jun 2014 Link to this post

     <telerik:GridTemplateColumn HeaderText="Disposition Vendor Used" UniqueName="DispositionVendors" Visible="false" >
                   <EditItemTemplate>
                     <telerik:RadListBox ID="lboxVendors" runat="server" AllowTransfer="true" TransferMode="Move" ButtonSettings-ShowTransferAll="false" TransferToID="lboxVendors2" OnDataBound="lboxVendors_OnDataBound"></telerik:RadListBox>
                      <telerik:RadListBox ID="lboxVendors2" runat="server"  OnDataBound="lboxVendors2_DataBound"></telerik:RadListBox>          
                   </EditItemTemplate>
               </telerik:GridTemplateColumn>

    The boxes are filled from code behind and then the grid uses an update command to save everything back to the database.
    The image ListChrome is how it looks in chrome, the other one ListFirefox is how it looks in Firefox & IE. The one in chrome will not work because the button is inside the listbox.
  11. Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 10 Jun 2014 Link to this post

    Hi,

    It looks like the image listchrome.jpg was not sent correctly because I could not see anything in it would you please resend it. 

    Would you please elaborate if the issue is still observed if you use RadListBox outside of RadGrid or on a separate page too?

    Regards,
    Plamen
    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
UI for ASP.NET Ajax is Ready for VS 2017