I’ve got an autocomplete working correctly except for the fact that the position of the results is not aligned with the text input. How might I get it to line up correctly?
Hi David,
I think it has something to do with your page structure. Possible to paste your code here?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome to Margin!</title>
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="dmxAppConnect/dmxNotifications/dmxNotifications.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="dmxAppConnect/dmxNotifications/dmxNotifications.js" defer=""></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
<script src="dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
<link rel="stylesheet" href="dmxAppConnect/dmxValidator/dmxValidator.css">
<script src="dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>
<link rel="stylesheet" href="dmxAppConnect/dmxBootstrap4TableGenerator/dmxBootstrap4TableGenerator.css">
<script src="dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
<script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
<script src="dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>
<link rel="stylesheet" href="dmxAppConnect/dmxAutocomplete/dmxAutocomplete.css">
<script src="dmxAppConnect/dmxAutocomplete/dmxAutocomplete.js" defer=""></script>
<script src="dmxAppConnect/dmxTyped/dmxTyped.js" defer=""></script>
<script src="dmxAppConnect/dmxTyped/typed.min.js" defer=""></script>
<script src="dmxAppConnect/dmxBootstrap4Popovers/dmxBootstrap4Popovers.js" defer=""></script>
<script src="dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer=""></script>
</head>
<body is="dmx-app" id="index">
<dmx-serverconnect id="autocomplete" url="dmxConnect/api/Get%20Margins/getmargins.php"></dmx-serverconnect>
<dmx-serverconnect id="serverconnect2" url="dmxConnect/api/Get%20Margins/nested.php"></dmx-serverconnect>
<dmx-serverconnect id="serverconnect1" url="dmxConnect/api/get_followers.php" dmx-param:new_id="recently_added[0].id_margin"></dmx-serverconnect>
<dmx-serverconnect id="get_grouped_margins" url="dmxConnect/api/Get%20Margins/getmargins_grouped.php"></dmx-serverconnect>
<dmx-serverconnect id="get_recently_created" url="dmxConnect/api/Get%20Margins/recently_created.php"></dmx-serverconnect>
<div class="modal" id="create_margin_modal" is="dmx-bs4-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header1">
<h5 class="modal-title text-center mt-4">CREATE</h5>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col mt-3">
<form id="create_margin_form" method="post" action="dmxConnect/api/create_new_magin.php" is="dmx-serverconnect-form"
dmx-on:success="notifies1.success('Success');create_margin_modal.create_margin_form.reset();getmargins.load({});create_margin_modal.hide()" dmx-on:error="notifies1.warning('Error')">
<div class="form-group col-auto" is="dmx-input-group">
<label for="input1" class="col-form-label-sm mb-n2">NAME</label>
<input type="text" class="form-control" id="input1" name="name" aria-describedby="input1_help" placeholder="Product or Service Name">
</div>
<div class="form-group col-auto mb-n2">
<label for="input2" class="col-form-label-sm mb-n2">BUDGET</label>
<input type="number" class="form-control" id="input2" name="budget" aria-describedby="input1_help" placeholder="e.g. $100">
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer1">
<button type="submit" class="button1 small" dmx-on:click="create_margin_modal.create_margin_form.submit()">CREATE</button>
</div>
</div>
</div>
</div>
<dmx-serverconnect id="getmargins" url="dmxConnect/api/Get%20Margins/getmargins.php" dmx-param:sort="query.sort" dmx-param:dir="query.dir"></dmx-serverconnect>
<dmx-serverconnect id="getcategories" url="dmxConnect/api/getcategories.php"></dmx-serverconnect>
<dmx-serverconnect id="getpromotions" url="dmxConnect/api/getpromotions.php"></dmx-serverconnect>
<dmx-notifications id="notifies1"></dmx-notifications>
</div>
</div>
<dmx-session-manager id="userSecurityId"></dmx-session-manager>
<dmx-serverconnect id="userDetails" url="dmxConnect/api/Security/userDetails.php"></dmx-serverconnect>
<dmx-serverconnect id="logout" url="dmxConnect/api/Security/logOut.php" noload="noload" onsuccess="window.location.reload()"></dmx-serverconnect>
<div is="dmx-browser" id="browser1"></div>
<div class="modal" id="login_modal" is="dmx-bs4-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="login_form" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/Security/login.php" dmx-on:success="login_modal.hide();login_modal.login_form.reset()"
dmx-on:unauthorized="browser1.alert('Wrong login credentials')" dmx-on:error="notifies1.warning('Something went wrong')" onsuccess="window.location.reload()">
<div class="form-group" id="username_login_group">
<label for="input2" id="username_label">Username</label>
<input id="login_username_input" name="username" type="text" class="form-control" placeholder="Username"><small id="input2_help" class="form-text text-muted">Your input is very valuable.</small>
</div>
<div class="form-group" id="password_login_group">
<label for="input2" id="password_label">Password</label>
<input id="login_password_input" name="password" type="password" class="form-control mt-2" placeholder="Password"><small id="input2_help" class="form-text text-muted">Your input is very valuable.</small>
</div>
<div class="form-group col text-right">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" id="remember_checkbox" name="remember">
<label class="form-check-label" for="remember_checkbox" id="remember_login_text">Remember</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" dmx-on:click="login_modal.login_form.submit()">Save changes</button>
</div>
</div>
</div>
</div>
<dmx-serverconnect id="getusers" url="dmxConnect/api/getusers.php"></dmx-serverconnect>
<dmx-notifications id="notifies2"></dmx-notifications>
<div class="modal" id="register_modal" is="dmx-bs4-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Register</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="register_form" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/user_register.php" dmx-on:error="notifies2.warning('Error')"
dmx-on:success="notifies2.success('Success');register_modal.register_form.reset();register_modal.hide()"><input id="firstname_input" name="first_name" type="text" class="form-control mb-0" required="" placeholder="First Name">
<input id="lastname_input" name="last_name" type="text" class="form-control mt-2 mb-2" placeholder="Last Name" required=""><input id="email_input" name="email" type="email" class="form-control mb-2" required=""
placeholder="Enter your email">
<input id="username_input" name="username" type="text" class="form-control" placeholder="choose a username">
<input id="password_input" name="password" type="password" class="form-control mt-2" placeholder="create a password"></form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" dmx-on:click="register_modal.register_form.submit()">Save changes</button>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light sticky-top flex-row justify-content-start bg-light mt-0 mb-4 pt-3 pb-3">
<a class="navbar-brand ml-5 mr-4" href="#">[M]</a>
<p class="text-left mb-n1 mr-4" dmx-bs-popover="" dmx-bind:popover-title="'Text'" data-trigger="hover" data-placement="bottom"><i class="fa fa-th"></i> Categories</p>
<input id="autocomplete1" name="autocomplete1" is="dmx-autocomplete" dmx-bind:data="autocomplete.data.query1" optiontext="name" optionvalue="id_margin">
<p class="mt-0 mb-0 ml-5 mr-0">Hello {{userDetails.data.query1[0].first_name}}!</p>
<button class="btn btn-sm align-self-center ml-auto mr-2 pt-0 pb-0 pl-0 pr-0" id="new_margin_btn" dmx-on:click="create_margin_modal.show()"><i class="fa fa-plus fa-2x"></i>
</button><button class="btn btn-primary mr-2 align-self-end order-12" id="register_btn" dmx-on:click="register_modal.show();register_modal.register_form.firstname_input.focus()" dmx-hide="userDetails.data.query1">Register</button><button
class="btn btn-primary align-self-end mr-4 order-last" id="login_btn" dmx-on:click="login_modal.show();login_modal.login_form.login_username_input.focus()" dmx-hide="userDetails.data.query1">Login</button><button
class="btn mr-2 order-last align-self-end" id="logout_btn" dmx-on:click="logout.load({})" dmx-show="userDetails.data.query1">Logout</button>
</nav>
<div class="container mt-5 mb-5" dmx-hide="userDetails.data.query1[0].id_user">
<div class="row justify-content-center text-center mb-5">
<div class="align-self-center col-md-7">
<h1 class="display-3 font-weight-bolder">Get. Your. Price</h1>
<p class="text-h3 text-secondary">Shop thousands of products & price combinations to buy under budget</p>
<h5 class="text-primary hover-underline" dmx-on:click="register.show()">Create your account</h5>
</div>
<div class="col align-self-center"><img src="assets/img/undraw_super_thank_you_obwk%20%281%29.svg" class="align-self-center w-75 h-75"></div>
</div>
<section>
<div class="container wappler-block pt-3 pb-3" dmx-hide="userDetails.data.query1">
<div class="row mb-5">
<div class="col align-self-center text-center">
<h4>How does Margin work?</h4>
<p class="text-secondary">Margin is a marketplace that finds you offers on products within your price limits</p>
</div>
</div>
<div class="row pt-4 bg-light">
<div class="col-12 col-md-6 mb-4 col-lg-3">
<h5 class="text-center">1. Choose a Product</h5>
<p class="text-center text-secondary">1. Browse Margin for products within your price range or add your own</p>
</div>
<div class="col-12 col-md-6 mb-4 col-lg-3">
<h5 class="text-center">2. Follow a Price</h5>
<p class="text-secondary text-center">2. Choose a max price to follow or set your own</p>
</div>
<div class="col-12 col-md-6 mb-4 col-lg-3">
<h5 class="text-center">3. Review Offers</h5>
<p class="text-center text-secondary">3. We'll find you relevant offers within your price range</p>
</div>
<div class="col-12 col-md-6 mb-4 col-lg-3">
<h5 class="text-center">4. Purchase</h5>
<p class="text-center text-secondary">4. Purchase the offers that fit your quality and price criteria</p>
</div>
</div>
</div>
</section>
</div>
<div class="container">
<div class="row">
<div class="col" id="main">
<section id="trending">
<div class="row">
<div class="col d-flex h-25">
<p class="h3 mt-0 mb-0 mr-0">Trending</p>
<p class="ml-auto m-0 small see-more align-self-end text-center">see more <i class="fa-arrow-right fa-lg fa arrow-icon"></i></p>
</div>
</div>
<hr />
<div class="row mt-0 align-items-start justify-content-start" is="dmx-repeat" id="trending" dmx-bind:repeat="getmargins.data.query1">
<div class="rounded border-primary col-4 card1 mb-1 pt-3 pb-1 pl-0 pr-1 col-with-hover">
<img class="w-25 float-left ml-3 rounded" src="assets/img/avatar-10.jpg">
<div class="row">
<div class="col">
<div class="d-flex justify-content-between h-25 align-items-center">
<p class="h6 text-capitalize mt-1 mb-0 ml-0 mr-0">{{name}}</p>
<h6 class="mb-0 ml-0 mr-0 text-body align-self-end">${{budget}}</h6>
</div>
<div class="d-flex w-auto h-25">
<p class="small" wappler-command="editContent">By {{first_name}}</p>
</div>
<div class="d-flex h-25">
<p class="w-25 small mr-1 style22"><i class="fa fa-users style21"> 25</i></p>
<p class="w-25 ml-1 small"><i class="fa fa-comments style21"> 25</i></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="popular_categories" class="mt-3">
<div class="row">
<div class="col d-flex h-25">
<p class="h3 m-0 align-self-start">Popular Categories</p>
<p class="ml-auto m-0 small align-self-end">See more <i class="fa-arrow-right fa-lg fa arrow-icon"></i></p>
</div>
</div>
<hr />
<div class="row mt-4" id="popular_margins">
<div class="col-12">
<div class="row justify-content-start align-items-start" is="dmx-repeat" id="popular_margins" dmx-bind:repeat="getcategories.data.query1">
<div class="lg-5 col-3 ">
<img src="assets/img/architecture-3.jpg" class="align-self-center img-fluid">
<p class="text-center align-self-center">{{cat_name}}</p>
</div>
</div>
</div>
</div>
</section>
<section id="recently_added" class="mt-3">
<div class="row">
<div class="col d-flex h-25">
<p class="h3 mt-0 mb-0 mr-0">Recently Added</p>
<p class="ml-auto m-0 small align-self-end">see more <i class="fa-arrow-right fa-lg fa arrow-icon"></i></p>
</div>
</div>
<hr />
</section>
<section id="popular_prices" class="mt-3">
<div class="row">
<div class="col d-flex h-25">
<p class="h3 m-0 align-self-start">Popular Price Points</p>
<p class="ml-auto m-0 small align-self-end">See more <i class="fa-arrow-right fa-lg fa arrow-icon"></i></p>
</div>
</div>
<hr />
<div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="get_grouped_margins.data.grouped">
<div class="col-4 h-100">
<div class="mh-100 w-100 justify-content-center d-flex1 align-items-center">
<p class="text-center m0 font-weight-bold">${{$key}}</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row" is="dmx-repeat" id="repeat2" dmx-bind:repeat="serverconnect2.data.repeat1">
<div class="col-3">
<p>{{query2[0].name}}</p>
</div>
</div>
</div>
</section>
</div>
<div class="col-4" id="aside">
<div class="row">
<div class="col ml-5">
<div class="form-group">
<label for="input3" class="h5 m-0">Stay in Touch</label>
<input type="text" class="form-control mt-2" id="input3" name="input3" aria-describedby="input3_help" placeholder="Your email"><button class="btn btn-block btn-primary btn-sm mt-2" type="submit" style="">Subscribe</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrPreformatted textQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Try changing that line to:
<div class="form-group">
<input id="autocomplete1" name="autocomplete1" is="dmx-autocomplete" dmx-bind:data="autocomplete.data.query1" optiontext="name" optionvalue="id_margin">
</div>
1 Like
No problem, good luck with your project!
1 Like
Glad that issue is sorted out, I have to admit I battled to follow the code, as there seems to be 2 closing div tags that seem to have no purpose, unless I am just reading it a little wrong.
line 80 and 81 seem to be the 2 stragglers, if it is incorrect, them possibly fix it anyway or later you may have other layout related issues if something closes before it is meant to.
<dmx-notifications id="notifies1"></dmx-notifications>
</div>
</div>
<dmx-session-manager id="userSecurityId"></dmx-session-manager>
Line 326, 328, 329, 330 also have a batch of closing div tags that seem to have no purpose?
1 Like
Thanks Paul! I’m not surprised. I started the project when I didn’t understand how layouts, html, css, bs4 worked at all and I’m sure there are some holdover mistakes. I’m still not very proficient in coding but learning lots every day 
2 Likes
Don’t worry I still feel that way, hahahaha.
Just a trick that i use, whenever i have something that is layout related, i copy all the code and paste it into BBEdit, then under the view menu, there is a submenu saying “Collapse folds below” and off that menu, i choose 2.
This keeps the head and body tag open and collapses everything else, which very quickly shows you if there are areas with straggler tags, those can cause untold layout issues.
1 Like
Opening Wappler code view will show you errors if there are any unmatched/unclosed tags.
1 Like
As @Teodor says, the code editor in Wappler will show errors, but I sometimes use the same method as you to track down issues. In the past I pasted the code into a text editor for various reasons, but I rarely do that now. I don’t use BBEdit, but I would have thought the new editor in Wappler has enough folding options to keep an origami enthusiast happy:
All have shortcuts but some seem to conflict with other shortcuts. But the most useful - eg Fold/Unfold: Ctrl+Shift [ / ] - work fine.
3 Likes
Thanks Tom, to be honest i had never even looked in there, this will certainly save me from much back and forth in my text editor, so so so happy, thank you again.
I am busy playing with all the other bits and pieces in there right now.
The reason I personally can not automatically rely on syntax highlighting errors is due to my own bad coding habits, sometimes i may have an extra closing div that looks like a remnant of something wrong but because of an include that comes before it, that might have a conditional region where one needs an extra close an the other doesn’t etc. I often land up with Dreamweaver or Espresso or Wappler telling me my document has errors, but are not really errors, just design flaws that i have decided to keep instead of fixing properly due to the hassle involved.
Anyway, to finish up, it looks like the only reason i would still need to use BBEdit is for it’s very powerful Grep commands which I can do some simpler ones directly in Wappler, however BBEdit was made as a text editor only, and so some functions are just not in Wappler, in fact I am surprised by just how many are already in Wappler.
1 Like
Yes, I noticed that. And if I highlight a div it also highlights the corresponding opening/closing one too! Nice touch!
1 Like
I’m glad that was useful. I expect it’s obvious, but I should have mentioned that of course you don’t need to use shortcuts to fold sections - but perhaps it’s not very obvious as the feature is hidden until you hover over the margin area (unless this setting is changed in Options):
2 Likes
Thanks Tom, I did know about that one, and often use it just to move code out the way so i can see how line 50 was written when i am doing something on line 600 or whatever.
I do not think i could live without code folding.