How to expand input field to the right in a header bar


Tags: javascript,jquery,html,css

Problem :

I have a header bar with left-aligned items, center items and right-aligned items. In the center, I have multiple items and a search input field. When the search field gets focus, I'm making it wider by animating the width. Right now, because the items are centered, it's animating both left and right to center the content. How can I change this so it keeps the alignment and expands the width to the right?

I'm not using Bootstrap. I'm currently using a table for the header bar content. I'm open to changing that, but if there's a way to do it with the current design, that would be preferred.

Here's a JSFiddle...click in the search field to see what's happening: https://jsfiddle.net/L60g0j64/1/

EDIT: I've updated it with the suggested solution below. My only issue is that the red container surrounding the input should expand also.

HTML/CSS/JS Snippet

$('#search').focus(function() {
  $(this).val("");
  $('#hidden_content').css('display','inline');
  $(this).animate({width: '180px'}, 200);
});

$('#search').blur(function() {
  $(this).val('Search');
  $('#hidden_content').css('display','none');
  $(this).animate({width: '120px'}, 200);
});
.header-navbar {
cursor: pointer;
white-space: nowrap;
background-color: #1f2127;
color: #cbcbcb;
min-width: 0;
text-overflow: ellipsis;
z-index: 299;
top: 0px;
left: 0px;
width: 100%;
height: 32px;
float: none;
position: fixed;
border-spacing: 0px;
}
td.cell-center {
text-align: center;
}
.cell-center table {
margin: 0 auto;
}
.header-table {
height: 32px;
border: none;
border-spacing: 0px;
}
td.header_rtd {
padding-right:12px;
}
td.header_ltd {
padding-left:12px;
}
.search-wrapper {
  max-width: 124px;
  background-color: red;
  padding:4px;
}
.hidden_content{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="header-navbar" id="header" cellspacing="0" cellpadding="0">
  <tbody>
<tr>
  <td>
    <table class="header-table" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td class='header_rtd'>left1</td>
          <td class='header_rtd'>left2</td>
        </tr>
    </table>        
  </td>
  <td width=100% class='cell-center'>
    <table class="header-table" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td class='header_rtd'>center</td>
          <td class='header_rtd'>center</td>
          <td><div class="search-wrapper">
            <input class="search" id="search" style="width: 120px;" type="text" size="60" value="Search"/>
            <div class='hidden_content' id='hidden_content'>
              hidden content
            </div>
            </div></td>
        </tr>
      </tbody>
    </table>                
  </td>
  <td>
    <table class="header-table" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td class='header_ltd'>right1</td>
          <td class='header_ltd'>right2</td>
        </tr>
      </tbody>
    </table>        
  </td>
</tr>
  </tbody>
</table>



Solution :

One quick solution would be to give the parent element a max-width equal to the initial width of the element. In doing so, the element will still be centered relative to the initial width because the input element's animated width will not effect the width of the parent element.

Updated Example

.search-wrapper {
  max-width: 124px;
}

As a side note, you don't need jQuery/JS to animate the width, you can simply use a CSS transition along with the :focus pseudo-class.

Updated Example

.search-wrapper input.search {
  transition: 1s width ease;
  width: 120px;
}
.search-wrapper input.search:focus {
  width: 180px;
}

    CSS Howto..

    How can I create a postage stamp border?

    How Can I Override Style Info from a CSS Class in the Body of a Page?

    How to apply the grayscale jquery plugin to a background image?

    There is a little gap between the image and the overlay, I do not know how to fix it [duplicate]

    How to add CSS class to asp.net from code behind [closed]

    How to apply CSS class on current element using jQuery

    How do I do the CSS for this?

    How to create a circumference with CSS? [closed]

    How to add more css properties into an CSS rule without remove other existing properties

    How to create the timetabling with div properly?

    Style elements based on how many elements there are using just CSS?

    CSS how can i turn the scrolling off during the animation?

    Can someone show me how to get my CSS code to work more than once? [closed]

    how to make a drop down menu fixed from the top with css?

    How to reuse a css background sprite for icons of different sizes?

    How to make resizable li elements with CSS only

    How can i display all buttons to right in bootstrap panel heading?

    How to create a clickable block?

    How to position a button to be always a certain distance from the screen in css? [closed]

    How to use the not selector correctly in CSS [duplicate]

    How to change the body background for three different div-s

    how to apply multiple css image filters using jquery

    how to put css max-left or min-left position to absolute object?

    How to visually indicate current page in ASP.NET MVC?

    how does the jquery resultview on Airbnb Search Page work?

    How (where) can i set fixed cell size in nested html tables, with css?

    How to make a layout scale with CSS?

    How to add top-right arrow in bootstrap navbar dropdown menu

    How do I change the MVC Bootstrap layout to have more than one columns

    How to make css jquery autofit navigation?