Bulma: Horizontal form has no way to keep horizontal on mobile

Created on 9 Apr 2017 · 8Comments · Source: jgthms/bulma

Overview of the problem

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

Description

It's not possible to keep label and field side-by-side on mobile devices, like it's possible to force columns by using is-mobile.

Steps to Reproduce

Create an horizontal form using .field.is-horizontal.is-mobile

Expected behavior

See it rendering horizontally both on desktop and mobile widths

Actual behavior

It renders horizontally on desktop and vertically on mobile, differently from the .column behavior.

Source

igorsantos07

👍4

Most helpful comment

I think I ended up writing my styles by hand :/

igorsantos07 on 25 Jun 2017

👍4

All 8 comments

It's not as simple as adding one class to .field because .field-label and .field-body need styling too.

jgthms on 12 Apr 2017

Is this issue being dealt with at all? If someone can refer me to the solution, that would be great.

himanish-k on 25 Jun 2017

@igorsantos07 Were you able to find a temporary solution to this problem?

himanish-k on 25 Jun 2017

I think I ended up writing my styles by hand :/

igorsantos07 on 25 Jun 2017

👍4

@igorsantos07 @himanish-k i was able to solve this by adding display: flex to the field-body, and margin-right: 0.75rem on each .field afterwards except the last one.

example with pug+tailwind

.field.is-horizontal.flex
  .field-body.flex
    .field.mr-3

@jgthms what about adding a class like .is-mobile to .field and have these work the way you did for the level component?

acidjazz on 21 Jan 2019

Funny to google the problem and fall in my own issue, more than two years later.

The flex tip from @acidjazz doesn't really work that easily, the form lines get irregular. I'm using this for a Chrome extension popup so it definitely would make sense to be able to force the horizontal form in the small popup.

igorsantos07 on 3 Oct 2019

😄3 😕1

Bulma claims that it is a responsive framework but for sure the team of development is not. I am not a freeloader of github to use free libraries but when a framework passes 40k stars then basic communication with developer community is a must and a mutual respect. Hey Bulma please at least listen to feedbacks. I think this is the first time I am writing in the github such a comment.

Funny to google the problem and fall in my own issue, more than two years later.

The flex tip from @acidjazz doesn't really work that easily, the form lines get irregular. I'm using this for a Chrome extension popup so it definitely would make sense to be able to force the horizontal form in the small popup.

nadernt on 24 Jul 2020

👍1

The source scss looks to be this - you'll see there is a section which does the modifications for screen width at tablet size and up.

.field-body {
  .field .field {
    margin-bottom: 0; }
  @include tablet {
    display: flex;
    flex-basis: 0;
    flex-grow: 5;
    flex-shrink: 1;
    .field {
      margin-bottom: 0; }
    & > .field {
      flex-shrink: 1;
      &:not(.is-narrow) {
        flex-grow: 1; }
      &:not(:last-child) {
        margin-right: 0.75rem; } } } }

In sass you could write this to make it so you can add the is-mobile class name to the field-body - it's a bit hacky but it'll do.

.field-body.is-mobile
  display: flex
  flex-basis: 0
  flex-grow: 5
  flex-shrink: 1
  .field
    margin-bottom: 0
  & > .field
    flex-shrink: 1
    &:not(.is-narrow)
      flex-grow: 1
    &:not(:last-child)
      margin-right: 0.75rem

Admittedly, this would be nice to have built into Bulma if the maintainers consider this to be useful and not just bloating the styles. I hope this answer will help some people out though.