On Firefox HTML input overflows on the right in a CSS grid
My CSS grid has the following stylesheet :
.declaration {
display: grid; margin-top: 20px; grid-column-gap: 5px;
}
The leftmost element of the grid has the following stylesheet :
<input type="text" id="etiquette" class="etiquette" title="label" style="grid-column: 1 / auto; display: initial;"> .etiquette {
grid-row: 1 / span 2; margin-left: 5px; margin-right: 10px;
}
And my etiquette element overflows on the right (see image).
This problem arises on Firefox (but not on Chrome neither on Opera).
My CSS grid has the following stylesheet :
<span id="declaration" class="declaration" style="grid-template-columns: 80px 10px 150px; grid-template-rows: 10px 10px 20px;">
.declaration {
display: grid;
margin-top: 20px;
grid-column-gap: 5px;
}
The leftmost element of the grid has the following stylesheet :
<input type="text" id="etiquette" class="etiquette" title="label" style="grid-column: 1 / auto; display: initial;">
.etiquette {
grid-row: 1 / span 2;
margin-left: 5px;
margin-right: 10px;
}
And my etiquette element overflows on the right (see image).
This problem arises on Firefox (but not on Chrome neither on Opera).
All Replies (2)
Can you provide a working example of this bug on https://codepen.io?
Thanks
Sure : https://codepen.io/mcoulont/pen/GRgOLmM Do you want me to clean up ?