This is a migrated thread and some comments may be shown as answers.
RadPanelBar item Text width issue in Chrome and Firefox
7 Answers 50 Views
This is a migrated thread and some comments may be shown as answers.
Jan Pfeffer
Top achievements
Rank 1
Jan Pfeffer asked on 10 Sep 2012, 02:38 PM
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

7 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 11 Sep 2012, 10:04 AM
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
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 their blog feed now.
0
Jan Pfeffer
Top achievements
Rank 1
answered on 12 Sep 2012, 07:34 AM
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>

0
Kate
Telerik team
answered on 14 Sep 2012, 03:45 PM
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
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 their blog feed now.
0
Jan Pfeffer
Top achievements
Rank 1
answered on 17 Sep 2012, 06:42 AM
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>
0
Princy
Top achievements
Rank 1
answered on 17 Sep 2012, 09:57 AM
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.
0
Jan Pfeffer
Top achievements
Rank 1
answered on 17 Sep 2012, 11:09 AM
Hey Kate

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

Sincerly Jan
0
Accepted
Kate
Telerik team
answered on 20 Sep 2012, 10:31 AM
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
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 their blog feed now.
Asked by
Jan Pfeffer
Top achievements
Rank 1
Answers by
Kate
Telerik team
Jan Pfeffer
Top achievements
Rank 1
Princy
Top achievements
Rank 1
Share this question
or