Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More columns in grid than expected when using col-span #3832

Open
dseebacher opened this issue May 28, 2024 · 0 comments
Open

More columns in grid than expected when using col-span #3832

dseebacher opened this issue May 28, 2024 · 0 comments

Comments

@dseebacher
Copy link

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [1.0.1]
My browser is: Firefox, Chrome

Description

I'm not sure if this is expected behavior or a bug:

I got a fixed grid with more than 1 column, but would like to restrict it to just 1 column on mobile. While this works out fine, it seems to collide with a potential is-col-span-*, where the span wins.
In my opinion the column definition should overrule the span definition, especially as I have no option to redefine the span on mobile.

Steps to Reproduce

The example in the description

<div class="fixed-grid has-1-cols has-2-cols-tabled">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell is-col-span-2">Cell 2</div>
    <div class="cell">Cell 3</div>
    <div class="cell">Cell 4</div>
    <div class="cell">Cell 5</div>
    <div class="cell">Cell 6</div>
  </div>
</div>

A simplified example:

<div class="fixed-grid has-1-cols">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell is-col-span-2">Cell 2</div>
  </div>
</div>

Expected behavior

If I use has-1-cols on a fixed grid, it should only display 1 column, regardless of cell configuration.

(has-1-cols overrules is-col-span-2)

Actual behavior

By using has-col-span-2 I force a 2 column grid, ignoring the actual fixed-grid configuration.

( is-col-span-2 overrules has-1-cols)

Suggestion

I fix it by overriding the grid-column-end value like this (not sure if there are any side effects):

grid-column-end: span min(var(--bulma-grid-column-count), var(--bulma-grid-cell-column-span));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant