Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

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

  • 2 replies
  • 1 has this problem
  • 3 views
  • Last reply by 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).
Attached screenshots

All Replies (2)

TyDraniu
TyDraniu
  • Top 10 Contributor
more options

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

Thanks

mcoulont
mcoulont Question owner
more options

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