Menu icon Foundation

My Posts

  • 3
    Replies
  • Change Dropdown border style

    By Danny

    dropdown

    Hi, I'm using Dropdowns (http://foundation.zurb.com/docs/components/dropdown.html) and everything works great, except I am not able to style the default border (in particular I want to remove the inset effect) I have been trying to change the follow... (continued)

    Last Reply by Rafi Benkual over 4 years ago


  • 5
    Replies
  • Foundation Text Grid

    By Danny

    Text Grid

    Hi, I'm trying to create a grid with text, not images, similar to the 'content section' in the Zurb template: http://foundation.zurb.com/templates/orbit.html I would like to create three blocks of text on each row. I am able to create this, but ... (continued)

    Last Reply by Mayweather over 4 years ago


  • 1
    Reply
  • Change TopBar Settings

    By Danny

    topbar

    Hi, I've been trying to override the topbar navigation settings, but I have not succeeded. I've managed to change the background color to white in the foundation_and_overrides.scss file by changing the following line: $topbar-bg-color: #ffffff; ... (continued)

    Last Reply by Rafi Benkual over 4 years ago





My Comments

Danny commented on Danny's post over 4 years

Thanks Harmony. I managed to figure this out a few months ago, but forgot to write up the answer here. Thanks for adding the solution.

Danny commented on Danny's post over 4 years

Rafi,

Thanks. I restarted everything and now it works as expected. Thanks for testing.

On a related note, the dropdown works (and looks) great, but I'm having issues with getting it to work on iOS. The text, 'Filter' appears, but there is no dropdown. Any particular reason why it might work on a macbook, but not on iphone?

I've included //= require foundation/foundation.dropdown in my application.js file.

Here's my code:

<div class="row">
  <div class="small-12 large-10 large-centered columns">
    <div class="search">
      <%= form_tag path, method: :get do %>
        <%= text_field_tag :query, params[:query],
        placeholder: "Search...",
        id: "search-bar" %>
      <% end %>
    </div>
  </div>

  <div class="small-12 large-10 large-centered columns">
    <div class="filter-section">
      <a data-dropdown="dropdown" aria-controls="dropdown" aria-expanded="false" id="filter-text">
        Filter</a>
      <ul id="dropdown" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
        <li><%= link_to 'All', path %></li>
        <li><%= link_to 'Link1', path %></li>
        <li><%= link_to 'Link2', path %></li>
        <li><%= link_to 'Link3', path %></li>
        <li><%= link_to 'Link4', path %></li>
        <li><%= link_to 'Link5', path %></li>
      </ul>
    </div>
  </div>
</div> 

I managed to figure out what's wrong. I needed to include href="#" in the dropdown code. Perhaps it would be helpful if you included a note in the dropdown docs in the 'Basic' example about this addition.

Thanks.

Danny commented on Danny's post over 4 years

Carol, Rafi,

Thank you both for your help.

I've tried both your suggestions, but unfortunately it does not resolve the issue.

As I don't know what product will have what information, I cannot decide what content gets pushed/pulled.

Both your suggestions generate similar HTML:

   <div class="row">
    <div class="small-12 medium-4 columns"><P></P></div>
    <div class="small-12 medium-4 medium-push-4 columns"><P>
    <div class="profile-heading">Category</div>
    <div class="profile-value">
      Agriculture
    </div>
    </P></div>
    <div class="small-12 medium-4 medium-pull-4 columns"><P>
    <div class="profile-heading">Ingredients</div>
    <div class="profile-value">
      Food
    </div>
    </P></div>
  </div>

  <div class="push"></div>

The issue is the first empty column. I've tried using javascript to get rid of the empty column, but no luck.

 <script>$('li, p, 'div')
  .filter(function() {
    return $.trim($(this).text()) === '' && $(this).children().length == 0
  })
  .remove();
</script>

Any suggestions? Greatly appreciate your help.

Danny commented on Danny's post about 5 years

Thanks Rafi. Have a good weekend.

Danny commented on Danny's post about 5 years

Rafi,

Thanks for helping out. What I don't understand is that if I view my app on an iPad in portrait or landscape mode, it looks exactly the same. Whereas on the iPhone, the text increases greatly in landscape mode. I've tried to set the px value in my CSS file and target the divs directly, but no change.

Does this have something to do with media queries? Why the difference between iPhone and iPad? Thanks.

Danny commented on Danny's post about 5 years

Just to give more info, here's my code:

 <% @Products.each do |product| %>
<div class="row">
   <div class="small-12 columns">
     <%= link_to product.name, product_path(product) %>
   </div>
</div>
<div class="row">
  <div class="small-12 medium-9 large-7 columns end">
    <%= product.description %>
 </div>
 </div>
<div class="row">
    <div class="small-12 columns">
      <ul class="inline-list">
        <li>
          <%= product.location %>
        </li>
        <li>
          <%= product.type%>
        </li>
      </ul>
    </div>
</div>
<% end %>

I can get the sizing to be correct in portrait and landscape mode if I change the columns to small-8 columns which seems strange.

Any help would be greatly appreciated.

Danny commented on Danny's post about 5 years

Rafi,

No. The social icons are just part of a list.

Sorry about the confusion. I've created a codepen for you: http://codepen.io/danny123/pen/BjGHp

Please minimize your screen to 'small' and have a look in the topbar menu icon and you'll see what I mean (I hope).

Thanks.

Danny commented on Danny's post about 5 years

Hi Rafi,

Thanks for your kind reply.

I'm not sure why my image is not showing. I've uploaded a new image. Your code works fine with a dropdown button, but when I apply your code to the Top Bar , that's when there's an issue.

The icons are next to each other as I want, but they do not line up against the other list elements and when you hover over the icon, only part of the icon is 'active'. I've tried to highlight this in the image with the red arrow top.

Using your code example, 'Yet another' is not aligned properly under 'This is another' – slightly to the right – and when you hover over 'Yet another' only the 'Yet' part is 'active'. (In your example everything is right, but this is what happens when I use your code for the Top Bar).

Does that make sense? Thanks for helping out.

Posts Followed

No Content

Following

    No Content

Followers

My Posts




My Comments

You commented on Danny's post over 4 years

Thanks Harmony. I managed to figure this out a few months ago, but forgot to write up the answer here. Thanks for adding the solution.

You commented on Danny's post over 4 years

Rafi,

Thanks. I restarted everything and now it works as expected. Thanks for testing.

On a related note, the dropdown works (and looks) great, but I'm having issues with getting it to work on iOS. The text, 'Filter' appears, but there is no dropdown. Any particular reason why it might work on a macbook, but not on iphone?

I've included //= require foundation/foundation.dropdown in my application.js file.

Here's my code:

<div class="row">
  <div class="small-12 large-10 large-centered columns">
    <div class="search">
      <%= form_tag path, method: :get do %>
        <%= text_field_tag :query, params[:query],
        placeholder: "Search...",
        id: "search-bar" %>
      <% end %>
    </div>
  </div>

  <div class="small-12 large-10 large-centered columns">
    <div class="filter-section">
      <a data-dropdown="dropdown" aria-controls="dropdown" aria-expanded="false" id="filter-text">
        Filter</a>
      <ul id="dropdown" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
        <li><%= link_to 'All', path %></li>
        <li><%= link_to 'Link1', path %></li>
        <li><%= link_to 'Link2', path %></li>
        <li><%= link_to 'Link3', path %></li>
        <li><%= link_to 'Link4', path %></li>
        <li><%= link_to 'Link5', path %></li>
      </ul>
    </div>
  </div>
</div> 

I managed to figure out what's wrong. I needed to include href="#" in the dropdown code. Perhaps it would be helpful if you included a note in the dropdown docs in the 'Basic' example about this addition.

Thanks.

You commented on Danny's post over 4 years

Carol, Rafi,

Thank you both for your help.

I've tried both your suggestions, but unfortunately it does not resolve the issue.

As I don't know what product will have what information, I cannot decide what content gets pushed/pulled.

Both your suggestions generate similar HTML:

   <div class="row">
    <div class="small-12 medium-4 columns"><P></P></div>
    <div class="small-12 medium-4 medium-push-4 columns"><P>
    <div class="profile-heading">Category</div>
    <div class="profile-value">
      Agriculture
    </div>
    </P></div>
    <div class="small-12 medium-4 medium-pull-4 columns"><P>
    <div class="profile-heading">Ingredients</div>
    <div class="profile-value">
      Food
    </div>
    </P></div>
  </div>

  <div class="push"></div>

The issue is the first empty column. I've tried using javascript to get rid of the empty column, but no luck.

 <script>$('li, p, 'div')
  .filter(function() {
    return $.trim($(this).text()) === '' && $(this).children().length == 0
  })
  .remove();
</script>

Any suggestions? Greatly appreciate your help.

You commented on Danny's post about 5 years

Thanks Rafi. Have a good weekend.

You commented on Danny's post about 5 years

Rafi,

Thanks for helping out. What I don't understand is that if I view my app on an iPad in portrait or landscape mode, it looks exactly the same. Whereas on the iPhone, the text increases greatly in landscape mode. I've tried to set the px value in my CSS file and target the divs directly, but no change.

Does this have something to do with media queries? Why the difference between iPhone and iPad? Thanks.

You commented on Danny's post about 5 years

Just to give more info, here's my code:

 <% @Products.each do |product| %>
<div class="row">
   <div class="small-12 columns">
     <%= link_to product.name, product_path(product) %>
   </div>
</div>
<div class="row">
  <div class="small-12 medium-9 large-7 columns end">
    <%= product.description %>
 </div>
 </div>
<div class="row">
    <div class="small-12 columns">
      <ul class="inline-list">
        <li>
          <%= product.location %>
        </li>
        <li>
          <%= product.type%>
        </li>
      </ul>
    </div>
</div>
<% end %>

I can get the sizing to be correct in portrait and landscape mode if I change the columns to small-8 columns which seems strange.

Any help would be greatly appreciated.

You commented on Danny's post about 5 years

Rafi,

No. The social icons are just part of a list.

Sorry about the confusion. I've created a codepen for you: http://codepen.io/danny123/pen/BjGHp

Please minimize your screen to 'small' and have a look in the topbar menu icon and you'll see what I mean (I hope).

Thanks.

You commented on Danny's post about 5 years

Hi Rafi,

Thanks for your kind reply.

I'm not sure why my image is not showing. I've uploaded a new image. Your code works fine with a dropdown button, but when I apply your code to the Top Bar , that's when there's an issue.

The icons are next to each other as I want, but they do not line up against the other list elements and when you hover over the icon, only part of the icon is 'active'. I've tried to highlight this in the image with the red arrow top.

Using your code example, 'Yet another' is not aligned properly under 'This is another' – slightly to the right – and when you hover over 'Yet another' only the 'Yet' part is 'active'. (In your example everything is right, but this is what happens when I use your code for the Top Bar).

Does that make sense? Thanks for helping out.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content