Problem with table row spacing inside radpanelbar

6 posts, 0 answers
  1. Shilpa
    Shilpa avatar
    3 posts
    Member since:
    Mar 2011

    Posted 02 Jun 2011 Link to this post

    I have added a table control inside radpanelitem content template.
    The issue is with the row, it does not take the height of the image inside it (6px)
    If i render the table without the radpanelbar, the rows are rendered correctly.
    I would appreciate any workaround for this issue.

    Here is the code (please replace the images with different images to see the error) -

    <telerik:RadPanelBar ID="RadPanelBar3" runat="server" ExpandMode="FullExpandedItem" Width="100%">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="search" Expanded="True">
                        <ContentTemplate >
                            <asp:Table runat="server" ID="tblsearchRequest" style="border-spacing:0;" CellSpacing="0" >
                                <asp:TableRow style="border-width:0">
                                    <asp:TableCell style="margin:0;padding:0;border-width:0; font-size: 1px">&nbsp;</asp:TableCell>
                                    <asp:TableCell HorizontalAlign="left" style="padding-right: 4px; border-bottom: 1px solid #B4BBCD; padding: 0px;  font-size: 1px"></asp:TableCell>
                                    <asp:TableCell ID="tdAny" runat="server" HorizontalAlign="left"  style="border-bottom: 1px solid #B4BBCD; padding-right: 4px; padding: 0px; height: 6px; font-size: 1px; width: 11px" VerticalAlign="bottom">
                                        <asp:Image Visible="false" Width="11" Height="6" ID="imgSelAny" runat="server" ImageUrl="~/Images/SelectArrow.gif" BorderWidth="0" ></asp:Image>
                                    </asp:TableCell>
                                    <asp:TableCell HorizontalAlign="left" style="padding-right: 4px; border-bottom: 1px solid #B4BBCD; padding: 0px;  font-size: 1px"></asp:TableCell>
                                    <asp:TableCell ID="tdAll" runat="server" HorizontalAlign="left" style="border-bottom: 1px solid #B4BBCD; padding-right: 4px; padding: 0px; height: 6px; font-size: 1px; width: 11px" VerticalAlign="bottom">
                                        <asp:Image Visible="false" ID="imgSelAll" Width="11" Height="6" runat="server" ImageUrl="~/Images/SelectArrow.gif" BorderWidth="0" ></asp:Image>
                                    </asp:TableCell>
                                    <asp:TableCell HorizontalAlign="left" style="padding-right: 4px; border-bottom: 1px solid #B4BBCD; padding: 0px;  font-size: 1px"></asp:TableCell>
                                    <asp:TableCell ID="tdBool" runat="server" HorizontalAlign="left" style="border-bottom: 0px solid #B4BBCD; padding-right: 4px; padding: 0px; height: 6px; font-size: 1px; width: 11px" VerticalAlign="bottom">
                                        <asp:Image ID="imgSelBool" Width="11" Height="6" runat="server" ImageUrl="~/Images/SelectArrow.gif" BorderWidth="0" ></asp:Image>
                                    </asp:TableCell>
                                    <asp:TableCell HorizontalAlign="left" style="padding-right: 4px; border-bottom: 1px solid #B4BBCD; padding: 0px; font-size: 1px"></asp:TableCell>
                                    <asp:TableCell style="margin:0;padding:0;border-width:0; font-size: 1px"></asp:TableCell>
                                </asp:TableRow>
                            </asp:Table>
                        </ContentTemplate>
                    </telerik:RadPanelItem>
                </Items>
        </telerik:RadPanelBar>
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 08 Jun 2011 Link to this post

    Hi Shilpa,

    Since there is line-height that is applied to the ContentTemplate of the RadPanelBar this is actually the expected behaviour of the table that you put in the control. In case you need alter it here is the css class selector that you need to use:
    div.RadPanelBar .rpGroup .rpLink,
    div.RadPanelBar .rpGroup .rpTemplate {
            line-height: 22px;
    }

    Regards,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 02 Apr 2012 Link to this post

    Picking up on this, there are numerous thread in here about this same problem, line height. Regardless if there is a "good reason for it", I think Telerik should look into a solution for it, as it seems to affect many users. I don't think that having to modify a CSS is the correct way to solve the problem, it's hard to maintain in the long run, especially if you are using standard skins and don't necessarily have a "CSS awareness" so to speak. 
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 09 Apr 2012 Link to this post

    Hi, Patrick.

    As innocent as it seems the line-height property is needed for a couple of reasons:

    1) it does make text look better and not cramped;
    2) it makes the text feel like part of the control and not something randomly inserted;
    3) it's very likely that there is at least one line-height being specified for the body element and if we do not specify line height, the so far calculated one will be inherited.

    I agree that tweaking CSS might be hard for developers, but it's the right way to do it.

    It should also be noticed that even though we allow for all types of content templates -- grids, buttons, asp controls, telerik controls, third party controls and so on -- not all of them are fit to be content.

    Regards,
    Ivan Zhekov
    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. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 09 Apr 2012 Link to this post

    Hi,

    1 & 2. Sorry, but we don't want Telerik to decide for us what is good looking text and what isn't. In this case, i personally think that anything but standard line height makes the text look really bad. It's a good thing this property exist, but it should only affect the appearance if we tell it to override global CSS:

    3. Is this a bad thing?

    i just don't understand your answer here. You seem to say that it would be a bad thing if the RadPanelBar used the same CSS as globaly specified for your site/skin, but that is the whole point of having a global CSS and default behavior should be for any control/component NOT to override it unless you have specifically asked for it. In this case, I would assume that text rendered within a RadPanelBar would look exactly the same as the same text being rendered outside of the RadPanelBar. I would be very surprised if this wasn't also true for most Telerik users. 


    Or am I misunderstanding something important here?
  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 13 Apr 2012 Link to this post

    Hello, Patrick.

    For 1) and 2) you are completely right -- Telerik should not decide for a developer how a thing should look, if that developer has something else in mind. This is why we provide enough selectors for developers to change the look and feel of our controls.

    For 3), having in mind that the current skins are done mostly with images (background images) and not using the CSS specs to it's maximum due to legacy browsers, inherited line height is not always a good thing, as it will either squish or stretch the looks of the panelbar.

    I understand your request and the reasons behind it, however, this particular behaviour is is relied on by other developers and should we change this behaviour it will break in every such case.

    We could perhaps consider an additional trigger, say UseDefaultLooks="true" or something like it to switch "on" or "off" the styles in question. But we need to consider this very carefully, as we do not want to break anyone's code / looks.

    Greetings,
    Ivan Zhekov
    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