I have a form.In that iam having my customized data dropdown.In one case combo box is below the custom data dropdown.when i click the dropdown th div iam caling has to come top of the combo box.It is not coming on the top the stack.the combo box and div are overlapping.
Any Suggestions to solve these problem?
Thanks
Avinash
This is because controls like select boxes, iframes will be on top of other controls like div, span etc.
You can either hide the select box when the custom control is on top of it. This won't be a great idea.
Otherwise you can use another iframe to solve this issue.
This is an IE-specific problem (fixed for IE8 I believe). The select element will always appear on top of anything else.
One solution is to create an iframe and position that underneath your dropdown. They are one of the few elements that will appear on top of the select element. http://www.clientcide.com/wiki/cnet-libraries/02-browser/02-iframeshim might be helpful.
Related
I'm trying to tweak a widget that loads from Javascript. I'm using jQuery to re-style it.
It has a textbox that is behaving strangely. The cursor stays on the left side of the box and as the user types the text flows to the right. Clicking in the text makes the cursor behave normally.
Does anybody know what might be causing this? I've tried changing the "direction" property but it doesn't help.
Thanks
i think your css having text-align:right
try this
text-align:left !important
I have a css menu, pretty standard functionality. I have implemented it within a Netsuite site im working on.
The menu is visible here:
http://www.gardensandhomesdirect.co.uk
Its the one just under the header.
Ive been trying to get the only part of the menu with dropdowns to come left instead of right when hovered so that it is not being 'hidden' underneath the wrapper.
What is the best way to get this menu showing correctly? I there a way i can get it hover over the top of everything else instead of underneath like now?
Any help appreciated.
-Wayne
You need to have overflow: visible on #outerwrapper if you want to show anything outside that div.
Alin
I have a list of reports on a page. I currently have 4 large buttons on the right to view, add, edit or delete a button. We've had complaints about people having to scroll back up to click on the buttons once they've selected a report because they have soo many.
Is there a way to have an html object like a div, stay visible on the page when you scroll it? But within the bounds of the container of the grid?
Thanks
Have you tried giving the buttons or their container position:fixed through CSS? Another way could be to use the onscroll Javascript event to move them or their container.
I have a dropdown that I'm looking to enlarge without effecting the text and ensuring the right hand down arrow remains at the full hieght of the element.
I've tried adding padding but this effects the right side:
Dropdown with padding http://hoctordesign.com/dropdown2.png
I've tired adding height but I can't vertically align the text:
Dropdown with height http://hoctordesign.com/dropdown.png
Anyone solved this before?
Thanks,
Denis
This is browser-dependent behaviour. Each browser applies css to form controls differently.
The best breakdown of what you can do (that I've come across) is at http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/. And the most relevant section is http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
In your case it would be better to use a custom element that acts like a select box.
Here is a nice one using jQuery
Select Box replacement
Does anyone know if IE6 ever misrenders pages with hidden divs? We currently have several divs which we display in the same space on the page, only showing one at a time and hiding all others.
The problem is that the hidden divs components (specifically option menus) sometimes show through. If the page is scrolled, removing the components from view, and then scrolled back down, the should-be-hidden components then disappear.
How do we fix this?
One hack you could use is to move your div outside the screen:
MyDiv.style.left = "-1000px";
And then put it back on its original position when you want to show it.
How are they hidden? using display:none; or visibility:hidden; ? are they absolutely positioned by any chance? IE6 has a z-Index problem and there are several hacks to deal with it.