Styling an position of the grid

7 posts, 0 answers
  1. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 22 Apr Link to this post

    Hello,

     

    I have an empty mvc 5 c# project which I basicly put a grid in and that is now working just fine, my problem is styling and its position.

    there is no CSS nothing I can see that would make the grid or the .cshtml file behave in this way. It has a margin on the left of about 1/4th of the whole screen.

    This is quite annoying , I suspect something in the included stylesheets with the grid is doing this. Its not just the grid this also does the same to the footer that is rendered in the _layout.cshtml.

    I want to either put a details column on the left or right of the grid that displays further details about the selected line in the grid.

     

    Suggestions ?

     

    Regards,

    Emil 

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 26 Apr Link to this post

    Hi Emil,

    I believe that this issue is caused by some custom CSS which influence the layout. Could you please try removing all other css files (leaving only the Kendo UI ones) and let me know if this will help?

    Regards,
    Iliana Nikolova
    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 26 Apr in reply to Iliana Nikolova Link to this post

    I started a new empty visual studio mvc 5 project, I took grid examples from your examples and pasted them in there. I have no custom css styling of any kind. All the demos I tried from the telerick package, the grid is allways centered on the web page.

     

    I even tried with firebug to manually remove anything that would cause this by disabling css styling and that didnt help at all.

    you can see my view (index.cshtml) and a picture of how it looks in my browser.

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 28 Apr Link to this post

    Hi Emil,

    From the provided index.cshtml it appears you are using Kendo UI with Twitter Booitstrap. Keep in mind that class container sets margin-left and margin-right auto which will center the Grid on the page. In order to avoid the issue you could set left / right margin / padding 0 to the Grid parent. As an example: 
    <div class="container customClass">
       <div class="col-xs-1">
          @(Html.Kendo().Grid<VaultLeitarvefur.Models.VaultNidurstodur>()
            //.....
    <!-- ... -->
    .customClass {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }


    Regards,
    Iliana Nikolova
    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. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 25 May in reply to Iliana Nikolova Link to this post

    I tried what you suggested and it didnt change a thing.

    I also changed my site.less file trying to change the body-content, since there seems to be a <div class ="container body-content" /> that comes with the grid, I removed all my divs but that didnt change anything

    .body-content {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    there is still the fairly large left margin, which nothing in my css file seems to be doing.

     

    Regards,

    Emil

     

  7. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 26 May in reply to Emil Link to this post

    I found out that if I remove 

     

    @Styles.Render("~/bundles/css")

    from my _layout.cshtml then the grid appears in the right position, but then I loose all my bootstrap styling, isnt there a way I can get both? Or at least SOME styling, it looks horrible (1990's) without styling.

    Regards,

    Emil

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 27 May Link to this post

    Hello Emil,

    You could keep the styles and inspect the generated HTML and the applied styles when the issue is observed, which will allow you to identify the exact setting that is causing the Grid to be displayed in the wrong position. Once you find that style you could override it with custom CSS. 

    Hope this helps.


    Regards,
    Konstantin Dikov
    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready