Menu icon Foundation

My Posts


  • 1
    Reply
  • Compile SASS to custom location

    By Ronan

    node-sassSass

    Hi,   I am running Foundation 6 Sites in a non public directory so want to setup my SASS compiler to create the .css file in a different folder that is public on the server.  I installed Foundation 6 with the manual installation process i.e. d... (continued)

    Last Reply by Ronan about 3 years ago


  • 6
    Replies
  • Left align dropdowns

    By Ronan

    dropdown

    Hi, I was wondering if anyone knew how i could go about left aligning the bottom dropdowns in foundation? I cant use the normal align:left data option as this either disappears off the left side of the grid or blocks other dropdows. Ideally i would l... (continued)

    Last Reply by Rafi Benkual over 4 years ago


  • 2
    Replies
  • xxlarge class

    By Ronan

    xlarge

    Hi, I am having a problem with my layout when i view the site on a very large resolution e.g. 2048 x 1536px. A div with the following classes displays as though it is 9 columns wide but it should stay as 12 columns. Besides this issue all smaller res... (continued)

    Last Reply by Ronan over 4 years ago



  • 3
    Replies
  • Dropdowns overflow hidden

    By Ronan

    dropdowncutoff

    Hi, I have an issue where if i have a dropdown close to the right hand side of the page any dropdown content that goes past the grid edge is cutoff. Is it possible for the dropdown to automatically know if it is too close to the grid edge and adjust i... (continued)

    Last Reply by Ronan over 4 years ago



  • 2
    Replies
  • Cant click after JoyRide Tour is finished

    By Ronan

    joyride

    Hi, I have setup a JoyRide tour on my site. Once the tour has finished the first click i try to do on the page does not work. After the first click fails i can start clicking normally again e.g. clicking links, buttons, etc. Does anyone know wha... (continued)

    Last Reply by david lee almost 5 years ago


  • 4
    Replies
  • IE11 Display Bugs

    By Ronan

    ie11

    Hi, I am developing a new site on Foundation 5.3.2 and am having loads of display errors when viewing in IE11. I have been testing in about 10 other OS and Browser configurations without any issues. Are their any know issues with Foundation 5 and IE1... (continued)

    Last Reply by dytto123 over 1 year ago


  • 6
    Replies
  • Unordered List Bug

    By Ronan

    Orbittabsul list

    Hi, I am running tabs inside of an orbit. If i have any Unordered List Item in a tab the list items are floated to the right of the container and appear over each other. Anyone else come across this? Thanks!

    Last Reply by Ronan over 5 years ago


My Comments

Ronan commented on Sunu Scaria's post about 3 years

Anyone have an answer to this?  I am having a similar issue.  The interchange plugin is not working on my old Development version of Firefox.
 
Thanks

Ronan commented on Ronan's post about 3 years

Got it figured out eventually.  For anyone else interested in this Foundation 6 uses Gulp to compile the css.  The destination folder for the compiled css file is set in the gulpfile.js at the root of your Foundation Folder.  Change the argument to your required destination folder here:
 
.pipe(gulp.dest('new_destination_path'));

Ronan commented on Ronan's post over 4 years

Anyone else have any idea's about this? I have managed to modify the CSS for a bottom dropdown that is left aligned but on small screen devices Foundations viewport detection kicks in and messes with my custom CSS.

Ronan commented on Ronan's post over 4 years

Hi Bob,

I have attached a screentshot to my original post to clarify what i mean. I have also modified your codepen slightly. When the dropdown button is smaller my issue is clearer i think:

http://codepen.io/anon/pen/xbBwLd

When you click the dropdown button the panel appears below the dropdown button with the panels left border aligned with the left border of the dropwdown button. I would like it that the panels right border be aligned with the right border of the dropwdown button so that any overflow for the panel would be on the left rather than the right.

Thanks!

Ronan commented on Ronan's post over 4 years

Hi Rafi,

Thanks, that got it sorted for me!

Ronan commented on Ronan's post over 4 years

I have tested this solution now on various setups and its working perfectly except for ipad 2. Strangely on the iPad 2 it seems to auto detect for this issue and is automatically implementing a similar solution to what i have done i.e. left align the dropdown and move the arrow to the right. Does anyone know how this behaviour is present on iPad but not on any other device? And, is it possible to deactivate this on the iPad as it is interfering with the solution i implemented?

Thanks!

Ronan commented on Ronan's post over 4 years

I created a crude solution to this by creating an array with the id's of the 4 last dropdown id's on my page. I then target these 4 dropdown lists with jQuery and add a couple of new css classes. The .customDropdownArrow:before and .customDropdownArrow:after override Foundations f-dropdown:before and f-dropdown:after for placement of the dropdown arrow.

for (i = 0; i < lastProductCategoryArray.length; ++i) {
        $('#drop' + lastProductCategoryArray[i]).addClass('dropdownBottomAlignLeft');
        $('#drop' + lastProductCategoryArray[i] + '.dropdownBottomAlignLeft').addClass('customDropdownArrow');
      }

// to adjust the dropdown to the left
.dropdownBottomAlignLeft {
    margin-left: rem-calc(-140);
}

// to adjust the dropdown arrow to the right
.customDropdownArrow:before {
  margin-left: rem-calc(152);
}

.customDropdownArrow:after {
  margin-left: rem-calc(152);
}

Ronan commented on Ronan's post about 5 years

I have it fixed now. I had copied Swedish accented characters into the html which was causing a Unicode post combining vs per composed characters issue in IE11.

Ronan commented on Ronan's post about 5 years

Hi,

I have attached 2 screenshots. The first is the IE11 one with the design issues. The second is what it looks like on other browsers. You can see the top navigation on IE11 only shows the last link i.e. Kontakt. The Bestall har button over the main image is missing the text and below this the 1-5 steps are displaying incorrectly.

Here is an example of the html for the 1-5 steps:

<div class="row whiteBg bulletNumPadding">
    <div class="homeSteps">
      <ul class="small-block-grid-1 medium-block-grid-5">
        <li>
          <img src="<?php echo $this->sanatizeHtml($this->_data['resourceUrl'], 'purifier'); ?>/static/image/bullet-num/1-active.jpg"> <h3>Välj region</h3>
        </li>
        <li>
          <img src="<?php echo $this->sanatizeHtml($this->_data['resourceUrl'], 'purifier'); ?>/static/image/bullet-num/2-active.jpg"> <h3>Välj varor</h3>
          <p>Välj varor från dina lokala MinFarm-bönder</p>
        </li>
        <li>
          <img src="<?php echo $this->sanatizeHtml($this->_data['resourceUrl'], 'purifier'); ?>/static/image/bullet-num/3-active.jpg"> <h3>Välj leveransdag</h3>
          <p>Centralt belägna upphämtningsplatser i Umeå respektive Östersund</p>
        </li>
        <li>
          <img src="<?php echo $this->sanatizeHtml($this->_data['resourceUrl'], 'purifier'); ?>/static/image/bullet-num/4-active.jpg"> <h3>Bekräfta order</h3>
          <p>Bekräftelse skickas till dig per e-post</p>
        </li>
        <li>
          <img src="<?php echo $this->sanatizeHtml($this->_data['resourceUrl'], 'purifier'); ?>/static/image/bullet-num/5-active.jpg"> <h3>Betala faktura</h3>
          <p>Faktura kommer på posten!</p>
        </li>
      </ul>
    </div>
  </div>

Ronan commented on Ivan Torres's post over 5 years

Do you have a mailing list that i can subscribe to so that i am aware when a new version has been released?

Thanks

Posts Followed


  • 4
    Replies
  • IE11 Display Bugs

    By Ronan

    ie11

    Hi, I am developing a new site on Foundation 5.3.2 and am having loads of display errors when viewing in IE11. I have been testing in about 10 other OS and Browser configurations without any issues. Are their any know issues with Foundation 5 and IE1... (continued)

    Last Reply by dytto123 over 1 year ago


Following

    No Content

Followers

My Posts










My Comments

You commented on Sunu Scaria's post about 3 years

Anyone have an answer to this?  I am having a similar issue.  The interchange plugin is not working on my old Development version of Firefox.
 
Thanks

You commented on Ronan's post about 3 years

Got it figured out eventually.  For anyone else interested in this Foundation 6 uses Gulp to compile the css.  The destination folder for the compiled css file is set in the gulpfile.js at the root of your Foundation Folder.  Change the argument to your required destination folder here:
 
.pipe(gulp.dest('new_destination_path'));

You commented on Ronan's post over 4 years

Anyone else have any idea's about this? I have managed to modify the CSS for a bottom dropdown that is left aligned but on small screen devices Foundations viewport detection kicks in and messes with my custom CSS.

You commented on Ronan's post over 4 years

Hi Bob,

I have attached a screentshot to my original post to clarify what i mean. I have also modified your codepen slightly. When the dropdown button is smaller my issue is clearer i think:

http://codepen.io/anon/pen/xbBwLd

When you click the dropdown button the panel appears below the dropdown button with the panels left border aligned with the left border of the dropwdown button. I would like it that the panels right border be aligned with the right border of the dropwdown button so that any overflow for the panel would be on the left rather than the right.

Thanks!

You commented on Ronan's post over 4 years

Hi Rafi,

Thanks, that got it sorted for me!

You commented on Ronan's post over 4 years

I have tested this solution now on various setups and its working perfectly except for ipad 2. Strangely on the iPad 2 it seems to auto detect for this issue and is automatically implementing a similar solution to what i have done i.e. left align the dropdown and move the arrow to the right. Does anyone know how this behaviour is present on iPad but not on any other device? And, is it possible to deactivate this on the iPad as it is interfering with the solution i implemented?

Thanks!

You commented on Ronan's post over 4 years

I created a crude solution to this by creating an array with the id's of the 4 last dropdown id's on my page. I then target these 4 dropdown lists with jQuery and add a couple of new css classes. The .customDropdownArrow:before and .customDropdownArrow:after override Foundations f-dropdown:before and f-dropdown:after for placement of the dropdown arrow.

for (i = 0; i < lastProductCategoryArray.length; ++i) {
        $('#drop' + lastProductCategoryArray[i]).addClass('dropdownBottomAlignLeft');
        $('#drop' + lastProductCategoryArray[i] + '.dropdownBottomAlignLeft').addClass('customDropdownArrow');
      }

// to adjust the dropdown to the left
.dropdownBottomAlignLeft {
    margin-left: rem-calc(-140);
}

// to adjust the dropdown arrow to the right
.customDropdownArrow:before {
  margin-left: rem-calc(152);
}

.customDropdownArrow:after {
  margin-left: rem-calc(152);
}

You commented on Ronan's post about 5 years

I have it fixed now. I had copied Swedish accented characters into the html which was causing a Unicode post combining vs per composed characters issue in IE11.

You commented on Ronan's post about 5 years

Hi,

I have attached 2 screenshots. The first is the IE11 one with the design issues. The second is what it looks like on other browsers. You can see the top navigation on IE11 only shows the last link i.e. Kontakt. The Bestall har button over the main image is missing the text and below this the 1-5 steps are displaying incorrectly.

Here is an example of the html for the 1-5 steps:

<div class="row whiteBg bulletNumPadding">
    <div class="homeSteps">
      <ul class="small-block-grid-1 medium-block-grid-5">
        <li>
          <img src="<?php echo $this->sanatizeHtml($this->_data['resourceUrl'], 'purifier'); ?>/static/image/bullet-num/1-active.jpg"> <h3>Välj region</h3>
        </li>
        <li>
          <img src="<?php echo $this->sanatizeHtml($this->_data['resourceUrl'], 'purifier'); ?>/static/image/bullet-num/2-active.jpg"> <h3>Välj varor</h3>
          <p>Välj varor från dina lokala MinFarm-bönder</p>
        </li>
        <li>
          <img src="<?php echo $this->sanatizeHtml($this->_data['resourceUrl'], 'purifier'); ?>/static/image/bullet-num/3-active.jpg"> <h3>Välj leveransdag</h3>
          <p>Centralt belägna upphämtningsplatser i Umeå respektive Östersund</p>
        </li>
        <li>
          <img src="<?php echo $this->sanatizeHtml($this->_data['resourceUrl'], 'purifier'); ?>/static/image/bullet-num/4-active.jpg"> <h3>Bekräfta order</h3>
          <p>Bekräftelse skickas till dig per e-post</p>
        </li>
        <li>
          <img src="<?php echo $this->sanatizeHtml($this->_data['resourceUrl'], 'purifier'); ?>/static/image/bullet-num/5-active.jpg"> <h3>Betala faktura</h3>
          <p>Faktura kommer på posten!</p>
        </li>
      </ul>
    </div>
  </div>

You commented on Ivan Torres's post over 5 years

Do you have a mailing list that i can subscribe to so that i am aware when a new version has been released?

Thanks

Posts Followed



Following

  • No Content

Followers

  • No Content