Kevin Schneider
Top achievements
Rank 1
Rank 1
Kevin Schneider
asked on 16 Jun 2008, 09:04 PM
If I explicitly set these values on the grid to make my rows taller, there is a big difference between IE7 and Firefox.
Firefox seems to need a larger value to display similarly to IE7.
i.e. 25px vs 33px (IE vs FF)
Any work arounds for this?
Firefox seems to need a larger value to display similarly to IE7.
i.e. 25px vs 33px (IE vs FF)
Any work arounds for this?
4 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
Rank 2
answered on 17 Jun 2008, 10:03 AM
Hi Kevin,
Try setting the row height as shown below.
ASPX:
Thanks
Princy
Try setting the row height as shown below.
ASPX:
| <MasterTableView DataSourceID="SqlDataSource3" CommandItemDisplay="Top" > |
| <ItemStyle CssClass="Class1" /> |
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css" > |
| .Class1 |
| { |
| height:25px; |
| } |
| </style> |
| </head> |
Thanks
Princy
0
Hello,
The difference in display is caused by the different implementation of the table cells' height and padding styles by Firefox and Internet Explorer - namely, Internet Explorer adds the vertical paddings to the height, which additionally expands the cells, while Firefox does not do that. In order to make the cells look equally high in the two browsers, please use only height or only top/bottom paddings, but not both. For example this is how to nullify the paddings:
<telerik:RadGrid CssClass="CustomClass" />
.CustomClass .GridHeader_Skin,
.CustomClass .ResizeHeader_Skin
{
padding-top:0;
padding-bottom:0;
}
After applying this CSS rule, you can adjust the HeaderStyle Height property according to your preference. You need the custom CSS class, so that the paddings are not reset for all instances of RadGrid in your web application. If you want the CSS rule to apply to all instances, please use
.RadGrid_Skin .GridHeader_Skin,
.RadGrid_Skin .ResizeHeader_Skin
{
padding-top:0;
padding-bottom:0;
}
Best wishes,
Dimo
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
The difference in display is caused by the different implementation of the table cells' height and padding styles by Firefox and Internet Explorer - namely, Internet Explorer adds the vertical paddings to the height, which additionally expands the cells, while Firefox does not do that. In order to make the cells look equally high in the two browsers, please use only height or only top/bottom paddings, but not both. For example this is how to nullify the paddings:
<telerik:RadGrid CssClass="CustomClass" />
.CustomClass .GridHeader_Skin,
.CustomClass .ResizeHeader_Skin
{
padding-top:0;
padding-bottom:0;
}
After applying this CSS rule, you can adjust the HeaderStyle Height property according to your preference. You need the custom CSS class, so that the paddings are not reset for all instances of RadGrid in your web application. If you want the CSS rule to apply to all instances, please use
.RadGrid_Skin .GridHeader_Skin,
.RadGrid_Skin .ResizeHeader_Skin
{
padding-top:0;
padding-bottom:0;
}
Best wishes,
Dimo
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Kevin Schneider
Top achievements
Rank 1
Rank 1
answered on 17 Jun 2008, 01:01 PM
Well that didn't quite work since I'm not dealing with the header but I did find the style adding the padding and can override it with:
.GridRow_Telerik td,
.GridAltRow_Telerik td
{
padding-top: 0 !important;
padding-bottom: 0 !important;
}
This works but I note the !important - I needed this to override the style in IE7. Is this the way it should be?
On a side note, I have another issue related to the same grid. I have a combobox in a template column and then have a rad ajax manager handling the ajax for the grid.
In Firefox if I go into edit mode initially it shows the combobox correctly. If I then cancel the row edit, and then go back into edit mode a second time the combobox doesn't display correctly. It doesn't draw itself but still shows the text. If I click where it would normally be the list still shows. This does not happen in IE7.
Thanks.
0
Accepted
Hello Kevin,
If you want to nullify the data cells' paddings, you can use the same approach, which I provided earlier:
<telerik:RadGrid CssClass="CustomClass" />
.CustomClass .GridRow_Skin td,
.CustomClass .GridAltRow_Skin td
{
padding-top:0;
padding-bottom:0;
}
In this case you will not need the !important clause, because the specificity of the above custom CSS rule's selectors is by 10 points greater than the specificity of those selectors in the skin (1 CSS class = 10 points)
As for the ComboBox - I think I know what you are talking about and unfortunately this is a rendering issue in Firefox. Please try setting
<telerik:RadComboBox style="display:block" />
or
<telerik:RadComboBox style="float:left" />
and see whether this helps.
Greetings,
Dimo
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
If you want to nullify the data cells' paddings, you can use the same approach, which I provided earlier:
<telerik:RadGrid CssClass="CustomClass" />
.CustomClass .GridRow_Skin td,
.CustomClass .GridAltRow_Skin td
{
padding-top:0;
padding-bottom:0;
}
In this case you will not need the !important clause, because the specificity of the above custom CSS rule's selectors is by 10 points greater than the specificity of those selectors in the skin (1 CSS class = 10 points)
As for the ComboBox - I think I know what you are talking about and unfortunately this is a rendering issue in Firefox. Please try setting
<telerik:RadComboBox style="display:block" />
or
<telerik:RadComboBox style="float:left" />
and see whether this helps.
Greetings,
Dimo
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center