CODEWITHSUNDEEP
drop-down-menugridsasszurb-foundationmixins
MattCamp
MattCamp

Reputation: 250

Add custom arrow to Zurb-Foundation drop-down buttons

I created a button using Zurb Foundation styles and Sass mixins. I used @include dropdown-button($base-style:false); to get rid of the default arrow style. Now I want to insert my own arrow in its place (right side)

Here is the default button:

default

Here is my button now:

current

I want mine to look something like this:

final

Here is my html:

<a class="login width-limit" href="#" data-dropdown="drop">Client_Test_1 </a><br>
      <ul id="drop" data-dropdown-content class="f-dropdown">
        <li><a href="#">Logout</a></li>
        <li><a href="#">Account Settings</a></li>
        <li><a href="#">Change SMTP Settings</a></li>
      </ul>

Here is my scss:

.login {
  @include grid-column(2);
  @include button();
  @include dropdown-button($base-style:false);
  font-family: $font-stack;
  font-size: .9em;
  color: #fff;
  background-color: $secondary-color;
  height: 27px;
  border-radius: 7px;
  margin: 6px 0 5px 0;
  padding: 5px 4px 5px 4px;
}
.width-limit {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  display: inline-block;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2em; //shrink text 
}
.login:hover {
  background-color: $primary-color;
}

Here is a fiddle: http://jsfiddle.net/Yq5uU/

How can I add my own custom arrow to make it look like the third example? Thanks in advance.

Upvotes: 1

Views: 1672

Answers (2)

JAre
JAre

Reputation: 4756

You can't make it infinitely long and not break page layout. So simple solution will be deciding how long it can get and setting button container to fill maximum amount of columns before it starts to look wired. Then you can align your button inside the container as you wish and if it gets too long you can replace part of the name with "..." css:overflow:hidden; text-overflow:ellipsis; or show the short form with js.

example: http://jsfiddle.net/z8aWL/2/

Upvotes: 2

fontophilic
fontophilic

Reputation: 1085

The grid column 2 mixin gives you this: 

width: grid-calc($columns, $total-columns);

If you're using the default 12 grid, your inputs look like this:

width: grid-calc(2, 12);

The calc function returns the percentage of 2 divided by 12

width: 16.67%;

You are then overwriting that width value with 150px. If you're using default grid values for large rows, that should be closer to 167px wide.

You should avoid setting hard px values if you want to keep this responsive.

Now as for long names, you have two basic options. Either truncate names, by hiding overflow (as JAre suggested) or let crazy long names break your grid, but be contained in the button. Then you would need to not set a width. All the grid col mixin does is give you a width percentage. The row sets the value of the width (of which the col is a percentage). Your button is still contained in a row, so you should be good to go.

I think your best option, if you have access to your username database is to find the "worst case scenario" and design for that. Or better yet, have a shortened name value returned to your design in the first place.

Upvotes: 1

Related Questions