How to adjust row height on Flexgrid (Ideally with CSS)?

How to adjust row height on Flexgrid (Ideally with CSS)?

Posted by: travis on 19 August 2019, 2:31 pm EST

• 

  travis

  • Post Options:
  • Link
    Copy

  Posted 19 August 2019, 2:31 pm EST - Updated 29 September 2022, 10:51 am EST

  So, I’ve attempted to apply CSS formatting to the rows on a flexgrid.

  My CSS looks like this (it’s stupid formatting only to try and see if it works):

  
  .grid {
      background-color: green;
  }
  
  .grid .wj-row
  {
      background-color: blue;
      height: 150px;
  }
  
  .wj-cells .wj-cell {
      background-color: yellow ;
      height: 150px;
      padding: 10px;
  }
  
  .grid .wj-row .wj-cell {
      background: pink;
      text-align: center !important;
      height: 150px;
  }
  
  

  Most of that formatting applies, but the row height is always overridden by the inline styling (image attached).

  The flexgrid setup looks like this:

  
      @(Html.C1().FlexGrid(Of OrderDetail)() _
                          .Id("flexGrid") _
                          .AutoGenerateColumns(False) _
                          .Bind(Function(ib) ib.Bind(Model.Details).NewItemCreator("SetDefault").Update(Url.Action("GridUpdate", "Order")).Create(Url.Action("GridCreate", "Order")).Delete(Url.Action("GridDelete"))) _
                          .IsReadOnly(False) _
                          .CssClass("grid") _
                          .AllowDelete(True) _
                          .AllowAddNew(True).ItemFormatter("SVGFormatter") _
                          .Columns(Sub(bl)
                                       bl.Add(Sub(cb) cb.Binding("OrderID").Header("OrderID").Width("1.5*").IsReadOnly(True))
                                       bl.Add(Sub(cb) cb.Binding("Picture").Header("Picture").Width("1.5*").IsReadOnly(True))
                                       bl.Add(Sub(cb) cb.Binding("Series").Header("Series").Width("1.5*").Name("Series"))
                                       bl.Add(Sub(cb) cb.Binding("ColorID").Header("ColorID").Width("1.5*").Name("ColorID"))
                                       bl.Add(Sub(cb) cb.Binding("Quantity").Header("Quantity").Width(".5*").Name("Quantity"))
                                       bl.Add(Sub(cb) cb.Binding("Width").Header("Width").Width(".5*").Name("Width"))
                                       bl.Add(Sub(cb) cb.Binding("Height").Header("Height").Width(".5*").Name("Height"))
                                       bl.Add(Sub(cb) cb.Binding("MatchingBack").Header("MatchingBack").Width("*").Name("MatchingBack"))
                                       bl.Add(Sub(cb) cb.Binding("Hinges").Header("Hinges").Width("*").Name("Hinges"))
                                       bl.Add(Sub(cb) cb.Binding("Fingerpull").Header("Fingerpull").Width("*").Name("Fingerpull"))
                                       bl.Add(Sub(cb) cb.Binding("SquareEdge").Header("SquareEdge").Width("*").Name("SquareEdge"))
                                       bl.Add(Sub(cb) cb.Binding("SqFt").Header("SqFt").Width("*").IsReadOnly(True))
                                       bl.Add(Sub(cb) cb.Binding("TotalPrice").Header("Total").Width("*").IsReadOnly(True))
                                   End Sub)
      )
  

  

  2654×285 69.3 KB

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 August 2019, 3:09 am EST

  Hello Travis,
  
  To change Row height using CSS, please use the following CSS code snippet:

  .grid .wj-cell{
    padding: 65px 6px;
  }
  

  Please refer to the following demo sample for reference:https://jsfiddle.net/pkrg6L8m/

  Hope it helps!

  Regards,
  
  Manish Gupta

• 

  travis

  • Post Options:
  • Link
    Copy

  Posted 23 August 2019, 11:13 am EST

  That’s helpful, thanks.

  I’m still having a hard time getting the formatting to apply as I expect, and I’m confused. I see that the divs that make up each cell have the class set, but then for some reason they also inline style after that. It looks like the inline styling for the elements is using the data from .wj-cell, and as such I can’t override the header style with .wj-header.

  Any thoughts?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 August 2019, 11:14 pm EST

  Hi,
  
  The Cells have inline style regarding the Cell position as Top, Left, width and height. These are calculated according to the wj-cell styles (include padding, fontSize etc).

  The headers are also the cell and contains the wj-cell class. If you have applied styles to the wj-cell only, it will be displayed in the headers too.
  
  To style header differently, please use the following CSS:

  .wj-cell.wj-header{
      font-style: italic; // you may use the !important to override the default CSS
  }
  

  Hope it clears!

  Regards,
  
  Manish Gupta