This is a migrated thread and some comments may be shown as answers.

Strange CSS? problem on RadGrid

5 Answers 150 Views
Grid
This is a migrated thread and some comments may be shown as answers.
CRISTINA
Top achievements
Rank 1
Iron
CRISTINA asked on 22 Jun 2015, 04:00 PM

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

Sort by
0
CRISTINA
Top achievements
Rank 1
Iron
answered on 24 Jun 2015, 07:47 AM
it seems that the problem relies on bootstrap.min.css, any clue where the css is messing the grid up?
0
Maria Ilieva
Telerik team
answered on 25 Jun 2015, 10:48 AM
Hi Christina,

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>
 Give this a try and see if it helps.

Regards,
Maria Ilieva
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
CRISTINA
Top achievements
Rank 1
Iron
answered on 26 Jun 2015, 09:31 AM

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?

0
Accepted
Maria Ilieva
Telerik team
answered on 30 Jun 2015, 02:11 PM
Hi Cristina,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
CRISTINA
Top achievements
Rank 1
Iron
answered on 01 Jul 2015, 06:00 AM
Thank you. This did the trick.
Tags
Grid
Asked by
CRISTINA
Top achievements
Rank 1
Iron
Answers by
CRISTINA
Top achievements
Rank 1
Iron
Maria Ilieva
Telerik team
Share this question
or