bulma icon indicating copy to clipboard operation
bulma copied to clipboard

v1 how to reproduce fixed column height without tiles?

Open peterlondon1 opened this issue 11 months ago • 6 comments

This is about **Bulma

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version 1.0.0 I am sure this issue is not a duplicate

Description

I used Tiles (no longer available) to create column of a fixed height: Screenshot 2024-03-22 at 07 16 45

How can this be done with v1?

peterlondon1 avatar Mar 22 '24 07:03 peterlondon1

@peterlondon1 see https://bulma.io/documentation/start/migrating-to-v1/#breaking-changes for how to convert it

madwire avatar Mar 22 '24 09:03 madwire

thanks @madwire, I saw that, but that conversion doesn't keep the fixed height effect that the tiles provided:

Screenshot 2024-03-22 at 10 08 18

peterlondon1 avatar Mar 22 '24 10:03 peterlondon1

I'm having the same problem now with v1.0.0. There's a way to achieve it, which would be:

<div class="fixed-grid has-4-cols">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell is-row-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>

As they show at https://bulma.io/documentation/grid/grid-cells/ , but so far I wasn't able to actually recreate my exact layout I had before.

almudawwar avatar Mar 22 '24 17:03 almudawwar

Have you tried the is-row-from-end-1 helper class?

jgthms avatar Mar 22 '24 20:03 jgthms

thanks @madwire, I saw that, but that conversion doesn't keep the fixed height effect that the tiles provided:

Screenshot 2024-03-22 at 10 08 18

.cell {
  display: grid;
  height: 100%;
}

I'm having the same problem and I've fixed it with the style above, but I've not test the code in some other place. will this fix yours?

kaffa avatar Mar 25 '24 09:03 kaffa