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>>   <a href...>link1</a>>   <a href...>link2</a>>   </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>>   <a href...>link1</a>>   <a href...>link2</a>>   </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
Post a Comment