RadListBox looks bad in either IE or Chrome

[C]

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.

[Kate]

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

[C]

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>

[Kate]

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

[C]

This problem persists when I turn all custom css off.

[Kate]

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

[Heather]

Has there ever been a fix for this? I am having a similar issue, but it is only happening in Chrome. 

[Plamen]

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

 

 

[Heather]

 <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.

[Plamen]

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