Languages

Menu
Sites
Language
How to make scrollable context popup?

How to make scrollable context popup?

Edited code from winset:

<div id="navi" data-role="popup" class="ui-ctxpopup-optionmenu">
	<ul data-role="listview" >
		<li><a href="#" data-rel="back">aaa</a></li>
		<li><a href="#" data-rel="back">22343</a></li>
		<li><a href="#" data-rel="back">vvvvv</a></li>
		<li><a href="#" data-rel="back">Add to contact</a></li>
		<li><a href="#" data-rel="back">767567</a></li>
		<li><a href="#" data-rel="back">kokoko</a></li>
		<li><a href="#" data-rel="back">Call log</a></li>
		<li><a href="#" data-rel="back">pifpaf</a></li>
		<li><a href="#" data-rel="back">99999</a></li>
		<li><a href="#" data-rel="back">Music</a></li>
		<li><a href="#" data-rel="back">moon</a></li>
		<li><a href="#" data-rel="back">Settings</a></li>
	</ul>
</div>

<script>
	$( "#ctxpopup-demo" ).on( "pageshow" , function() {
		$( window ).on( "tizenhwkey" , function( e ) {
			if ( e.originalEvent.keyName === "menu" ) {
				$( "#navi" ).popup( "open" );
			}else if( e.originalEvent.keyName === "back" ) {
				window.history.back();
			}
		});
	});
</script>

 

 

List

Responses

3 Replies
Marco Buettner

have you try it be data-scroll?

 

https://developer.tizen.org/help/index.jsp?topic=%2Forg.tizen.web.appprogramming%2Fhtml%2Fguide%2Fui_guide%2Fui_framework_scrollview.htm

Lakshmi Grandhi

for list view  add css

#list_scroll{

height: 1000px;

overflow-y:auto;

}

 

<div id="navi" data-role="popup" class="ui-ctxpopup-optionmenu">
	<ul data-role="listview" id="list_scroll">
		<li><a href="#" data-rel="back">aaa</a></li>
		<li><a href="#" data-rel="back">22343</a></li>
		<li><a href="#" data-rel="back">vvvvv</a></li>
		<li><a href="#" data-rel="back">Add to contact</a></li>
		<li><a href="#" data-rel="back">767567</a></li>
		<li><a href="#" data-rel="back">kokoko</a></li>
		<li><a href="#" data-rel="back">Call log</a></li>
		<li><a href="#" data-rel="back">pifpaf</a></li>
		<li><a href="#" data-rel="back">99999</a></li>
		<li><a href="#" data-rel="back">Music</a></li>
		<li><a href="#" data-rel="back">moon</a></li>
		<li><a href="#" data-rel="back">Settings</a></li>
	</ul>
</div>

 

Sergey

Both methods are not correct.