RadPanelBar item Text width issue in Chrome and Firefox

[Jan Pfeffer]

Hey at Telerik

I have tried with css to fix width of a radpanelitem when text contains whitespaces.
I have tried with no-wrap with no luck.

I have in cluded three screenshots that illustrates the problem.

The RadPanelBar item looks fine in IE, but styling is all messed up under Firefox and Chrome.

Sincerly

Jan

[Kate]

Hello Jan,

Can you please provide the markup of the RadPanelBar control that you are using so I can test it locally and help you out? 

Kind regards,
Kate
the Telerik team

[Jan Pfeffer]

Hey Kate

The Markup for the RadPanelBar

<

 

 

telerik:RadPanelBar runat="server" ID="rpnlHelper" ExpandMode="SingleExpandedItem"

 

CollapseAnimation-Duration="2000" ExpandAnimation-Duration="2000" Width="100%"

 

AllowCollapseAllItems="true" Skin="Forest" Style="background-color: #588A4D;">

 

<Items>

 

<telerik:RadPanelItem Text="Generel hjælp" ImageUrl="../../Images/help.png" Expanded="False"

 

CssClass="RadPanelBarSpecialOffset" ForeColor="White" AccessKey="h" Value="0">

 

<Items>

 

<telerik:RadPanelItem>

 

<ItemTemplate>

 

<table cellpadding="0" cellspacing="0" width="100%" border="0" style="line-height:normal !important;">

 

<tr>

 

<td id="htmlContainer" align="center">

 

</td>

 

</tr>

 

</table>

 

</ItemTemplate>

 

</telerik:RadPanelItem>

 

</Items>

 

</telerik:RadPanelItem>

 

</Items>

</

 

 

telerik:RadPanelBar>

[Kate]

Hello Jan,

I tested the code that you provided in both IE and FireFox browsers but I was not able to replicate the appearance that you get (attached to the post you can find an image demonstrating the appearance that I get from my side). Let me know if I am missing something. 

Regards,
Kate
the Telerik team

[Jan Pfeffer]

Hey Kate

I forgot to mention that i have the radpanelbar in a container centered at the bottom of the page.

Underneath is the code

Sincerly Jan

<div id="overlayHelper" style="display: block; background-color: transparent; position: fixed;
        bottom: 0px; left: 0px; right: 0px; border: none; z-index: 7500;">
        <div style="float: right; right: 50%; position: relative;">
            <div style="float: right; right: -50%; position: relative;">
                <telerik:RadPanelBar runat="server" ID="rpnlHelper" ExpandMode="SingleExpandedItem"
                    CollapseAnimation-Duration="2000" ExpandAnimation-Duration="2000" Width="100%"
                    AllowCollapseAllItems="true" Skin="Forest" Style="background-color: #588A4D;">
                    <Items>
                        <telerik:RadPanelItem Text="Generel hjælp" ImageUrl="../../Images/help.png" Expanded="False"
                            CssClass="RadPanelBarSpecialOffset" ForeColor="White" AccessKey="h" Value="0">
                            <Items>
                                <telerik:RadPanelItem>
                                    <ItemTemplate>
                                        <table cellpadding="0" cellspacing="0" width="100%" border="0" style="line-height: normal !important;">
                                            <tr>
                                                <td id="htmlContainer" align="center">
                                                    <table style="text-align: left; background-color: yellow; width: 100px; font-family: verdana;
                                                        height: 100px; color: black; font-size: 12px; vertical-align: middle; border: orange 2px solid;"
                                                        cellspacing="0" cellpadding="3">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    DTK/Skærmkort, Danmark i målestoksforhold fra 1:3500 til 1:6192500
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <a href="http://kortforsyningen.kms.dk/service?request=GetCapabilities&;version=1.1.1&ticket=c435f69c080e1b59bb1d6c972465d985&servicename=topo_skaermkort&service=WMS">
                                                                        Kortforsyningen</a>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
            </div>
        </div>
    </div>

[Princy]

Hi Jan,

Try overriding the default CSS as follows.

CSS:

<style type="text/css">
     .RadPanelBar .rpText
        {
            padding-right: 35px !important;
            white-space: nowrap !important;
        }
</style>

Hope this helps.

Regards,
Princy.

[Jan Pfeffer]

Hey Kate

That i have tried.
Gives an 35 pixel offset in IE, text is not correctly placed.

Sincerly Jan

[Kate]

Hi Jan,

Did you try setting a fixed width to the RadPanelBar control instead of setting it in percentage?

<telerik:RadPanelBar runat="server" ID="rpnlHelper" ExpandMode="SingleExpandedItem"
                   CollapseAnimation-Duration="2000" ExpandAnimation-Duration="2000" Width="120px"
                   AllowCollapseAllItems="true" Skin="Forest" Style="background-color: #588A4D;">

Regards,
Kate
the Telerik team