CODEWITHSUNDEEP
htmlcssbulma
Abdall
Abdall

Reputation: 455

Bulma - Button Class forcing Inline

I am new to bulma but have been trying to make a simple webpage with it.

I have run into a frustrating problem where I believe one of the classes "button is-large" is forcing elements on my page to be inline.

Here is a minimal code demonstration of what is happening:

  <div class="column" style="height: 200px">
    <a class="button is-fullwidth" style="height: 100%">
       <p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
       <p class="title">Print Release</p>
    </a>
  </div>

The elements in the above code will show up inline.

I want the elements inside of the "a tag" to stack on top of one another. When the "a tag" has the class "button is-fullwidth" it forces the two elements to be inline; whereas if this class is removed they will end up on top of one another no issues.

Here is a full jfiddle demonstrating different approaches I have taken to resolve my issue. I have tried three different ways to make these elements appear on new lines but to no avail.

Is this just an inherent property of the "button ..." class? Can I keep the button class while also maintaining new lines?

Upvotes: 1

Views: 4765

Answers (2)

sol
sol

Reputation: 22949

The class button is styled using flexbox. The property display: flex makes its contents appear 'inline'. You can learn more about flexbox here and here.

There are several ways to get the layout you want, here is one approach:

  1. Add the .is-block modifier to a.button - This will override the display property, and ensure that block elements will stack. In your example, p is a block element, and img is an inline element. (Alternatively, you could correct this in CSS by adding flex-direction: column to your button.)

  2. Instead of adjusting the height of .column using inline CSS, you could create a new modifier class that can be added to columns when you need a fixed height. I have added is-fixed-height and height-200 to the .column and used some custom CSS to define these.

  3. Bulma gives .button a height of 2.25em. You need to override this with 100%. Again, you could create a modifier class and add it to the button (something like is-height-100), or simply target the button you want with CSS. Both options are preferable than using inline CSS.

  4. The images you are using are too big to allow the text to fit in below the button. Instead of using height: 200px on the column, use min-height. If you must use a height of 200px, you will need to make some adjustments to the image. Let me know and I can try help.

fiddle

.is-fixed-height.height-200 {
  min-height: 200px;
}

.is-fixed-height.height-200 .button {
  height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet"/>
<div class="container">
  <div class="block">
    <div class="columns">
      <div class="column is-fixed-height height-200">
        <a class="button is-block is-fullwidth">
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
          <p class="title">Print Release</p>
        </a>
      </div>
      <div class="column is-fixed-height height-200">
        <a class="button is-block is-fullwidth">
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
          <p class="title">Print Release</p>
        </a>
      </div>
      <div class="column is-fixed-height height-200">
        <a class="button is-block  is-fullwidth">
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
          <p class="title">Print Release</p>
        </a>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Hassan Sani
Hassan Sani

Reputation: 124

You gave the anchor a class of button and full-width

The class button always place content inline

HTML

<a class="btn is-fullwidth" style="height: 100%">
   <p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
   <p class="title">Print Release</p>
</a>

CSS

.btn {
text-align: center;
}

I have changed the button class with custom class name btn then I gave it a center align with CSS

Upvotes: 0

Related Questions