I am using Magento 2.4.5 and would like to make edit css of the icons in the layered navigation, need them smaller and put them in rows of 6.
I cannot find where I need to add/edit the css files for this part of the website. I tried Magento_Swatches\web\css\source_module.less but no result.
Any help would be appreciated.
Thank you
If you are using the default Luma theme:
Note: First, you need to check the template file of the CSS source used.
You need to edit the CSS file: swatches.css or custom CSS if you have created one. Getting the correct element may it can give you a correct catch.
Could you adjust the width and height of the swatch div? Please remember to specify! an important rule in CSS.
.swatches-globo .swatch--gl .ul-swatches-list li:not(ul.ul-globo-dropdown-option li), .globo-swatch-product-detail .swatch--gl ul.value li:not(ul.ul-globo-dropdown-option li) {
display: block;
float: left;
margin: 0 10px 10px 0!important;
}
Also,
.swatches-globol .swatch--gl li .globo-size-medium, .globo-swatch-product-detail .globo-detail-size-medium {
width: 35px;
height: 35px;
}
OR
.swatch-option.color {
min-width: 25px;
height: 25px;
}
Thanks
The data I want to display in ag-grid is predominantly blocks of text. I would like the text to wrap and the cell height to auto.
wrapText: true,
autoHeight: true
However, when the text wraps, it maintains a line-height of 40px, which is not attractive. I also notice it doesn't try to wrap on word.
I tried resetting the line-height, but then I lose any top or bottom padding. When I add the padding, the top padding is fine, but the bottom padding is hidden - the row height does not account for the padding.
How do I get an attractive block text display in a cell with decent padding of the cell contents?
You could add some CSS to directly target the cell content to add padding:
.ag-theme-alpine .ag-cell-value {
line-height: 20px !important;
word-break: normal; /* prevent words from breaking */
padding-top: 5px; /* space top */
padding-bottom: 5px; /* space bottom */
}
See this implemented in the following plunkr
I can't find a good way to size the grid to fit all rows perfectly.
documentation only points to sizing by % or px.
Since I want it to size based on rows, I came up with the following function. Seem like im re-inventing the wheel, so maybe there is a better way?
getHeight(type:EntityType) {
var c = this.Apis[type] && this.Apis[type].api && this.Apis[type].api.rowModel // get api for current grid
? this.Apis[type].api.rowModel.rowsToDisplay.length
: -1;
return c > 0
? (40+(c*21))+'px' // not perfect but close formula for grid height
: '86%';
}
there has to be a less messy way..
I came across this solution:
https://github.com/ag-grid/ag-grid/issues/801
There are 2 answers to this problem.
1) If you are using anything below v10.1.0, then you can use the following CSS to achieve the problem:
.ag-scrolls {
height: auto !important;
}
.ag-body {
position: relative !important;
top: auto !important;
height: auto !important;
}
.ag-header {
position: relative !important;
}
.ag-floating-top {
position: relative !important;
top: auto !important;
}
.ag-floating-bottom {
position: relative !important;
top: auto !important;
}
.ag-bl-normal-east,
.ag-bl-normal,
.ag-bl-normal-center,
.ag-bl-normal-center-row,
.ag-bl-full-height,
.ag-bl-full-height-center,
.ag-pinned-left-cols-viewport,
.ag-pinned-right-cols-viewport,
.ag-body-viewport-wrapper,
.ag-body-viewport {
height: auto !important;
}
2) Anything above v10.1.0, there is now a property called 'domLayout'.
https://www.ag-grid.com/javascript-grid-width-and-height/#autoHeight
If the following is the markup
<ag-grid-angular
#agGrid
id="myGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
[domLayout]="domLayout"
[animateRows]="true"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
Note that [domLayout]="domLayout"
set it as this.domLayout = "autoHeight"; and you're done..
Ref:
https://www.ag-grid.com/javascript-grid-width-and-height/
https://next.plnkr.co/edit/Jb1TD7gbA4w7yclU
Hope it helps.
You can now automate grid height by setting the domLayout='autoHeight' property, or by calling api.setDomLayout('autoHeight')
reference Grid Auto Height
Add the following code on onGridReady function for auto width and auto height
onGridReady = params => {
// Following line to make the currently visible columns fit the screen
params.api.sizeColumnsToFit();
// Following line dymanic set height to row on content
params.api.resetRowHeights();
};
reference
Auto Height
Auto width
determineHeight() {
setTimeout(() => {
console.log(this.gridApi.getDisplayedRowCount());
if (this.gridApi.getDisplayedRowCount() < 20) {
this.gridApi.setDomLayout("autoHeight");
}
else {
this.gridApi.setDomLayout("normal");
document.getElementById('myGrid').style.height = "600px";
}
}, 500);
}
You can use ag-grid feature AutoHeight = true in the column Configuration. or if you want to calculate the height dynamically you should use getRowHeight() callback and create DOM elements like div and span, and add your text in it, then the div will give the OffsetHeight for it then you wont see any cropping of data/rows.
Hope this helps.
Bootstrap switch with on text 'Yes'
I am facing the problem with height in Bootstrap switch. I am not able to change the height of the switch. How can I change the height of the switch.
Just add following css to your page and adjust height, padding and margin according your design.
div.bootstrap-switch-container {
height: 25px;
}
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {
padding: 3px 12px;
}
div.bootstrap-switch {
margin-top: -4px;
}
I created a group chat for the iPhone and its almost perfect. It uses the complete viewport by position various elements with:
#message-input {
background: white;
clear: both;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
right: 0;
padding-right: 0;
}
which makes it look like this:
But when the keyboard pops everything shifts and a grey area appears below:
The height of that grey area is the height of the statusbar and the height of the Debug Console together (without the Debug Console is just the height of the statusbar).
Why does it insert this grey area and how can I avoid it?
#message-input:focus {
margin-bottom: -XXXpx;
}
Where XXX = height of problem grey area. Could be a quick fix for it...