Various MDB Elements break table cell border alignment

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Various MDB Elements break table cell border alignment

Christopher Denby pro asked 7 years ago

If I have an MDBSelect in a table cell, I find that the height calculation of the mdb-select object pushes the bottom border for that one cell lower than it should be. I'll explain: 
Start your code here
<table>
   <tbody>
      <tr>
         <td>Here is a title</td>
         <td><div class="select-wrapper mdb-select".... etc></div></td>
      </tr>
   </tbody>
</table>
In this case, the mdb-select causes the second cell's bottom border to push a pixel or two lower than the first cell's bottom border and it looks really messy. I have found that if I manually set the height of the .select-wrapper .mdb-select to 100 px or any value, really, the alignment fixes. Another workaround I've found is to set .select-wrapper input.select-dropdown height to auto - that seems to fix it as well. But I'm concerned about making such a sweeping change to mdbootstrap behaviour. Do you have another suggestion for this?

Marta Szymanska staff pro premium answered 7 years ago

Hi,

why you use class .select-wrapper if code for .mdb-select is:

<select class="mdb-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Example label</label>

When I put .mdb-select on the table like here below, I don't see any problem. Could you tell me more about your issue and it's best to provide the demo.

<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>
<select class="mdb-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Example label</label>
</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

Best,

Marta

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Christopher Denby
Pro User
0Support score
5Questions 0Answers
0Snippets likes 0Snippets