Avatar for Username

Pomoc pśepytaś

Glědajśo se wobšudy pomocy. Njenapominajomy was nigda, telefonowy numer zawołaś, SMS pósłaś abo wósobinske informacije pśeraźiś. Pšosym dajśo suspektnu aktiwitu z pomocu nastajenja „Znjewužywanje k wěsći daś“ k wěsći.

Dalšne informacije

Toś ta nitka jo se archiwěrowała. Pšosym stajśo nowe pšašanje, joli trjebaśo pomoc.

On Firefox HTML input overflows on the right in a CSS grid

  • 2 wótegronje
  • 1 ma toś ten problem
  • 3 naglědy
  • Slědne wótegrono wót mcoulont

mcoulont
mcoulont
more options

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).
Pśipowjesone fota wobrazowki

Wšykne wótegrona (2)

TyDraniu
TyDraniu
  • Top 25 Contributor
more options

Can you provide a working example of this bug on https://codepen.io?

Thanks

mcoulont
mcoulont Pšašaŕ
more options

Sure : https://codepen.io/mcoulont/pen/GRgOLmM Do you want me to clean up ?