Columns don't seem to work properly when used in the top-bar

[calderJamNet]

Im trying to implement an autosizing search bar w/ attached button with the following code:

<div class="row">
        <div class="large-12 columns">
          <div class="row collapse">
            <div class="small-10 columns">
              <input class="topSearch" type="search" placeholder="Search">
            </div>
            <div class="small-2 columns">
            <button href="#" class="button searchButton"><a class="fa fa-caret-down searchCaret"></a></button>
            </div>
          </div>
        </div>
      </div>

It works fine on its own, but the second it gets added to the top-bar the size becomes fixed.

<header class="top-bar">
  <div class="row">
    <!-- LEFT- - - - - - - - - - - - - - - -->
    <div class="top-bar-title"><%= image_tag 'logo.png', alt: 'JamNet', id: 'logo' %></div>
    <div class="top-bar-left">
      <div class="row">
        <div class="large-12 columns">
          <div class="row collapse">
            <div class="small-10 columns">
              <input class="topSearch" type="search" placeholder="Search">
            </div>
            <div class="small-2 columns">
            <button href="#" class="button searchButton"><a class="fa fa-caret-down searchCaret"></a></button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- RIGHT- - - - - - - - - - - - - - - -->
    <div class="top-bar-right">
      <!-- ICONS- - - - - - - - - - - - - - -->
      <ul class="dropdown menu align-right navIcons" data-dropdown-menu>
        <li class="has-submenu">
          <a class="fa fa-caret-down smallCaret"></a>
          <ul class="submenu menu vertical topbarDrop" data-submenu>
            <li><a href="#">New Project</a></li>
            <li><a href="#">New Event</a></li>
            <br>
            <li><a href="#">Help</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Logout</a></li>
          </ul>
        </li>
        <li class="navIcon"><a href="#"><i class="fi-alert"></i></a></li>
        <li class="navIcon"><a href="#"><i class="fi-comment"></i></a></li>
        <li class="navIcon"><a href="#"><i class="fi-torsos"></i></a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <!-- LINKS- - - - - - - - - - - - - - -->
      <ul class="menu navLinks">
        <li class="linkHome"><a href="#">Home</a></li>
        <li class="linkEvents"><a href="#">Events</a></li>
        <li class="linkProfile"><a href="#">Profile</a></li>
      </ul>
    </div>
  </div>
</header>

I figured this was just because top-bar > input { width: is set to 200px by foundation, however when this is disabled, although the size changes, it becomes smaller, which is strange because the css width value is now 100%.

[SalahAdDin]

I think that the better form ever been use navs, but, i don't know why Zurb change this.

[calderJamNet]

@SalahAdDin sorry but could you elaborate on what you mean by this?

[gakimball]

The .top-bar input selector causing issues we're aware of, see #7663

This CSS will work around the issue:

.top-bar .input-group-field {
    width: 100%;
}

Can you try switching from using collapsed rows to make your input group, and instead use the new input group, and let me know if that looks right?

If it doesn't, take a screenshot so we can see at what's wrong.

[calderJamNet]

@gakimball thanks for getting back to me!

That worked as far as autosizing goes but I still cant get it to align horizontally with the rest of the top-bar elements.

Here it is when first added.

<header class="top-bar">
  <div class="row">
    <!-- LEFT- - - - - - - - - - - - - - - -->
    <div class="top-bar-title"><%= image_tag 'logo.png', alt: 'JamNet', id: 'logo' %></div>
    <div class="top-bar-left">
      <div class="row">
        <div class="large-6 columns">
          <div class="input-group">
            <input class="input-group-field" type="number">
            <div class="input-group-button">
              <input type="submit" class="button" value="Submit">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- RIGHT- - - - - - - - - - - - - - - -->
    <div class="top-bar-right">

Here it is with top-bar . input-group-field { width: 60% }

And here I tried removing the button. width is still at 60% here, not sure why it changed size again.

And also here, where i put width back to 100% and tried butting the form in a column. The form doesn'

<div class="top-bar-left">
      <div class="row">
        <div class="large-6 columns">
          <div class="input-group">
            <input class="input-group-field" type="number">
            <div class="input-group-button">
              <input type="submit" class="button" value="Submit">
            </div>
          </div>
        </div>
      </div>
    </div>

[gakimball]

I think you need to restrain the width of the entire .input-group. If it goes 100% width, it wraps around to the next line as you see in a few of the screenshots.

You probably don't need a column to do it. You might be able to set just width on the input group. If that doesn't work on its own, you can change the display property from table to inline-table.

Let me know if that helps!

[calderJamNet]

@gakimball I wasn't able to get this to work when setting width to a percentage, and while it lined up when using a specified value this ended the responsiveness of the input group.

I was able to get the elements to line up by setting the .top-bar.left width to 35% but when resizing the window the rate at which the input group shrinks is less than the rate that the top-bar-right elements are moved to the left, causing them to be shifted down at certain sizes.

Heres a video: https://vid.me/pbkf

Any idea on what I could do to fix this?