Menu icon Foundation

My Posts

No Content

My Comments

Kris Livingstone commented on Max Audron's post over 4 years

TonyByte sent me here from a dupe thread discussing this issue.

It seems that using a v0.10.* version of node.js works. I had the same issue with v0.12.*

I'm using:
rubyinstaller-1.9.3-p484.exe
node-v0.10.22-x64.msi

Win7

Kris Livingstone commented on Daniel Vos's post over 4 years

Managed to get it working by reverting node and ruby to the versions that were installed on my old computer (not sure which helped).

rubyinstaller-1.9.3-p484.exe
node-v0.10.22-x64.msi

Kris Livingstone commented on Daniel Vos's post over 4 years

Same problem. Win 7 x64, very fast connection.

Installing dependencies with bower...

Tried an earlier bower version too... no luck.

Kris Livingstone commented on Jo Mourad's post about 5 years

Hey Jo,

The first column-8 should be "large-8 medium-12 small-12 columns"
The second column-4 should be "large-4 medium-12 small-12 columns"

Read the docs about the "push" and "pull" classes for control over the stacking order. ;-)

Kris

Kris Livingstone commented on Vladimir's post about 5 years

I'm so happy you see the issue Rafi. It seems a lot of foundation users have been troubled by this one. I know because I've attempted to compensate for the issue using various recommended fixes.

When you guys get a chance to look at it, please note the other issue when the top bar is in small screen/collapsed mode. There's a vertical alignment issue between the input and button (1 or 2px) hence why I've used the top: 0; for that media mode.

Kris Livingstone commented on Vladimir's post about 5 years

I was able to get it to work, but I'm pretty sure even in 5.4.6 it's still broken.

This works for me in IE10, FF 32.0.2 and Chrome 38.0.2125.104 m. It'll have to do for now ;-)

.top-bar .button {
 line-height: 1rem;
 height: 2.1rem;
}
.top-bar input {
 line-height: 1rem;
 height: 2.1rem;
}
@media only screen and (max-width: 40em) {
  .top-bar .button{
   top: 0;
  }
}
            <ul class="right">
         <li class="has-form">
          <form>
            <div class="row collapse postfix-radius">
              <div class="large-8 small-8 columns">
                <input type="search">
              </div>
              <div class="large-4 small-4 columns">
                <button type="submit" class="radius button postfix">Search</button>
              </div>
            </div>
          </form>
         </li>
            </ul>

Kris Livingstone commented on Vladimir's post about 5 years

Appreciate the help, but in my case it works great in a regular div but not so much in Top Bar where I need it. Also, the input box shouldn't have a radius on both sides so the example you provided still doesn't fix my issue.

Kris Livingstone commented on Vladimir's post about 5 years

I'm also having an issue with this... 5.3.3

Kris Livingstone commented on Akshay's post over 5 years

Here's what worked for me:

Solved two of my issues (actually worked out better accidentally). Magellan sticky now shows up full width and covers the sticky top bar when scrolling.

Tiny custom CSS and no change to the Magellan HTML.

[data-magellan-expedition] {
     left: 0px;
     z-index: 500;
}

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Max Audron's post over 4 years

TonyByte sent me here from a dupe thread discussing this issue.

It seems that using a v0.10.* version of node.js works. I had the same issue with v0.12.*

I'm using:
rubyinstaller-1.9.3-p484.exe
node-v0.10.22-x64.msi

Win7

You commented on Daniel Vos's post over 4 years

Managed to get it working by reverting node and ruby to the versions that were installed on my old computer (not sure which helped).

rubyinstaller-1.9.3-p484.exe
node-v0.10.22-x64.msi

You commented on Daniel Vos's post over 4 years

Same problem. Win 7 x64, very fast connection.

Installing dependencies with bower...

Tried an earlier bower version too... no luck.

You commented on Jo Mourad's post about 5 years

Hey Jo,

The first column-8 should be "large-8 medium-12 small-12 columns"
The second column-4 should be "large-4 medium-12 small-12 columns"

Read the docs about the "push" and "pull" classes for control over the stacking order. ;-)

Kris

You commented on Vladimir's post about 5 years

I'm so happy you see the issue Rafi. It seems a lot of foundation users have been troubled by this one. I know because I've attempted to compensate for the issue using various recommended fixes.

When you guys get a chance to look at it, please note the other issue when the top bar is in small screen/collapsed mode. There's a vertical alignment issue between the input and button (1 or 2px) hence why I've used the top: 0; for that media mode.

You commented on Vladimir's post about 5 years

I was able to get it to work, but I'm pretty sure even in 5.4.6 it's still broken.

This works for me in IE10, FF 32.0.2 and Chrome 38.0.2125.104 m. It'll have to do for now ;-)

.top-bar .button {
 line-height: 1rem;
 height: 2.1rem;
}
.top-bar input {
 line-height: 1rem;
 height: 2.1rem;
}
@media only screen and (max-width: 40em) {
  .top-bar .button{
   top: 0;
  }
}
            <ul class="right">
         <li class="has-form">
          <form>
            <div class="row collapse postfix-radius">
              <div class="large-8 small-8 columns">
                <input type="search">
              </div>
              <div class="large-4 small-4 columns">
                <button type="submit" class="radius button postfix">Search</button>
              </div>
            </div>
          </form>
         </li>
            </ul>

You commented on Vladimir's post about 5 years

Appreciate the help, but in my case it works great in a regular div but not so much in Top Bar where I need it. Also, the input box shouldn't have a radius on both sides so the example you provided still doesn't fix my issue.

You commented on Vladimir's post about 5 years

I'm also having an issue with this... 5.3.3

You commented on Akshay's post over 5 years

Here's what worked for me:

Solved two of my issues (actually worked out better accidentally). Magellan sticky now shows up full width and covers the sticky top bar when scrolling.

Tiny custom CSS and no change to the Magellan HTML.

[data-magellan-expedition] {
     left: 0px;
     z-index: 500;
}

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content