Problem with table row spacing inside radpanelbar

[Shilpa]

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>

[Kate]

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

[improwise]

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. 

[Ivan Zhekov]

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

[improwise]

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?

[Ivan Zhekov]

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