i have some struggles with material ui grid size. i want to set fixed grid size at specified breakpoint. For example at xs width is full but at sm width is 200px <Grid item container direction="row" xs={12}> <Grid xs={12} sm={can…
I display a nested Tabulator table inside a cell. Here is all the code you need to replicate: <html> <head> <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"> </head> <body> <div id="example-table"></div> <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script> <script> //define some sample data, with the…
I have some articles in my code which has a display of grid. I have set the padding of the body to padding: 0 1em; and the min-width of the following elements and classes to 450px; can someone please tell…
I'm trying to create a page for CCTV camera streams that displays 9 streams in a 3x3 grid, using the full available width and height, without scrolling. The streams are different resolutions but I want the grid to resize the…
I'm trying to create a template with my html elements, that would not be complicated if it was not for one constraint : the html elements have to be all siblings ! indeed, I create them in the context of…
<div class="col-sm-2" style="text-align: right;" > mytext1 </div> <div class="col-sm-2" style="text-align: right;" > mytext2 </div> <div class="col-sm-2" style="text-align: right;" > mytext3 </div> I need to reduce the size of only second div and I don't want to use col-sm-1 since it's…
I am trying to display two columns within a row in my ionic/angular project. the its just creating a stack where the other content is in the bottom. this is also my css <ion-grid class="rewards-container" *ngIf="!noRewardsData"> <ion-row class="row-container"> <ng-container *ngFor="let…
How to make .col element 100% of .container? .wrapper { max-height: 300px; display: flex; } .container { flex-grow: 1; display: flex; overflow-y: auto; overflow-x: hidden; gap: 10px; } .col { display: flex; flex-direction: column; flex: 1; gap: 10px; background-color: blue;…
I'm really struggling with working out how to make each element of the grid sticky on horizontal scroll. I've tried so many combinations but the {date} is never sticky. I've tried adding overflow-x-scroll to the parent, and changing items-baseline with…
Trying to search this is impossible -- every answer is about a slightly different problem, which is making it so all the rows in a single column are the same height (i.e. the same height as the tallest cell in…