Styling an position of the grid

[Emil]

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 

 

[Iliana Dyankova]

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

[Emil]

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.

[Iliana Dyankova]

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

[Emil]

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

 

[Emil]

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

[Konstantin Dikov]

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