Hi,
Dunno why, but the grid insert item and the update item templates styles are gone. the text became bold and the textboxes just stack on top of each other.
the only thing i did was adding bootstrap.css and .js to my project and used it on various pages without problems.
I am not using any divs or containers in the pages with the grid, so it's kinda strange.
I just have a top navbar recurring in all the pages (master). i suppose it might be a css problem.
Also, in a page with a treeview, but without any bootstrap code (except for the core link files css and js which are in the master pages) and the tree floats right, it didn't before.
here' a snapshot of a grid item in edit mode
http://snag.gy/1nxTp.jpg
5 Answers, 1 is accepted
We are not aware of similar issue caused by the bootstrap.css. You can try applying the following rule to avoid this behavior:
<style type=
"text/css"
>
.RadGrid .rgEditForm label {
font-weight
:
normal
!important
;
}
</style>
Regards,
Maria Ilieva
Telerik
Thank you. Just add bootstrap.min.css and a radgrid and go edit a form to see the problem.
the problem seems to rely on those classes, removing those fixes the problem, but i want to keep them for other purposes, as i do not want to modify the original css code.
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
I have that little workaround
<style>
/* Fix for bootstrap css vs telerik radgrid*/
label
{
display: normal !important;
max-width: 100% !important;
margin-bottom: 5px !important;
font-weight: normal !important;
}
td,
th
{
padding: 2px !important;
}
</style>
but this messes up other parts of the grid, like the pager, since it adds padding everywhere.
Most important, it messes up every content which is in the master page inside a table, since it's declaration !important.
How can i target the edit/insert form specifically to have the default padding?
You can apply the following styles on the page in order to have the edit form behaves properly with bootstrap:
<style type=
"text/css"
>
.RadGrid * {
box-sizing: content-box;
}
.RadGrid .rgEditForm td {
padding
:
1px
;
}
.RadGrid .rgEditForm label {
font-weight
:
normal
!important
;
}
</style>
I hope this helps.
Regards,
Maria Ilieva
Telerik