Strange CSS? problem on RadGrid

6 posts, 1 answers
  1. CRISTINA
    CRISTINA avatar
    7 posts
    Member since:
    Jul 2010

    Posted 22 Jun 2015 Link to this post

    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

  2. CRISTINA
    CRISTINA avatar
    7 posts
    Member since:
    Jul 2010

    Posted 24 Jun 2015 Link to this post

    it seems that the problem relies on bootstrap.min.css, any clue where the css is messing the grid up?
  3. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 25 Jun 2015 Link to this post

    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
  4. CRISTINA
    CRISTINA avatar
    7 posts
    Member since:
    Jul 2010

    Posted 26 Jun 2015 Link to this post

    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?

  5. Answer
    Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 30 Jun 2015 Link to this post

    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
  6. CRISTINA
    CRISTINA avatar
    7 posts
    Member since:
    Jul 2010

    Posted 01 Jul 2015 in reply to Maria Ilieva Link to this post

    Thank you. This did the trick.
Back to Top