Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Elastic search box
Apologies if this has been dealt with elsewhere, but I can’t find anything on the web that fits.
My site is fixed width, centred on the page (margins expand/contract with browser size).
Along the top I have a nav bar, created in the usual way with stylized inline <li> items. The last item in the list is the search box and I want it to “fill the rest of the space in the row” so if I add or delete list items, the search box always nestles neatly on the end.
<code>
<ul>
<li>Home</li>
<li>News</li>
…
<li><span id=“searchinput”><txp:search_input wraptag=”“ label=”“ /></span></li>
</ul>
</code>
<pre>
<code>
#searchinput {
width:100%;
}
</code>
</pre>
<pre>
<code>
#searchinput input {
margin:0;
padding:0;
etc…
}
</code>
</pre>
Tried all sorts of hacks: making the box width massive and using overflow:hidden; floating right; a 100% wide input box; all to no avail. I’ve even tried giving the last <li> a special class and messing with the width of that. Closest I got was making the last <li> float right, but that just left a gap between the last proper list item and the search box instead.
Can it be done? If so, any ideas?
Last edited by Bloke (2006-08-07 13:40:20)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
#2 2006-08-07 19:24:11
- NyteOwl
- Member
- From: Nova Scotia, Canada
- Registered: 2005-09-24
- Posts: 539
Re: Elastic search box
I think you may have to add some javascript to accomplish this. Enclose the input in an elastic container, use javascript to calculate the width when it resizes and insert that value into the size attribute for the input.
I don’t think you can do it with just x/html and css. If you can I’d love to know how as well :)
Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;
Offline
Re: Elastic search box
NyteOwl wrote:
Enclose the input in an elastic container, use javascript to calculate the width when it resizes and insert that value into the size attribute for the input.
Think you may be right. Maybe one day I’ll go that route, thanks for the idea.
For now I went back to basics and just made all the items <code><li></code> tags. I struggled to get them to stretch across the page evenly without gaps between them, so I guess this is just beyond CSS2 right now, or my brain’s not big enough to figure it out.
So I hacked it: used a fixed percentage width for each <li> (as close as I could get before it “wrapped”). Of course, the percent values that trigger wrapping are different in IE and Firefox – IE’s are about 0.3% smaller which I’m guessing is a form of the 3px bug rearing its ugly head. I then centred the <ul> in a div and hope nobody notices that the items at each end are a few pixels wider than the rest.
I then replaced the search box and used trial-and-error margins and padding until it fit exactly within the the space of the last <li>. All hail the realtime CSS editor in the Firefox developer toolbar…
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Pages: 1