javascript - Mixing in jQuery's UI widget with my topNav kills horizontal alignment -


in web application using jquery , jquery ui (1.10.2 , 1.10.4 respectively), use css in jquery css in /js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css of zip file jquery site. had topnav bar before got jquery-based autocomplete function work:

myprofile         link1          link2      |   search box           |     logout 

my search box 300px , fonts 12px, , width of div container above 700px , before added jquery autocomplete support, this:

<div class="topnav">     <div class="left">           <a href...>myprofile</a>>&nbsp&nbsp           <a href...>link1</a>>&nbsp&nbsp           <a href...>link2</a>>&nbsp&nbsp     </div>     <input id="searchbox" name="searchbox" type="search" >     <div class="right">           <a href...>logout</a>     </div> </div> 

it aligned (all of topnav in 1 line).

now, after adding jquery support so:

<div class="topnav">     <div class="left">           <a href...>myprofile</a>>&nbsp&nbsp           <a href...>link1</a>>&nbsp&nbsp           <a href...>link2</a>>&nbsp&nbsp     </div>       <!-- div-ing input searchbox change: -->      <div class="ui-widget">            <input id="searchbox" name="searchbox" type="search" >      </div>       <div class="right">           <a href...>logout</a>     </div> </div> 

and now, search box has decided appear in next line, , logout appears in second line, so:

myprofile         link1          link2        |   search box           |                                                  logout 

any on how horizontally align after jquery autocomplete support appreciated.

i followed approach in accepted answer in so post. seems have solved problem. css properties of .ui-widget (the jquery div element) can additionally changed (for font size etc.) in application, way can remove issues including dependency.


Comments

Popular posts from this blog

How to access named pipes using JavaScript in Firefox add-on? -

multithreading - OPAL (Open Phone Abstraction Library) Transport not terminated when reattaching thread? -

node.js - req param returns an empty array -