1 reply [Last post]
Zlotz
Zlotz's picture
Offline
newbie
Last seen: 3 years 11 weeks ago
Timezone: GMT+1
Joined: 2019-12-24
Posts: 1
Points: 2

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 :

https://i.stack.imgur.com/qrzCu.png

This problem arises on Firefox (but not on Chrome neither on Opera).

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 4 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Welcome to CSSC

Where can we see the actual working code?

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.