473,549 Members | 2,588 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

custom <select> width, inline, etc.

I'm trying to replicate a fancy drop-down control (MS-egads!) with
form <select><option >

It doesn't look like you can specity width as an attribute or define
width with CSS.
It looks like my choices are to use smaller fonts or choose shorter
option strings.

inline: I want to put a small graphic immediately to the right of the
select.
Of course the select is hogging all the width, in the table cell, and
"nowrap" attr seems to be uneffective. ( I'm also using it in an
XSLT context and am forced to use nowrap="1" )
Are there other solutions ? can I specify nowrap or inline for div
or span or ??

Of course by def. the <select> shows the selected option and its width
specified by the longest value.

But I noticed, in some of these MS drop-down controls, the displayed
value is shorter length ( and is a representation ) of the selection
chosen from the list. ( where dropdown choices are very wide and extend
beyond the width of the control )
I've even seen dropdown selections, that had selections displayed in
columnar format.
ie: company | branch | address | dept

Anyone with suggestions ??? or has anyone implemented custom <select>
for web forms?

Jan 20 '06 #1
3 14309
Any feedback on this ?

Jan 26 '06 #2
i_****@hotmail. com wrote:
I'm trying to replicate a fancy drop-down control (MS-egads!) with
form <select><option >

It doesn't look like you can specity width as an attribute or define
width with CSS.
There is no HTML 'width' attribute for either select or option
elements. You can specify a width via CSS, but as always CSS is just a
suggestion to the browser - there is no obligation to obey your
suggestion (though most will most of the time).

Firefox will obey CSS width instructions for both select and options,
IE will for select elements.

It looks like my choices are to use smaller fonts or choose shorter
option strings.
Or CSS.

inline: I want to put a small graphic immediately to the right of the
select.
Of course the select is hogging all the width, in the table cell, and
"nowrap" attr seems to be uneffective. ( I'm also using it in an
XSLT context and am forced to use nowrap="1" )
'nowrap' is deprecated and shouldn't be used at all. Use the CSS
whitespace property:

<URL:http://www.w3.org/TR/CSS21/text.html#propd ef-white-space>

Are there other solutions ? can I specify nowrap or inline for div
or span or ??
See whitespace above. I think inline is irrelevant here.

Of course by def. the <select> shows the selected option and its width
specified by the longest value.
Unless you sepecify some other width using CSS and the browser obeys
you.

But I noticed, in some of these MS drop-down controls, the displayed
value is shorter length ( and is a representation ) of the selection
chosen from the list. ( where dropdown choices are very wide and extend
beyond the width of the control )
I've even seen dropdown selections, that had selections displayed in
columnar format.
ie: company | branch | address | dept


URL? Example? It could be that they are using a mono-spaced font and
simple text formatting. The more complex it is, the more likely it is
to break on some browsers.

Maybe a select is not the right element to be using? What are you
actually trying to do?
--
Rob

Jan 27 '06 #3
The dropdowns that I described were actually from MS Access, not on the
web.
They provided both type-in and dropdown choices, which is obviously
hard to replicate.

I like the drop-down displaying columnar data (which I can set up),
but it also forces the <select> to be the same length, unless I can
show a substring.
AFAIK, length of <option> and length of <select> have to be the same.

I've considered a textbox input and js code, that would (on keystrokes)
do a window.open of a detailed <select> that can then re-populate the
text box.
It would be complex, but may be the only way to simulate the MS
control.

Jan 28 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
4543
by: Mad Scientist Jr | last post by:
I'm trying to get javascipt select all items in a HTML form <SELECT> control and submit the form to an asp.net page. For some reason when the link is clicked, you can see the items all get selected, but then they are somehow unselected as the form posts. Any idea? My Html and ..net code follows: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0...
3
16406
by: gekoblu | last post by:
Hi!, I want to fix via javascript the combo width to a fix value. I'd like to implement a kind of ALT / TITLE function to show the entire option when the text is longer than the combo width... It's possible?!? Thanks
2
6426
by: Joachim Bauer | last post by:
I'm using the code below to display a menu that opens when the mouse goes over the main menu item (try it in your browser to understand the behaviour). It uses "position:absolute" and a switch between "display='none'" and "display=''". However the problem is that - in Internet Explorer 6 the dropdown (<select>...) always hides the menu
7
2013
by: | last post by:
I can't get IE 6 to read the values in my <SELECT..> data entry fields. Netscape 7 and Opera see them, and IE will pass the values to the database, but the javascript validation script gets a null value from the selection fields. Text inputs work just fine. Below is the form and validation script (I've added "...." to indicate additional...
7
10903
by: lambertb | last post by:
Hi, is this possible to achieve this, and how? http://img217.imageshack.us/img217/779/derrrvw2.png thanks!
2
3406
by: KarlosSultana | last post by:
Hello to those who read this, this is my first ever post! I am currently getting very confused trying to put a <form> in a table-cell: Firstly I have a <div> styled with display:table -this forms the "footer" box on my page. Next I have two nested <div>s styled with display:table-cell that I want to appear side-by-side. I can put a...
4
39323
by: Man-wai Chang | last post by:
-- iTech Consulting Co., Ltd. Expert of ePOS solutions Website: http://www.itech.com.hk (IE only) Tel: (852)2325 3883 Fax: (852)2325 8288
5
26310
by: pravinnweb | last post by:
I have a form with lots of select boxes with fixed widths in order to fit in with the design. The problem I have is that some of the values in the options are much wider than the select box so the text in the options is cut off at the width of the select box. In firefox etc the options just expand to the width of the values but not in IE, so if...
1
2358
by: volynetsv | last post by:
Hello. I have a small problem, here's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>iframe popup (JS)</title> <link...
0
7726
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7819
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6052
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5377
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5097
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3505
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1953
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1064
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
772
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.