Menu icon Foundation
Same Button Height

I would like to have a area of buttons that are the same height with the text centered.

 

 

http://codepen.io/rcdonaldson/pen/BKMqVy

 

Problem 1. The buttons have different heights causing the columns to not line up

Problem 2. I used equalizer.js to make all the buttons the same height but then I get the problem of the single lines of text not centering in the button.

Is there a simple way to do this?

 

Thank you

 

button height

I would like to have a area of buttons that are the same height with the text centered.

 

 

http://codepen.io/rcdonaldson/pen/BKMqVy

 

Problem 1. The buttons have different heights causing the columns to not line up

Problem 2. I used equalizer.js to make all the buttons the same height but then I get the problem of the single lines of text not centering in the button.

Is there a simple way to do this?

 

Thank you

 

Rafi Benkual over 3 years ago

Hi Ryan - Would you realistically have this much text in a button? What is the design or design problem you are trying to solve?

I'd say equalizer is a heavy handed approach for this and other than setting a min-height and adjusting the line height by hand, not seeing a great automatic way to do this.

RCD over 3 years ago

Thanks Rafi,

 

Yes, technically I only need a link to another page/document. Some link/button titles will be long bc its technical information, some short too.

 

I would like to use the built in styles that come with the buttons, and modify that, as well as for accessibility. I need something that is responsive and can be used across the entire project. 

 

The codepen may illustrate it more clearly.  There is probably a more simple and elegant solution so your thoughts are appreciated!

http://codepen.io/rcdonaldson/pen/BKMqVy?editors=1010

 

Thank you

Rafi Benkual over 3 years ago

You can create custom buttons with flexbox like this: http://codepen.io/rafibomb/pen/dMrxqN?editors=1100

RCD over 3 years ago

Thanks Rafi, Ill give that a try.

Cheers

RCD over 3 years ago

In your example, all the columns and rows in the entire document would become flex, right?

How would I make just that section of buttons function like that? .row, .columns, and flex-button are global Foundation classes. How could I create a custom class or similar solution?

 

Also, in your example, with the addition of icons at the top, I can no long get the buttons to flex their size to match each other. Like in these examples: http://codepen.io/rcdonaldson/pen/yOWyPx?editors=1100 or http://codepen.io/rcdonaldson/pen/LNvxxX?editors=1100

 

Thank you Rafi!!!