RadPanelBar item Text width issue in Chrome and Firefox

8 posts, 1 answers
  1. Jan Pfeffer
    Jan Pfeffer avatar
    55 posts
    Member since:
    Aug 2006

    Posted 10 Sep 2012 Link to this post

    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
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 11 Sep 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jan Pfeffer
    Jan Pfeffer avatar
    55 posts
    Member since:
    Aug 2006

    Posted 12 Sep 2012 Link to this post

    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>

  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 14 Sep 2012 Link to this post

    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.
  6. Jan Pfeffer
    Jan Pfeffer avatar
    55 posts
    Member since:
    Aug 2006

    Posted 17 Sep 2012 Link to this post

    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>
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Sep 2012 Link to this post

    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.
  8. Jan Pfeffer
    Jan Pfeffer avatar
    55 posts
    Member since:
    Aug 2006

    Posted 17 Sep 2012 Link to this post

    Hey Kate

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

    Sincerly Jan
  9. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Sep 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017