Menu icon Foundation

Developer | Carver, MA

I'm a programmer/developer/statistician. I develop monte carlo simulation models and high-end algorithms for sports probability.

My Posts



  • NEW
  • Nested Dropdown Button

    By Joel Dezenzio

    nesteddropdownbutton

    I'm trying to make a nested dropdown button in my rails application. This is not a topbar. I've attempted two scenarios. Scenario One The first is a dropdown menu that looks like so: --> Main button -->--> Next Menu -->-->--> Next Menu ... (continued)


My Comments

Joel Dezenzio commented on i nyoman gurnitha's post over 5 years

No installation issues for me here.
Most of the issues I thought were issues weren't issues.

If anything the only opinions I can offer on this are:

Documentation still needs some work
Missing features like nested dropdown buttons and links (not topbar)

Joel Dezenzio commented on Joel Dezenzio's post over 5 years

<div class="medium-8 medium-pull-2 columns">

This works.

Small by default goes to 12 columns. (thanks Brandon Arnold)
Medium is set to 8 columns within a 12 column grid
... because it's the last child it will automatically float right
... because it's the last child I pull 50% of the difference (12 - 8 = 4) so 4 * 0.50 = 2 to center it
Large inherits medium and doesn't need to be changed. (thanks Brandon Arnold)

That's the short and sweet answer. I marked Brandon's post as helpful because there were 2 things he taught me which really shortened the code. However medium-centered will not work on the last child in a row if the grid is less than 12 due to automatic float right condition.

I wish the folks here would put a test scenario up like the one I showed above which handles multiple questions at once.

Joel Dezenzio commented on Gavin Thomas's post over 5 years
Joel Dezenzio commented on Rafi Benkual's post over 5 years

  button.small, .button.small {
    padding-top: 0.875rem;
    padding-right: 1.75rem;
    padding-bottom: 0.9375rem;
    padding-left: 1.75rem;
    font-size: 0.8125rem;
}

 .top-bar .button {
    padding-top: .45rem;
    padding-bottom: .35rem;
    margin-bottom: 0;
    font-size: 0.75rem; }

Good File

.top-bar .button loads at line 3915
button.small, .small.button loads at 1600

Bad File

.top-bar .button loads at line 1168
button.small, .small.button loads at 1653

So the issue is order of precedence and the eager loading of CSS. Because of the order, the .top-bar .button is having it's top and bottom padding cancelled by button.small which makes the button too large on the bad page. See below.

Good File

button.small, .button.small {
  /* All Striked */
}

 .top-bar .button {
    padding-top: .45rem;
    padding-bottom: .35rem;
    margin-bottom: 0;
}

Bad File

  button.small, .button.small {
    padding-top: 0.875rem;
    padding-bottom: 0.9375rem;
}

 .top-bar .button {
    margin-bottom: 0;
}

Joel Dezenzio commented on dcsan's post over 5 years

If you are purely going to create a mobile site, I'd recommend using jQuery Mobile.

http://jquerymobile.com/

It's a very good mobile only framework.

Joel Dezenzio commented on Joel Dezenzio's post over 5 years

 <div class="row">
  <div class="small-12 small-centered medium-10 large-8 columns">
    <div class="top-spacer">
      <div class="ncaa-panel bordered centered">
        <h4 class="centered white-font">Edit NCAA Conf Record</h4>
        <div class="ncaa-forms-panel bordered">
          <div class="row">


            <%= render 'form' %>

            <!-- THIS DIV BELOW IS THE ONE THAT I'M WORKING WITH -->
            <div class="small-12 small-centered medium-8 medium-offset-2 large-8 large-offset-2 columns end">
              <ul class="button-group even-2">
                <li><%= link_to "Show", @ncaa_conference_record, class: "show-ncaa-button" %></li>
                <li><%= link_to "Back", ncaa_conference_records_path, class: "back-ncaa-button" %></li>
              </ul>
            </div>


          </div><!-- end of row -->
        </div><!-- end of forms panel -->
      </div><!-- end of main panel -->
    </div><!-- end of top spacer -->
  </div><!-- end of large columns -->
</div><!-- end of row -->

Here is an example code of what works.

The last div which is a 2 button group, I wanted it to be a centered button group on the page. Because I'm opting for 8-columns for medium and large, I had to offset-2 so that the div containing the button group would center on the page. In a 12-column grid below, X marks the spot.

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | 11 | 12 |
| 1 | 2 | x | x | x | x | x | x | x | x | 11 | 12 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | 11 | 12 |

On the first reply from Brandon, what I'm reading is that I could opt to do:

class="medium-8 medium-offset-2 large-8 large-offset-2 columns end"

Because small is automatically set to small-12 by default (I did not know this). However, medium-centered will not work because it's the last child and by default, the last child floats right in foundation.

From their grid page (incomplete rows):

"In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of end in order to override that behavior."

So if I don't place "end" in the class statement then the 8 columns float to the right.

| 1 | 2 | 3 | 4 | X | X | X | X | X | X | X | X |

If I put the "end" in the class statement then the 8 columns float to the left.

| X | X | X | X | X | X | X | X | 9 | 10 | 11 | 12

And, if I put end and then the offset-2 in place it works properly:

| 1 | 2 | X | X | X | X | X | X | X | X | 11 | 12

This behavior is what I'm trying to work around. I hope that helps.

Joel Dezenzio commented on De Kunstzee's post over 5 years

In foundation.scss add:

@import 'foundation/settings';

The @import directive applies to partials "_somefile.scss".

In my setup for instance I pulled out small features like colors.

So I have:

foundation.scss
foundation
-- _colors.scss
-- _settings.scss
-- _functions.scss

In _settings.scss I have

@import 'colors';

Then make your changes in settings and everything should work fine.

Joel Dezenzio commented on iamjiu's post over 5 years

The row is simply creating a horizontal block (think of it as a hollow box or container) where you can start adding your grid elements/columns. However, you can style that horizontal block. For instance, below is an example of making that box look like a panel and I added my own custom class to make the borders round.

div class="row panel bordered"

If you want to use the grid, which was built for responsive design, you need to include the columns in the class.

The best advice that I can give is to always design for small devices, then medium devices, and then large devices.

Example:

div class="small-4 small-centered medium-10 large-12 columns"

This basically states that I want 4 columns on small devices, 10 columns on medium devices, and 12 columns (normal sized page view) on large devices. Because I placed the small-centered class in there I'm telling foundation to center on small devices. I didn't use any declaration on medium or large so they will inherit from small automatically.

I could do:

div class="small-4 small-centered medium-10 medium-centered large-12 columns large-uncentered"

In this example, I'm saying go ahead and center my columns on small (iphone) and medium (ipad) devices, but for regular browsers, don't center anything at all.

As for your very first question, if you don't want to use the grid and want to center to the div by itself you would use the following CSS:

width: 300px;
margin: 0 auto;

But, you could easily use the grid and decide how many columns you want to use and center accordingly. I hope that helps.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on i nyoman gurnitha's post over 5 years

No installation issues for me here.
Most of the issues I thought were issues weren't issues.

If anything the only opinions I can offer on this are:

Documentation still needs some work
Missing features like nested dropdown buttons and links (not topbar)

You commented on Joel Dezenzio's post over 5 years

<div class="medium-8 medium-pull-2 columns">

This works.

Small by default goes to 12 columns. (thanks Brandon Arnold)
Medium is set to 8 columns within a 12 column grid
... because it's the last child it will automatically float right
... because it's the last child I pull 50% of the difference (12 - 8 = 4) so 4 * 0.50 = 2 to center it
Large inherits medium and doesn't need to be changed. (thanks Brandon Arnold)

That's the short and sweet answer. I marked Brandon's post as helpful because there were 2 things he taught me which really shortened the code. However medium-centered will not work on the last child in a row if the grid is less than 12 due to automatic float right condition.

I wish the folks here would put a test scenario up like the one I showed above which handles multiple questions at once.

You commented on Gavin Thomas's post over 5 years
You commented on Rafi Benkual's post over 5 years

  button.small, .button.small {
    padding-top: 0.875rem;
    padding-right: 1.75rem;
    padding-bottom: 0.9375rem;
    padding-left: 1.75rem;
    font-size: 0.8125rem;
}

 .top-bar .button {
    padding-top: .45rem;
    padding-bottom: .35rem;
    margin-bottom: 0;
    font-size: 0.75rem; }

Good File

.top-bar .button loads at line 3915
button.small, .small.button loads at 1600

Bad File

.top-bar .button loads at line 1168
button.small, .small.button loads at 1653

So the issue is order of precedence and the eager loading of CSS. Because of the order, the .top-bar .button is having it's top and bottom padding cancelled by button.small which makes the button too large on the bad page. See below.

Good File

button.small, .button.small {
  /* All Striked */
}

 .top-bar .button {
    padding-top: .45rem;
    padding-bottom: .35rem;
    margin-bottom: 0;
}

Bad File

  button.small, .button.small {
    padding-top: 0.875rem;
    padding-bottom: 0.9375rem;
}

 .top-bar .button {
    margin-bottom: 0;
}

You commented on dcsan's post over 5 years

If you are purely going to create a mobile site, I'd recommend using jQuery Mobile.

http://jquerymobile.com/

It's a very good mobile only framework.

You commented on Joel Dezenzio's post over 5 years

 <div class="row">
  <div class="small-12 small-centered medium-10 large-8 columns">
    <div class="top-spacer">
      <div class="ncaa-panel bordered centered">
        <h4 class="centered white-font">Edit NCAA Conf Record</h4>
        <div class="ncaa-forms-panel bordered">
          <div class="row">


            <%= render 'form' %>

            <!-- THIS DIV BELOW IS THE ONE THAT I'M WORKING WITH -->
            <div class="small-12 small-centered medium-8 medium-offset-2 large-8 large-offset-2 columns end">
              <ul class="button-group even-2">
                <li><%= link_to "Show", @ncaa_conference_record, class: "show-ncaa-button" %></li>
                <li><%= link_to "Back", ncaa_conference_records_path, class: "back-ncaa-button" %></li>
              </ul>
            </div>


          </div><!-- end of row -->
        </div><!-- end of forms panel -->
      </div><!-- end of main panel -->
    </div><!-- end of top spacer -->
  </div><!-- end of large columns -->
</div><!-- end of row -->

Here is an example code of what works.

The last div which is a 2 button group, I wanted it to be a centered button group on the page. Because I'm opting for 8-columns for medium and large, I had to offset-2 so that the div containing the button group would center on the page. In a 12-column grid below, X marks the spot.

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | 11 | 12 |
| 1 | 2 | x | x | x | x | x | x | x | x | 11 | 12 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | 11 | 12 |

On the first reply from Brandon, what I'm reading is that I could opt to do:

class="medium-8 medium-offset-2 large-8 large-offset-2 columns end"

Because small is automatically set to small-12 by default (I did not know this). However, medium-centered will not work because it's the last child and by default, the last child floats right in foundation.

From their grid page (incomplete rows):

"In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of end in order to override that behavior."

So if I don't place "end" in the class statement then the 8 columns float to the right.

| 1 | 2 | 3 | 4 | X | X | X | X | X | X | X | X |

If I put the "end" in the class statement then the 8 columns float to the left.

| X | X | X | X | X | X | X | X | 9 | 10 | 11 | 12

And, if I put end and then the offset-2 in place it works properly:

| 1 | 2 | X | X | X | X | X | X | X | X | 11 | 12

This behavior is what I'm trying to work around. I hope that helps.

You commented on De Kunstzee's post over 5 years

In foundation.scss add:

@import 'foundation/settings';

The @import directive applies to partials "_somefile.scss".

In my setup for instance I pulled out small features like colors.

So I have:

foundation.scss
foundation
-- _colors.scss
-- _settings.scss
-- _functions.scss

In _settings.scss I have

@import 'colors';

Then make your changes in settings and everything should work fine.

You commented on iamjiu's post over 5 years

The row is simply creating a horizontal block (think of it as a hollow box or container) where you can start adding your grid elements/columns. However, you can style that horizontal block. For instance, below is an example of making that box look like a panel and I added my own custom class to make the borders round.

div class="row panel bordered"

If you want to use the grid, which was built for responsive design, you need to include the columns in the class.

The best advice that I can give is to always design for small devices, then medium devices, and then large devices.

Example:

div class="small-4 small-centered medium-10 large-12 columns"

This basically states that I want 4 columns on small devices, 10 columns on medium devices, and 12 columns (normal sized page view) on large devices. Because I placed the small-centered class in there I'm telling foundation to center on small devices. I didn't use any declaration on medium or large so they will inherit from small automatically.

I could do:

div class="small-4 small-centered medium-10 medium-centered large-12 columns large-uncentered"

In this example, I'm saying go ahead and center my columns on small (iphone) and medium (ipad) devices, but for regular browsers, don't center anything at all.

As for your very first question, if you don't want to use the grid and want to center to the div by itself you would use the following CSS:

width: 300px;
margin: 0 auto;

But, you could easily use the grid and decide how many columns you want to use and center accordingly. I hope that helps.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content