jQWidgets Forums

jQuery UI Widgets › Forums › Lists › DropDownList › Dropdownlist appears just before

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Dropdownlist appears just before Posts
  • December 28, 2013 at 4:17 pm Dropdownlist appears just before #47038

    payneauj
    Participant

    Hello,

    I am testing jqwidgets within an ASP.Net website.

    I managed to bind the tree in a combobox and place it correctly in my form so that when I open it, the popup is just under the select area.

    But for the dropdownlist, when I open it, I can’t see it because the content div with my data is just before the body end tag. How can i see it just under the select area?

    Thanks for your help

    Jocelyn

    December 28, 2013 at 8:02 pm Dropdownlist appears just before #47043

    Peter Stoev
    Keymaster

    Hi Jocelyn,

    The DropDownList’s DropDown DIV tag is part of the document’s body tag. It does not matter whether it is added to the DOM. The DropDown is absolutely positioned and is positioned where it should be when you click the DropDownList and if the DropDownList is initialized correctly.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    December 31, 2013 at 8:31 am Dropdownlist appears just before #47094

    payneauj
    Participant

    Hello Peter,

    Thanks for your reply. I only use the default sample.

    Here is a part of the html / js: 

    <body><form runat="server"><div id="header"></div><div id="container"><div id="maincontent"><div id="side1">
		        <div id="finder">
			        <p class="head">
				       Title</p>

                    <div id="pnlHeadCriteria">
			            <p class="region disabled" runat="server" id="pSelectRegion">Select a region</p>
<select name="regions" id="regions" onchange="regions_change()" class="select1"></select>
                        <script type="text/javascript">
                            $(document).ready(function () {
                                var source = [
                                    "Affogato",
                                    "Americano",
                                    "Bicerin",
                                    "Breve",
                                    "Café Bombón",
                                    "Café au lait",
                                    "Caffé Corretto",
                                    "Café Crema",
                                    "Caffé Latte",
                                    "Caffé macchiato",
                                    "Café mélange",
                                    "Coffee milk",
                                    "Cafe mocha",
                                    "Cappuccino",
                                    "Carajillo",
                                    "Cortado",
                                    "Cuban espresso",
                                    "Espresso",
                                    "Eiskaffee",
                                    "The Flat White",
                                    "Frappuccino",
                                    "Galao",
                                    "Greek frappé coffee",
                                    "Iced Coffee",
                                    "Indian filter coffee",
                                    "Instant coffee",
                                    "Irish coffee",
                                    "Liqueur coffee"
                                ];

                                // Create a jqxDropDownList
                                $("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 1, width: '200', height: '25' });
                            });
        </script>
        <div id='jqxWidget'>
        </div>
                    </div>

                    <div id="pnlCatalogueCriteria">
                        <p class="region disabled" runat="server" id="pSelectCriteria">
                            Select one or many criteria</p>
				
                                <%--<div id="categories" style="position: absolute;z-index: 10000"></div>--%>
                                
                                <div id="dropDownButton">
                                    <div style="border: none;" id='jqxTree'>
                                    </div>
                                </div>
                                
				            <asp:Panel runat="server" ID="pnlCriterias">
					        </asp:Panel>
			            <p class="button">
				            <asp:LinkButton runat ="server" ID="btnReset" Text="Reset search" CssClass="resetSearch"  />
				            <asp:Button runat ="server" ID="btnSearch" Text="Start search" Enabled="false" CssClass="inactive" />
			            </p>
                    </div>

                   
		        </div>
	        </div></div><div id="footer"></div></div></form></body>

    Here is a screenshot of what I get.

    Thanks

    Jocelyn

    December 31, 2013 at 10:40 am Dropdownlist appears just before #47097

    Peter Stoev
    Keymaster

    Hi Jocelyn,

    It is possible that not All of the Required JavaScript/CSS Files are included. Sorry, but I cannot tell what goes wrong on your side from the provided information. You can also check whether you use jQuery 1.7+ version which is required for using jQWidgets and whether your web page has DOCTYPE on its first line.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.