Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Strange behavior of drop down list in DETAILS tag

Status
Not open for further replies.
earnshaw1943

earnshaw1943

Programmer
Joined
Aug 29, 2012
Messages
7
Location
GB
I have a drop down list (SELECT,OPTION) in a DETAILS tag and it doesn't seem to work properly.

Whenever you click the drop down list it instantly closes again and as a result you are unable to select anything in the list.

If I take the drop down list out of the DETAILS tag then it works just fine. I am using the latest version of Chrome, anyone else have this happen and know why it's happening??
 
Sort by date Sort by votes
OK - sorry, the code is simple, like this:

HTML: 
<details>
        <select>
              <option>red</option>
              <option>green</option>
              <option>blue</option>
          </select>
</details>


Cheers
 
Upvote 0 Downvote
The details tag expands and contracts no problem, and reveals the select/option drop down too.
The problem is when you click on the drop down - you cannot click an item within the dropdown because it loses focus or something - the details section still remains open. It's just the drop down list that is not behaving properly.
 
Upvote 0 Downvote
Hi, I think I put in my original question that if I take the dropdown out of the detail tag it works fine :)
 
Upvote 0 Downvote
Your example works for me as expected. It opens the drop down, and I can select an option. All this inside the details tag.

I'm using Chrome 21.0.

Now, considering the details tag is at this point only supported in Chrome, and that the HTML 5 spec which this tag belongs to is still in development I don't think its really worth it to spend too much time debugging it.

However, considering the example works, I'd say its something in your actual code, and/or version of Chrome.

Can you show us your actual code?

Or try this one and see if it works?
Code: 
[b][COLOR=#000080]<!DOCTYPE[/color][/b] [COLOR=#009900]html[/color][b][COLOR=#000080]>[/color][/b]
[b][COLOR=#0000FF]<html>[/color][/b]
[b][COLOR=#0000FF]<head>[/color][/b]
[b][COLOR=#0000FF]<title>[/color][/b]Details Tag[b][COLOR=#0000FF]</title>[/color][/b]
[b][COLOR=#0000FF]</head>[/color][/b]

[b][COLOR=#0000FF]<body>[/color][/b]

[b][COLOR=#0000FF]<details>[/color][/b]
[tab][tab][b][COLOR=#0000FF]<select>[/color][/b]
[tab][tab][tab]  [b][COLOR=#0000FF]<option>[/color][/b]red[b][COLOR=#0000FF]</option>[/color][/b]
[tab][tab][tab]  [b][COLOR=#0000FF]<option>[/color][/b]green[b][COLOR=#0000FF]</option>[/color][/b]
[tab][tab][tab]  [b][COLOR=#0000FF]<option>[/color][/b]blue[b][COLOR=#0000FF]</option>[/color][/b]
[tab][tab]  [b][COLOR=#0000FF]</select>[/color][/b]
[b][COLOR=#0000FF]</details>[/color][/b] 

[b][COLOR=#0000FF]</body>[/color][/b]

[b][COLOR=#0000FF]</html>[/color][/b]


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Hmmm.. I've just tried Vacunita's code and it works fine for me.
In Firefox it only displays the dropdown but in Chrome it displays an expandable "Details" block.
Using Chrome 21.0.1180.83 m

@earnshaw1943 Do you happen to have any fancy code in your css for the Details?
Cheers,
MakeItSo

“Knowledge is power. Information is liberating. Education is the premise of progress, in every society, in every family.” (Kofi Annan)
Oppose SOPA, PIPA, ACTA; measures to curb freedom of information under whatever name whatsoever.
 
Upvote 0 Downvote
I was about to send you the whole code - but it worked before I sent it to you - the only difference is that the dropdown is being popped by some javascript (to list years from 1700 - present). So I suspsect it must be something to do with the javascript.
 
Upvote 0 Downvote
So I suspsect it must be something to do with the javascript.
Click to expand...
Possibly.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Aha! getting a bit closer now guys. Not really Javascript, but CSS, when I removed references to this CSS:

<link href="....jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="...jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" />


it worked - however not really sure how I can get round not having these scripts....hmmm

 
Upvote 0 Downvote
You can download them and use the local variant of them.
Then you can open these in a CSS editor and check out what they do to Details elements.
;-)

“Knowledge is power. Information is liberating. Education is the premise of progress, in every society, in every family.” (Kofi Annan)
Oppose SOPA, PIPA, ACTA; measures to curb freedom of information under whatever name whatsoever.
 
Upvote 0 Downvote
Hmm - had a good old search of the css for the base jquery ui and I can't find anything to do with "detail" or "summary".
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
soni21
  • Locked
  • Question Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
SitesMasstec
  • Locked
  • Question Question
Viewport meta tag x iframe
Replies
0
Views
354
SitesMasstec
SitesMasstec
Mike Lewis
  • Locked
  • Question Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question Question
Media query: display = none/inline/block
Replies
1
Views
1K
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top