Menu icon Foundation

Coder

My Posts

  • 9
    Replies
  • Even-width Group not working

    By RCD

    expanded

    Button expand does not seem to work. The last button drops to the next line, rather then fill the space. Is this an internal bug bc even the example on the zurb site does the same http://foundation.zurb.com/sites/docs/button-group.html I tried putting ... (continued)

    Last Reply by Tõnis Terasmaa about 3 years ago


My Comments

RCD commented on RCD's post over 3 years

Thanks, so this is a known issue?
I am using Foundation 6 Zurb Template. I have not made any changes to the Foundation Template and I have the latest version of Chrome.

RCD commented on RCD's post over 3 years

By taking the decimals off the percentage in the dev tools the boxes will stay inline. 
I am not sure what would be causing it to mis-calculate the percentage or where I can adjust it.

RCD commented on RCD's post over 3 years

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!!!

RCD commented on RCD's post over 3 years

Thanks yeoman, good to know I am not the only one with the issue.
I will try that as I need to be able to work offline as well.
Thanks!

RCD commented on RCD's post over 3 years

Thanks Rafi, Ill give that a try.
Cheers

RCD commented on RCD's post over 3 years

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

RCD commented on RCD's post over 3 years

Hey yeoman,
 
No it is basically a fresh install, I didn't make any changes other than the .html file. I did a fresh install that works at home (with internet connection) and then tried to run it on the road (no internet connection) and then it gives the above message. The internet connection is the only thing different that I can see. ???

RCD commented on RCD's post over 3 years

I added it to your codepen and it works fine there. Any idea what would be causing the last one to be dropping to the next line and on the left?

RCD commented on RCD's post over 3 years

Thank you Rafi. I am using Foundation 6 Sites sass installed with CLI. Not sure why it is not working as exaple.
<div class="row">
<div class="medium expanded button-group">
<a href="#general" class="button">Gen</a>
<a href="#nomenclature" class="button">Nom</a>
<a href="#technical" class="button">Tech Specs</a>
<a href="#inventory" class="button">Inventory & Storage</a>
<a href="#inspection" class="button">Inspection</a>
<a href="#disposal" class="button">Disposal</a>
</div>
</div>
This is my code.

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on RCD's post over 3 years

Thanks, so this is a known issue?
I am using Foundation 6 Zurb Template. I have not made any changes to the Foundation Template and I have the latest version of Chrome.

You commented on RCD's post over 3 years

By taking the decimals off the percentage in the dev tools the boxes will stay inline. 
I am not sure what would be causing it to mis-calculate the percentage or where I can adjust it.

You commented on RCD's post over 3 years

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!!!

You commented on RCD's post over 3 years

Thanks yeoman, good to know I am not the only one with the issue.
I will try that as I need to be able to work offline as well.
Thanks!

You commented on RCD's post over 3 years

Thanks Rafi, Ill give that a try.
Cheers

You commented on RCD's post over 3 years

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

You commented on RCD's post over 3 years

Hey yeoman,
 
No it is basically a fresh install, I didn't make any changes other than the .html file. I did a fresh install that works at home (with internet connection) and then tried to run it on the road (no internet connection) and then it gives the above message. The internet connection is the only thing different that I can see. ???

You commented on RCD's post over 3 years

I added it to your codepen and it works fine there. Any idea what would be causing the last one to be dropping to the next line and on the left?

You commented on RCD's post over 3 years

Thank you Rafi. I am using Foundation 6 Sites sass installed with CLI. Not sure why it is not working as exaple.
<div class="row">
<div class="medium expanded button-group">
<a href="#general" class="button">Gen</a>
<a href="#nomenclature" class="button">Nom</a>
<a href="#technical" class="button">Tech Specs</a>
<a href="#inventory" class="button">Inventory & Storage</a>
<a href="#inspection" class="button">Inspection</a>
<a href="#disposal" class="button">Disposal</a>
</div>
</div>
This is my code.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content