Various MDB Elements break table cell border alignment

Topic: Various MDB Elements break table cell border alignment

Christopher Denby pro asked 6 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?

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

<p>Hi,</p>
<p>why you use class <code>.select-wrapper</code> if code for <code>.mdb-select</code> is:</p>
<pre><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></pre>
<p>When I put <code>.mdb-select</code> 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.</p>
<pre><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></pre>
<p>Best,</p>
<p>Marta</p>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Christopher Denby

Pro User 0Support score
5Questions 0Answers 0Snippets