Search code examples
cssblazorsyncfusion

Style Sheets for data objects within rows

Tackling some UI on the front end and getting a crash course in CSS. I'm using the Syncfusion Blazor components and they are well documented. I seem to have found myself stuck with some CSS style issues I have not been able to resolve.

I am dynamically creating a UI and while almost everything thing is aligned, I'm struggling with the CSS to align the objects with their "rows".

Snippet of mis-aligned CSS

I created a sample in the Blazor Playground/Sandbox for reference https://blazorplayground.syncfusion.com/embed/htLftJjEGVnUpBUW?appbar=true&editor=false&result=true&errorlist=true&theme=bootstrap5-dark

Solution

  • As far as I can tell, your preview does not include any code, so it's difficult to diagnose the problem. In future, it's probably best to include your code in your question.

    That said, this looks like an issue that can be solved by creating a CSS grid. In each column of the grid, you can create a container div to wrap around the elements in each column:

    #container-div {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(3, 1fr);
   row-gap: 10px;
   background-color: white;
 }

 .first-row { grid-row: 1 / 1 }
 .second-row { grid-row: 2 / 2 }
 .third-row { grid-row: 3 / 3 }

    (It goes without saying, but: replace all the class names above with class names you are using for your project).

    For each container div, you'll want to define it as a flex-box that can display all its child elements as a row:

    .all-rows {
  grid-columns: 1 / 1;
  display: flex;
  flex-direction: row;
}

    And make sure no child element in the container div is attempting any funny business. Prevent overflow of the container divs like so:

    .all-rows { 
 /* stuff from before ... */
 overflow: hidden;
} 
.all-rows * {
  height: 100%;
  margin: 0;
}

    For more information on this type of formatting in CSS I recommend checking out A Complete Guide to CSS Grids -- A Complete Guide to CSS Flexbox might also be of use to you.