Menu icon Foundation

Coder

My Posts



  • NEW
  • Dropdown Menu Stay in View Port??

    By RCD

    accordion menuview port

    I am using Foundation 6 Zurb Template. I have a basic accordion menu at the bottom of the page. When the item drop down button is clicked the drop down menu opens but stays out of view forcing the user to scroll down. http://codepen.io/rcdonaldson/pen/XK... (continued)


  • 4
    Replies
  • Open PDF on Mobile?

    By RCD

    pdf

    This is more of a HTML question in general as opposed to Foundation 6 but I am wondering if Foundation has a solution to this. I am creating a local site (offline) that has several PDF documents to open. I have links set up like this: <ul> <... (continued)

    Last Reply by aamir khan 24 days ago




  • 4
    Replies
  • Row Margin Control

    By RCD

    margin

    Where can the left/right margin be changed for the various screen sizes? Other then when the screen is beyond the page max-width, there is no margin created when using a row on any of the pages and text is being cut off on the sides. In the settings, g... (continued)

    Last Reply by RCD over 3 years ago


  • 6
    Replies
  • Foundation Watch Signal Async Completion Error

    By RCD

    error

    I got this error. I have not made any changes to this project. The only difference is that I attempted to run this offline.    [07:17:10] Requiring external module babel-register [07:18:35] Using gulpfile ~\Desktop\SMO Docs\smoProject\gulpfil... (continued)

    Last Reply by yeoman over 3 years ago


  • 5
    Replies
  • Same Button Height

    By RCD

    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 ... (continued)

    Last Reply by RCD over 3 years ago


  • 1
    Reply
  • Equal height buttons and text boxes

    By RCD

    button height

    How can I get equal height button as well as (div) text boxes regardless of the line height of the content?   I am building columns of <img> icons with clickable buttons below them. Some buttons have 2 lines of text and some dont. How can I g... (continued)

    Last Reply by Rafi Benkual over 3 years ago


My Comments

RCD commented on RCD's post about 3 years

Actually it works in Chrome (which android wont open html with by default, but that is another story)... but Firefox says "unable to download file".  The files are in local folders so there is nothing to download, unless that is its way of access docs. There must be a cross browser solution...

RCD commented on RCD's post about 3 years

Hey Rafi, I am using data-hide-for="none" because I want it shown on all screen sizes. I works fine except I would like to add a transition.
Even in the example from the link you posted, it also doesn't have a transition applied to ease in/out the effect. It just is shown or not shown, or rather display: none or display: flex (or block). I want to add a transition to this.
I don't think a transition can be applied to display, but maybe this can be done using javascript or some other css hack?

RCD commented on Chris Cooper's post about 3 years

Looking for the same thing.

RCD commented on RCD's post about 3 years

Hey Kevin, I had to create my own button group using flexbox because I have found no solution to this.

RCD commented on RCD's post about 3 years

Thank you Dominik! Did not know that. Cheers

RCD commented on Corey Schaaf's post over 3 years

Yes, I am new to the forum and have already experienced this. Good point!

RCD commented on Corey Schaaf's post over 3 years

Same!

RCD commented on RCD's post over 3 years

Thank you Rafi, it is working now.

RCD commented on RCD's post over 3 years

By changing the port number to 8001 and running 'foundation watch' with the text editor closed, I no longer get this issue. 

RCD commented on RCD's post over 3 years

Thank you Corey, very helpful! I am coming from Bootstrap and am used to putting a container around the page and having a margin created that way.I tried putting a row around the content of the page like you suggested but the content shifted drastically to the left. 
<div class="row"> <!--Container Row -->
<!-- Title -->
<div class="sub-title-contain row">
<div class="small-12 columns">
<h2 class="sub-title">Title</h2>
</div>
</div>

&lt;div class="row"&gt;
  &lt;div class="link-row"&gt;
    &lt;a href="#general" class="link"&gt;General&lt;/a&gt;
    &lt;a href="#docs" class="link"&gt;Documents&lt;/a&gt;
  &lt;/div&gt;      
&lt;/div&gt;

&lt;div id="title" class="row"&gt;
  &lt;h4&gt;Title&lt;/h4&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;p&gt;Text&lt;/p&gt;
&lt;/div&gt;

</div> <!-- Container Row -->

It seems I have to go row column, row column; not two rows following each other.
 
Should I create a custom class for the page container?
Something like:
 
.container {
margin: auto rem-calc(20px);
}

Posts Followed

No Content

Following

    No Content

Followers

My Posts







My Comments

You commented on RCD's post about 3 years

Actually it works in Chrome (which android wont open html with by default, but that is another story)... but Firefox says "unable to download file".  The files are in local folders so there is nothing to download, unless that is its way of access docs. There must be a cross browser solution...

You commented on RCD's post about 3 years

Hey Rafi, I am using data-hide-for="none" because I want it shown on all screen sizes. I works fine except I would like to add a transition.
Even in the example from the link you posted, it also doesn't have a transition applied to ease in/out the effect. It just is shown or not shown, or rather display: none or display: flex (or block). I want to add a transition to this.
I don't think a transition can be applied to display, but maybe this can be done using javascript or some other css hack?

You commented on Chris Cooper's post about 3 years

Looking for the same thing.

You commented on RCD's post about 3 years

Hey Kevin, I had to create my own button group using flexbox because I have found no solution to this.

You commented on RCD's post about 3 years

Thank you Dominik! Did not know that. Cheers

You commented on Corey Schaaf's post over 3 years

Yes, I am new to the forum and have already experienced this. Good point!

You commented on Corey Schaaf's post over 3 years

Same!

You commented on RCD's post over 3 years

Thank you Rafi, it is working now.

You commented on RCD's post over 3 years

By changing the port number to 8001 and running 'foundation watch' with the text editor closed, I no longer get this issue. 

You commented on RCD's post over 3 years

Thank you Corey, very helpful! I am coming from Bootstrap and am used to putting a container around the page and having a margin created that way.I tried putting a row around the content of the page like you suggested but the content shifted drastically to the left. 
<div class="row"> <!--Container Row -->
<!-- Title -->
<div class="sub-title-contain row">
<div class="small-12 columns">
<h2 class="sub-title">Title</h2>
</div>
</div>

&lt;div class="row"&gt;
  &lt;div class="link-row"&gt;
    &lt;a href="#general" class="link"&gt;General&lt;/a&gt;
    &lt;a href="#docs" class="link"&gt;Documents&lt;/a&gt;
  &lt;/div&gt;      
&lt;/div&gt;

&lt;div id="title" class="row"&gt;
  &lt;h4&gt;Title&lt;/h4&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;p&gt;Text&lt;/p&gt;
&lt;/div&gt;

</div> <!-- Container Row -->

It seems I have to go row column, row column; not two rows following each other.
 
Should I create a custom class for the page container?
Something like:
 
.container {
margin: auto rem-calc(20px);
}

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content