Question

I’m having a few issues with trying to customize Twitter Bootstrap for my rails app.

1) When you type in the search box the text seems to resize down slightly which gives it a weird stretching effect:

 <form class="navbar-search pull-right">
   <input type="text" class="search-query span2">
   <div class="icon-search"></div>
 </form>

.navbar-search {
  .input-prepend {
    margin-bottom: 0;
  }
  .search-query {
    padding-left: 29px;
    background-color: hsl(360, 0%, 17%) !important;
  }
  .icon-search {
    position: absolute;
    top: 6px;
    left: 11px;
    background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png");
  }
  .search-query:focus, .search-query.focused {
    color: $white;
    padding-left: 30px;
  }
}

To get a better idea, here’s another photo with the focused text color changed to gray:*

---

2) When resizing the navbar, it apparently doesn’t keep the navbar attached to the right side of the screen:

<header class="navbar center">
  <div class="navbar-inner">
    <div class="container">
      <%= link_to image_tag("logo.png", size: "275x275", border: 0, alt: "logo"), root_path, id: "logo" %>
        <nav>
          <%= link_to "New Post", newpost_path, class: "btn btn-custom" %>
          <%= link_to "Browse Posts", posts_path, class: "btn btn-custom" %>
          <ul class="nav pull-right">
            <% if signed_in? %>
              <li class="active"><%= link_to "Users", users_path %></li>
              <li id="fat-menu" class="active dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <b class="caret">Account </b>
              </a>
              <ul class="dropdown-menu">
                <li><%= link_to "Profile", current_user %></li>
                <li><%= link_to "Settings", edit_user_path(current_user) %></li>
                <li class="divider"></li>
                <li>
                  <%= link_to "Sign out", signout_path, method: "delete" %>
                </li>
              </ul>
              </li>
            <% else %>
              <li class="active"><%= link_to "Sign in", signin_path %></li>
            <% end %>
          </ul>
          <form class="navbar-search pull-right">
            <input type="text" class="search-query span2">
            <div class="icon-search"></div>
          </form>
        </nav>
      </div>
    </div>
</header>

.navbar-inner {
  background-color: $yellow;
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

I Tried Cobaco’s suggestions and here are the results (still have problems, left side touches the browser, right side has a gutter space and the bar is still being squeezed.):

Edit: The table-row and table-cell suggestion worked, however I had to make some modifications to the background and the left side still isn’t flush.

Answer 1

for queston 1):

try using css2.1 table display:

.home-row {display: table-row;}
.home-row>.span4 {display: table-cell;}

see http://www.w3.org/TR/CSS21/tables.html for more on that
browsersupport for CSS Table Display is good these days (see http://caniuse.com/css-table only IE7 and below don’t support that)

for 3)

.navbar {position: relative; right: 0;}

should keep it attached to the right-side