For some reason, not all of the CSS for my Edit Form Template is being applied. The containing pop up window is too narrow for the input labels and textboxes and, as a result, they spill outside of the window. There are also div's within the template which have CSS associated with them that is being lost. Any idea why this might be?
Thanks,
Tim
Thanks,
Tim
3 Answers, 1 is accepted
0
Hello Tim,
Possible reasons are:
1) incorrect/invalid CSS rules (styles not being applied problem)
2) incorrect CSS specificity (styles not being applied problem)
3) incorrect CSS layout, e.g. incorrect widths/heights set (overflow problem)
You can use Firebug to research such problems.
Regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Possible reasons are:
1) incorrect/invalid CSS rules (styles not being applied problem)
2) incorrect CSS specificity (styles not being applied problem)
3) incorrect CSS layout, e.g. incorrect widths/heights set (overflow problem)
You can use Firebug to research such problems.
Regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Tim
Top achievements
Rank 1
Rank 1
answered on 13 Oct 2009, 06:31 AM
Dimo,
Thanks for the reply. Firebug has been helpful, but hasn't solved my problem. One of the basic things I'm trying to do is set the width of the custom edit form template I've created along with it's accompanying header bar (note: I'm using the Web20 skin).
When I look at the element information using Firebug or IE Developer Toolbar, it gives me ID's, but each time I open the page, these ID's change slightly. For example, the overall edit form might have an ID like #RadGrid1_ctl00_ctl19_ctl00 and the header bar an ID like RadGrid1_ctl00__13_PEF, then the next time I open the page, the edit from is #RadGrid1_ctl00_ctl09_ctl00 and the header bar is RadGrid1_ctl00__4_PEF. So, I haven't been able to find consistent ID's to use in setting the widths. And the classes are too generic (eg. rgHeader) to use without affecting other things that fall into that class.
I still have other CSS that is being ignored, but solving this particular issue first would be a step in the right direction. Any additional insight you can provide would be greatly appreciated.
Cheers,
Tim
Thanks for the reply. Firebug has been helpful, but hasn't solved my problem. One of the basic things I'm trying to do is set the width of the custom edit form template I've created along with it's accompanying header bar (note: I'm using the Web20 skin).
When I look at the element information using Firebug or IE Developer Toolbar, it gives me ID's, but each time I open the page, these ID's change slightly. For example, the overall edit form might have an ID like #RadGrid1_ctl00_ctl19_ctl00 and the header bar an ID like RadGrid1_ctl00__13_PEF, then the next time I open the page, the edit from is #RadGrid1_ctl00_ctl09_ctl00 and the header bar is RadGrid1_ctl00__4_PEF. So, I haven't been able to find consistent ID's to use in setting the widths. And the classes are too generic (eg. rgHeader) to use without affecting other things that fall into that class.
I still have other CSS that is being ignored, but solving this particular issue first would be a step in the right direction. Any additional insight you can provide would be greatly appreciated.
Cheers,
Tim
0
Hi Tim,
Generally, in ASP.NET it is not a good practice to use client IDs for applying CSS styles, because you cannot be sure about the client ID, as you see. In this case the client IDs depend on the edited row's index.
The fact that the rgHeader CSS class is used in another context as well is not a problem, because you can use a suitable selector to target only the popup edit form header:
.RadGrid_SkinName td div.rgHeader
{
/* ...........*/
}
As you see, we target a <div> with the rgHeader CSS class, while the header cells are <th> elements.
Greetings,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Generally, in ASP.NET it is not a good practice to use client IDs for applying CSS styles, because you cannot be sure about the client ID, as you see. In this case the client IDs depend on the edited row's index.
The fact that the rgHeader CSS class is used in another context as well is not a problem, because you can use a suitable selector to target only the popup edit form header:
.RadGrid_SkinName td div.rgHeader
{
/* ...........*/
}
As you see, we target a <div> with the rgHeader CSS class, while the header cells are <th> elements.
Greetings,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.