jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by Morpheus1986 11 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Listbox item not moving on div scrolling – IE7 Posts

September 12, 2013 at 3:36 pm Listbox item not moving on div scrolling – IE7 #28866

Morpheus1986

Participant

Hi guys,
I encountered a problem (only in IE7) when I have a div with scrollbar that contains a listbox.
The results that I see is that when I scroll the div the items of the listbox don’t move and they stay in the same position; the only thing that is moving is the container of the listbox.
When I interact with the items they are correctly positioned inside the list container.
Below I write the code that I modified from the Default Functionality example to demonstrate this problem.

Thank you very much in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
    <meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items."/>
    <title id='Description'>The jqxListBox represents a widget that contains a list of selectable
        items. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			var theme = getDemoTheme();
			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 jqxListBox
			$("#jqxWidget").jqxListBox({ selectedIndex: 3, source: source, width: 200, height: 250, theme: theme, allowDrag: true, allowDrop: true });
		});
	</script>
</head>
<body>
		<div id='content' style="overflow: auto">
			<div style="width: 5000px; ">
				<div id='jqxWidget'>
				</div>
			</div>
		</div>
</body>
</html>

September 12, 2013 at 5:40 pm Listbox item not moving on div scrolling – IE7 #28875

Peter Stoev

Keymaster

Hi Morpheus1986,

That is more a problem of the browser than in the widget. The solution is simple and you can find it below:

	<div id='content' >
			<div style="width: 5000px; ">
				<div  id='jqxWidget'>
				</div>
			</div>
		</div>

Best Regards,
Peter Stoev

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

September 13, 2013 at 12:39 pm Listbox item not moving on div scrolling – IE7 #28946

Morpheus1986

Participant

Thank you Peter,
I was able to solve this issue by putting position: relative to the div with id content so the widget use the reference of the father and it will works correctly if we need that the scrollbar has to be in the div and not in the window.
Below there is the change that works.

Thank you very much.

	<div id='content' style="overflow: auto; position: relative;">
		<div style="width: 5000px; ">
			<div id='jqxWidget'>
			</div>
		</div>
	</div>

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.