i have a filter panel with 5-6 combo boxes ajax control tool kit..
i want this filter panel to be visible false by default.. and toggle it(show/hide) on client click using java script
however when i have my filter panel as visible = false runat=server java script does not get the object
and if i do code behind.. filterpanel.attributes.add("style",display:none)
filterpanel.attributes.add("style",visibilty:hidden)
the combo box throws a runtime error..
i've searched on the net which says.. combo box is difficult to render inside a panel.. whose default property is initially false!
The problem is that the <select> elements have to be rendered (but not necessarily visible) in order to reliably access their dimension properties.
So display: none; won't work because the elements are not rendered, and visibility: hidden; will partially work because the elements are rendered, so space is allocated for them on the page, but hidden, so that space will remain empty.
A third solution is to render the container as usual, but make it absolutely positioned outside of the browser viewport:
filterPanel.Attributes.Add("style",
"position: fixed; left: -10000px; top: -10000px;");
That way, the panel and its contents won't be visible, but the size of the <select> elements will be properly computed.
On the client side, the formula to show the panel becomes:
document.getElementById("filterPanelClientID").style.position = "static";
And to hide it again:
document.getElementById("filterPanelClientID").style.position = "fixed";
You can test a jQuery-based implementation here.
The issue is that if you set Visible="false" on a server control, it won't render any of the HTML elements, including the combo boxes. Hiding the panel using the following is AJAX friendly:
<asp:Panel id="p" runat="server" style="display:none">
</asp:Panel>
Which will render a DIV and all your drop downs, but hide them from view, allowing you to toggle the div's visibility.
Don't apply the "display: none" to the panel, only "visibility: hidden":
filterpanel.Attributes.Add("style", "visibilty: hidden");
This will hide your panel (the <div> I suppose) but reserve the required space (and therefore will allow the dimension-related properties of the corresponding DOM element to have the right values).
Of course you'll see an empty spot but you could probably resolve this issue by playing with the styles of an element (maybe by nesting the panel inside another element and by applying styles to that element instead of doing that on the panel itself).
Related
I have a custom GWT drop down component which is a combination of a text box,vertical panel which contains check boxes.
I have to placed this component inside GWT disclosure panel.When the panel is expanded and when the user clicks on the component the drop down must appear on the top of the main page content instead of expanding the disclosure panel or going below the main page.
I have tried with z index with higher values still the drop down is going inside the disclosure panel.
Is there any other CSS tricks which can help me to solve this issue.
Try adding position : relative; to the dropdown wrapper along with z-index. You might have to test different values of z-index's for it to work depending on your code.
I have a Ajax combo box whose width is set from a css class, i want to change the width of list items (the area which appears after we click the button on combo box present at right side). from the code behind.
I've set the width of listitems from css like
.ComboboxWidth ul
{
width:176px !important;
}
This works. But i've to do same thing from code behind, can anybody guide?
I have a set of report filter panels that I would like to make optionally visible, one at a time. However, when I set my panel's display attribute from 'none', to 'block', it understandably pushes other content down. How can I float the panel over the other content?
style="z-index: X; position: relative;"
where X is a number greater than all other z-indexes, i.e. 256. If you haven't specified any, 1 should be high enough.
Use absolute positioning or hide the element you want underneath it. And if you will be doing server post backs between each change, you can use the "Visible" property to control whether the panel is even rendered to html in the first place.
I have a div with runat="server" set. I have an ASP.NET button control in my page. When this button is clicked, I want to hide the div.
Is there any other option that setting visible="false"?
I can't use that, because when I do, I can't access the element in my JavaScript since it is removed from the browser. I want to show the hidden div with JavaScript at a later point.
Add a display:none CSS style to the control:
myDiv.Style.Add(HtmlTextWriterStyle.Display, "none");
Is there any other option that
changing visibility to false.I cant
use the visibility to false,because
when i change visibility,I cant access
the same in my javascript since it is
removed from the browser.
This doesn't make sense. Setting the CSS visibility to hidden will not remove the element from the DOM.
If that's the only thing your button does, I'd probably do it in javascript first to avoid the postback all together.
If that's not an option, then just add the style attribute to the div server-side with "display:none;" for the value.
I'm having a problem with FIREFOX. I have an invisible list control over a drop-down control (html 'select'). Don't mind why, but I will say that the over-layer is a pop-up that appears as part of another custom control.
Even though it's hidden, it's preventing me from clicking on the underlying drop-down control, making the underlying control seem disabled. It's not disabled though, because I can tab over to it. I just can't click on it. I know it's the overlay causing the problem, because I moved the underlying control off to the side and it works again.
Is this a bug in Firefox? This isn't like setting a translucency value; it's disabling rendering of the control altogether, so I don't think such an invisible control should be intercepting mouse events.
This behavior does not occur in Internet Explorer.
Perhaps there is some other CSS property I can set in JavaScript to toggle its mouse event capturing ability along with its visibility.
dd = document.getElementById('lstStudents');
if (dd.style.visibility == 'hidden') dd.style.visibility = 'visible'; else dd.style.visibility = 'hidden';
Update: I just read a description for the CSS visibility value "hidden" that read "The element is invisible (but still takes up space)". So I guess I'll have to set it's height to zero along with setting it's visibility to solve this problem.
change your over-layer control's z-index to, say, -1. style="z-index: -1;" This will place it underneath everything, allowing direct access to drop-down. You might have to dynamically change the z-index to bring over-layer back on top when visible.
More info
How are you hiding the element? If I remember it right, "visibility: hidden" is supposed to (rightly) work the way you describe, while "display: none" will banish rendering altogether.
If that's not the cause, can you confirm using Web Developer Toolbar that it is indeed the invisible control that is causing the problem and not another that has opacity set to 0 or something?
The way I've done popup boxes before in Firefox was with CSS properties.
z-index: 500;
display: block;
to show an element, and
z-index: -10;
display: none;
to hide it.
Now. My values for z-index are extreme, but that's just what I chose. This works for me, but my app targeted Firefox specifically; aaaaand I'm using the display property, which you stated you want to avoid.
If you're concerned about using display:block or display:hidden, I think maybe you could try to play with positioning, or sizing the element.
Either make the popup element absolutely positioned and move it offscreen when invisible, or maybe try to make it 0px width and 0px height when invisible. That's two things I would potentially explore if I still had problems. I'm not sure if I would recommend these as best solutions though.
Really consider how many instances of your popup elements will have different display values, I found in my case to be using only two types, 'none', and 'block'. Maybe manipulating the display property will be enough for you.
Hope this helps.