Help with styling autocomplete

Wappler General Need Help
1

Hi All

Thought i would give a shout out to all you great folks to help me with something i just cant get right

I decided to change my old <datalist> selector for an autocomplete on a site i did some time ago (before Wappler had an autocomplete component). It was the first major Wappler project i did so the technique is not always how I would do things now but then again Wappler is a very different product now compared with 16 months ago.

I have a basic form with an autocomplete.

Functionally it works, i type the list appears filtered on the text
There my happiness ends

Firstly the options are at the left of the screen, not below the selector

image
image788×277 121 KB

Only the selections which are convert the current container show, this picture above should have a lot more options). Is this normal? Do i need to remaster the site into one container and multiple rows?

Lastly the options are centred, i want them left aligned.

Also I cant work out how to style the box.I want it bigger, bigger text and with a placeholder (the setting in my code seems to be ignored)

Any pointers as to styling with CSS hugely appreciated

I have tried code I found via google based in Bootstrap styling for jQuery UI autocomplete but it doesn’t seem to work (or i cant work out how to make it work)

Here is the container with form contents.

<div class="h-100 container-fluid" style="background-size: cover; background-image: url(&quot;img/banner2800_new.jpg&quot;); display: block; overflow: hidden; height: 100%;" id="cbanner">
		<div class="row">
			<div class="col text-center">
				<h3 class="front-page-title-top  text-center text-white text-capitalize mt-2" style="text-align: center;" id="t_lgxl">Free Service and £50 Reward if you book Via us</h3>
				<form id="form1" action="results.php">
					<div class-="form-group">
						<input id="autocomplete" name="searchcity" is="dmx-autocomplete" dmx-bind:data="conn_searchlist.data.qry_uni_list_fp" optiontext="City+' : '+UniversityName" optionvalue="City"
							dmx-bind:placeholder="Where would you like to stay?"></div>
					<button class="btn btn-primary btn-sm pb-1" type="submit" dmx-bs-tooltip="'Search on a City or University'">Search</button>
				</form>
				<a href="#" class="btn btn-warning btn-sm pb-1" dmx-bind:href="'signup.php'" dmx-bind:popover-title="'Advanced Search'"
					dmx-bs-tooltip="'An Advanced Search requires Registration and allows you to enter your requirements for a customised portfolio, see full details of halls and Book direct from our site to quality for your £50 reward.'"
					dmx-hide="conn_get_logged_in_user.data.qry_get_user.hasItems()" data-placement="left">Advanced</a>
				<h5 class="front-page-title-bottom  text-center text-white mt-2 mb-2">100,000 Rooms • 400 Residences • 50 UK Cities • Additional Private Housing Service • Personal Consultant</h5>
			</div>
		</div>

No errors visible in code view

I am probably missing something simple but I have hit the point where i have gone code blind…

2

Hello Brian,
Indeed there are some styling issues on your page. I'll try to explain them one by one, so you can improve your site layout.

The Bootstrap 4 inputs/form groups, by default, take 100% width of the parent element. The dropdown list is always left aligned as the Bootstrap 4 input always takes the width of its parent. You are not using a bootstrap 4 input here, it lacks the form-control class added when you add the input using the components insert menu in design view/app connect tree and this causes the issue.

You are also using a text-center class to center your input which is not really the best practice. Instead of doing this - use the column sizes per different screen sizes to center your input/autocomplete element.

Example:

<div class="row">
	<div class="col-12 offset-sm-1 col-sm-10 col-md-6 offset-md-3 col-xl-4 offset-xl-4">
         <input type="text" class="form-control" id="input1" name="input1" aria-describedby="input1_help" placeholder="Enter some text" is="dmx-autocomplete">
	</div>
</div>

The text-center class you are using on the column also affects the dropdown list styling.

The input size can be changed in the App Connect properties:

Screenshot_25
Screenshot_251354×776 122 KB

but can also be changed in custom CSS:

Screenshot_26
Screenshot_26971×776 325 KB

The dropdown list appearance can be edited via CSS as well, and the styles can be found here:
dmxAppConnect/dmxAutocomplete/dmxAutocomplete.css so you can copy them to your custom CSS and override them.

3

Wow, thanks Teodor for the comprehensive reply, i really should have thought of looking into the dmxAppConnect/dmxAutocomplete folder, the CSS i was trying was very similar but i was referencing it as autocomplete rather than dmx-autocomplete, i quick look in the folder would have told me that.

I will take on board your recommendations to improve my technique, huge thanks!

1 Like
4

In my applications it seems the dropdown list is always smaller then all it's parents (input fiels, form row, form, container) and adjusted to the width of the longest result with a maximum.

How can the dropdown be set to be of the same width as the input field always?