auto complete push down other forms fields

kdhrubo · 06 Nov 2014, 21:40

I have a form with 4 elements in the following order
autocompleTe
selectmen
Slider
button

When I do a auto search the result pushes other fields down out of view. When I select an item the other fields are back in position. Is there a style change required to prevent such push down effect. Please help

smithh032772 · 07 Nov 2014, 00:43

seems as though you want something similar to overlay or dialog that displays the list of suggestions. maybe you should study the HTML and CSS of dialog and overlay, and add some CSS that override the autocomplete HTML/CSS to be similar to overlay/dialog HTML/CSS.

kukeltje · 07 Nov 2014, 22:51

Weird answer Howard. Autocomplete should not push down other formelements.

Regarding the style, it might be that you need to remove some custom added style instead of adding

kdhrubo · 08 Nov 2014, 07:10

Yes indeed its an weird answer.
So then what to do. I dumped Primefaces and switched to JQUERY Mobile 1.4.5
This is what I did. You need a little bit of css and js trick to ensure it works in both portrait and landscape mode.

Code: Select all


<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial- scale=1"></meta
<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"></link>
<link rel="stylesheet"
	href="m/css/themes/default/jquery.mobile-1.4.5.min.css"></link>

<script src="m/js/jquery.min.js">
	
</script>

<script type="text/javascript" src="m/js/jquery.mobile-1.4.5.min.js"></script>

<style>
        .ui-autocomplete
        {
           	 position:absolute;
            cursor:default;
            z-index:4000 !important;
          
          
          	/* Fixed height */
          	padding: 1px;
			max-height: 250px;
			overflow: auto;
          
        }
    </style>

<body>
	<div data-role="page" id="homePage"
		data-title="My Title">
		<div data-role="header">
			<h1>My Header</h1>
		</div>

		<div data-role="content">
			<form>
				<input type="text" data-type="search" id="filterable-input" >
			</form>
			
			<div id="app"></div>
			
			<div data-role="controlgroup" data-filter="true" data-filter-reveal="true" class="ui-autocomplete" data-filter-theme="a"
				data-input="#filterable-input">
				<label for="pizza"> Pizza <input type="radio" id="pizza">
				</label> <label for="goulash"> Goulash <input type="radio"
					id="goulash">
				</label> <label for="falafel"> Falafel <input type="radio"
					id="falafel">
				</label> <label for="spring-rolls"> Spring Rolls <input
					type="radio" id="spring-rolls">
				</label>
				<label for="spring-rolls"> Spring Rolls <input
					type="radio" id="spring-rolls">
				</label>
				<label for="spring-rolls"> Spring Rolls <input
					type="radio" id="spring-rolls">
				</label>
				<label for="spring-rolls"> Spring Rolls <input
					type="radio" id="spring-rolls">
				</label>
				
				
			</div>

			<input type="text" name="text-1" id="text-1" value="" >


		</div>



	</div>

	<script>
	
		$(function() {
		
		    console.log('ready!');
		    //$( ".ui-autocomplete" )
		    
		    width =  $( '#app' ).width();
		    
		    console.log('width = ' + width);
		    
		    $( ".ui-autocomplete" ).width(width);
		    		
		    
		
		});

		
		
		
		
	</script>


</body>
</html>

I am sure others who are faced with same issue can use it. I just used a div to trick the width and css to ensure its not pushing down other form fields.

smithh032772 · 08 Nov 2014, 08:55

kukeltje wrote:Autocomplete should not push down other formelements.

Really, Ronald? It's PrimeFaces Mobile design/implementation to push down other form elements. See below.

kdhrubo wrote:So then what to do. I dumped Primefaces and switched to JQUERY Mobile 1.4.5
This is what I did. You need a little bit of css and js trick to ensure it works in both portrait and landscape mode.

...

I am sure others who are faced with same issue can use it. I just used a div to trick the width and css to ensure its not pushing down other form fields.

I like PrimeFaces Mobile's implementation of autocomplete. Thanks for sharing.

kdhrubo · 08 Nov 2014, 17:35

Yes indeed it does. What are you trying to prove by the screenshot my friend.
Check where the second text field is before and after that drop down comes up. It pushes the second text box down.

kukeltje · 08 Nov 2014, 22:32

Jumpy userinterfaces are so 2001. The fact that it does, does not mean it is correct... I know for sure our customers would not like it. The normal autocomplete works fine on a mobile device...

kdhrubo · 09 Nov 2014, 01:51

I have shared the trick in js and css to resolve the up and down swing

groeten ... dhrubo

kukeltje · 10 Nov 2014, 21:34

but your 'solution' does not have any PF related things in it.

smithh032772 · 10 Nov 2014, 21:48

kukeltje wrote:Jumpy userinterfaces are so 2001. The fact that it does, does not mean it is correct...

p:panel collapsed/non-collapsed causes jumpy pages, too. Is p:panel collapsed/non-collapsed 'so 2001', too?

p:autocomplete (html basic and primefaces mobile render kits)
1. enduser do something on browser page
2. autocomplete component does something in response to-and-for the enduser

p:panel collapsed/non-collapsed does the same

auto complete push down other forms fields

Who is online