Filtering a table gives results in a big gap between search container and results

Wappler General Bugs
#1

Wappler Version : 4.0.7
Operating System : windows 10
Server Model: wamp mysql
Database Type: mysql
Hosting Type:

Expected behavior

Filtering results should not change the location of the company table

Actual behavior

When filtering a company table the results gets pushed down on the page.

company_search
company_search1064×649 10.9 KB

This happens when filtering

company_filter_error
company_filter_error1117×652 5.77 KB

#2

Most probably you have some align option applied that pushes the table down.
Can you post a link to your page or the page code here?

#3

Hi teodor… I`m offline… How can I post the page code here ?

#4
#5 
<!doctype html>
<html>
<head>
<base href="/system/admin/company/">
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Company paged</title>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/style.css" />
<script src="/dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />
<script src="/dmxAppConnect/dmxBootstrap5PagingGenerator/dmxBootstrap5PagingGenerator.js" defer=""></script>
<script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer=""></script>
</head>
<body is="dmx-app" id="admin_list_company_paged">

<dmx-serverconnect id="companypaged" url="/dmxConnect/api/admin/company/list_companys_paged.php" dmx-param:offset="query.offset" dmx-param:limit="companypaged.data.query_company_paged.limit" dmx-param:sort="query.sort" dmx-param:dir="query.dir" dmx-param:filter="form1.input1.value"></dmx-serverconnect>
<dmx-query-manager id="querycompanypager"></dmx-query-manager><div class="container mt-4 mb-4 col">
<div class="row">
<div class="col">
<form id="form1">
<div class="mb-3 row">
  <label for="input1" class="col-sm-2 col-form-label">Search</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="input1" name="input1" aria-describedby="input1_help" placeholder="Search Company">
    <small id="input1_help" class="form-text text-muted">Your input is very valuable.</small>
  </div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="table-responsive">
<table class="table table-hover">
  <thead>
    <tr>
      <th class="sorting" dmx-on:click="querycompanypager.set('sort','cid');querycompanypager.set('dir',querycompanypager.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="querycompanypager.data.sort=='cid' && querycompanypager.data.dir == 'asc'" dmx-class:sorting_desc="querycompanypager.data.sort=='cid' && querycompanypager.data.dir == 'desc'">ID</th>
      <th class="sorting" dmx-on:click="querycompanypager.set('sort','c_company_name');querycompanypager.set('dir',querycompanypager.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="querycompanypager.data.sort=='c_company_name' && querycompanypager.data.dir == 'asc'" dmx-class:sorting_desc="querycompanypager.data.sort=='c_company_name' && querycompanypager.data.dir == 'desc'">Company</th>
      <th class="sorting" dmx-on:click="querycompanypager.set('sort','u_first_name');querycompanypager.set('dir',querycompanypager.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="querycompanypager.data.sort=='u_first_name' && querycompanypager.data.dir == 'asc'" dmx-class:sorting_desc="querycompanypager.data.sort=='u_first_name' && querycompanypager.data.dir == 'desc'">Owner</th>
      <th class="sorting" dmx-on:click="querycompanypager.set('sort','c_mobile');querycompanypager.set('dir',querycompanypager.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="querycompanypager.data.sort=='c_mobile' && querycompanypager.data.dir == 'asc'" dmx-class:sorting_desc="querycompanypager.data.sort=='c_mobile' && querycompanypager.data.dir == 'desc'">Mobile</th>
      <th class="sorting" dmx-on:click="querycompanypager.set('sort','c_active');querycompanypager.set('dir',querycompanypager.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="querycompanypager.data.sort=='c_active' && querycompanypager.data.dir == 'asc'" dmx-class:sorting_desc="querycompanypager.data.sort=='c_active' && querycompanypager.data.dir == 'desc'">Active</th>
      <th class="sorting" dmx-on:click="querycompanypager.set('sort','null');querycompanypager.set('dir',querycompanypager.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="querycompanypager.data.sort=='null' && querycompanypager.data.dir == 'asc'" dmx-class:sorting_desc="querycompanypager.data.sort=='null' && querycompanypager.data.dir == 'desc'">Edit</th>
      <th class="sorting" dmx-on:click="querycompanypager.set('sort','null');querycompanypager.set('dir',querycompanypager.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="querycompanypager.data.sort=='null' && querycompanypager.data.dir == 'asc'" dmx-class:sorting_desc="querycompanypager.data.sort=='null' && querycompanypager.data.dir == 'desc'">Delete</th>
    </tr>
  </thead>
  <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="companypaged.data.query_company_paged.data" id="tableRepeat1" dmx-state="querycompanypager" dmx-sort="sort" dmx-order="dir">
    <tr>
      <td dmx-text="cid"></td>
      <td dmx-text="c_company_name"></td>
      <td dmx-text="u_first_name"></td>
      <td dmx-text="c_mobile"></td>
      <td dmx-text="c_active"></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</div>
<ul class="pagination" dmx-populate="companypaged.data.query_company_paged" dmx-state="querycompanypager" dmx-offset="offset" dmx-generator="bs5paging">
  <li class="page-item" dmx-class:disabled="companypaged.data.query_company_paged.page.current == 1" aria-label="First">
    <a href="javascript:void(0)" class="page-link" dmx-on:click="querycompanypager.set('offset',companypaged.data.query_company_paged.page.offset.first)"><span aria-hidden="true">&lsaquo;&lsaquo;</span></a>
  </li>
  <li class="page-item" dmx-class:disabled="companypaged.data.query_company_paged.page.current == 1" aria-label="Previous">
    <a href="javascript:void(0)" class="page-link" dmx-on:click="querycompanypager.set('offset',companypaged.data.query_company_paged.page.offset.prev)"><span aria-hidden="true">&lsaquo;</span></a>
  </li>
  <li class="page-item" dmx-class:active="title == companypaged.data.query_company_paged.page.current" dmx-class:disabled="!active" dmx-repeat="companypaged.data.query_company_paged.getServerConnectPagination(2,1,'...')">
    <a href="javascript:void(0)" class="page-link" dmx-on:click="querycompanypager.set('offset',(page-1)*companypaged.data.query_company_paged.limit)">{{title}}</a>
  </li>
  <li class="page-item" dmx-class:disabled="companypaged.data.query_company_paged.page.current ==  companypaged.data.query_company_paged.page.total" aria-label="Next">
    <a href="javascript:void(0)" class="page-link" dmx-on:click="querycompanypager.set('offset',companypaged.data.query_company_paged.page.offset.next)"><span aria-hidden="true">&rsaquo;</span></a>
  </li>
  <li class="page-item" dmx-class:disabled="companypaged.data.query_company_paged.page.current ==  companypaged.data.query_company_paged.page.total" aria-label="Last">
    <a href="javascript:void(0)" class="page-link" dmx-on:click="querycompanypager.set('offset',companypaged.data.query_company_paged.page.offset.last)"><span aria-hidden="true">&rsaquo;&rsaquo;</span></a>
  </li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
#6

Have a page copy before I added two columns in the repeat table, I want to use for buttons, and after doing that, the gap appears.
Also the two button columns now have sortable headers, which I dont want.

Best regards

#7

Not sure i understand what you mean with this, can you clarify please?

I see some wrongly used classes on your page. Example:

 <div class="container mt-4 mb-4 col">

you can’t add class col to an element having a class of container.
In bootstrap you have the following structure column > row > col your container cannot have a class of col

#8

What can I say… YOU GOT EAGLE EYES
removed the mb-4 col
and now it works. perfect - Thanks alot Teodor

1 Like
#9
#10