Modal dialogs and <select> - Essential Objects, Inc. Support Forum

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Modal dialogs and <select>

Modal dialogs and <select>

Options

Previous Topic · Next Topic

patingamon

Posted: Wednesday, December 12, 2007 10:18:58 AM

Rank: Member
Groups: Member

Joined: 9/6/2007
Posts: 29

I changed one of the sample dialog ascx files to have the following code from:

Code: HTML/ASPX

Copy

</eo:Dialog>
<p>
	<a href="javascript:eo_GetObject('Dialog1').show(false);">Show Modeless</a>
</p>
<p>
	<a href="javascript:eo_GetObject('Dialog1').show(true);">Show Modal</a>
</p>

to:

Code: HTML/ASPX

Copy

</eo:Dialog>
<p>
	<a href="javascript:eo_GetObject('Dialog1').show(false);">Show Modeless</a>
</p>
<p>
	<a href="javascript:eo_GetObject('Dialog1').show(true);">Show Modal</a>
</p>
<select id="grade_dropdown">
	<option>-Please Select-</option>
	<option>Horrible</option>
	<option>Poor</option>
	<option>Fair</option>
	<option>Good</option>
	<option>Excellent</option>
</select>

Then I ran the code and chose Show Modal

Though the rest of the screen acted like I had a modal dialog, I could still select from the <select> list. This is an issue as we have <asp:ListBox> and <select>'s on our page.

Sorry to be such a pain pointing out all these issues. We are trying to use things in a certain way, and doing so seems to push these controls to the extremes.

I do appreciate the fast turn around time and responsiveness of your support. My biggest concern in using 3rd party tools versus rolling your own is how quickly issues are resolved. Your turn around time alleviates that concern Applause

eo_support

Posted: Wednesday, December 12, 2007 12:05:47 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,193

Hi,

Z-Order for select element has always been an issue for IE. We have taken extra steps to make sure that if the dialog is directly on top of the select element, it won't show through the dialog. However we have not been able to completely block user input from it, as you have noticed. We will look further and see if we can find a workaround for it.

Don't worry about posting so many questions. We view support as a very important matter, not to mention that your inputs are very valuable to us. So please feel free to post if you have any more questions.

Thanks

eo_support

Posted: Wednesday, December 12, 2007 12:36:49 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,193

Hi,

Try to set the dialog's BackShadeColor and BackShadeOpacity. That should be able to hide the select for you.

Thanks

balu

Posted: Friday, September 5, 2008 3:32:59 PM

Rank: Member
Groups: Member

Joined: 5/22/2008
Posts: 18

Hi

I use this code to hide and show the select box when the model dialog shows. but this is a problem only in ie-6 and in ie-7 that is not a issue.

Code: JavaScript

Copy

function hideSelect() {
    var selectBox = document.getElementsByTagName("select")
    for (i = 0; i < selectBox.length; i++) {
        var dropDown = selectBox[i]
        var selectParent = dropDown.parentNode
        var _tempTextBox = document.getElementById("_tempBZ" + dropDown.id)
        if (!_tempTextBox) {
            var strText = "&lt;input  type='text' value='" + dropDown.options[dropDown.selectedIndex].text;
            strText += "' style='z-index:0;position:relative;"
            strText += ";width:" + dropDown.offsetWidth + ";' id='_tempBZ" + dropDown.id + "'&gt;";
            dropDown.style.display = "none"
            selectParent.innerHTML += strText;
        }
        else {
            _tempTextBox.value = dropDown.options[dropDown.selectedIndex].text;
            _tempTextBox.style.display = "inline-Block"
            dropDown.style.display = "none"
        }
        
    }
}

function showSelect() {
    var selectBox = document.getElementsByTagName("select")
    for (i = 0; i < selectBox.length; i++) {
        var dropDown = selectBox[i]
        var selectParent = dropDown.parentNode
        var _tempTextBox = document.getElementById("_tempBZ" + dropDown.id)
        if (_tempTextBox) {
            _tempTextBox.style.display = "none"
        }
        dropDown.style.display = ""
    }
}

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Message