YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar alphabravo14 asked

Yootheme Pro table issue, extra column using secondary column style

Hi, have created a table using html and UIKIT style classes. As you can see from the image no matter what I do the table creates an extra column and fills it with the secondary style background. I have added the code below for your review. Am I configuring wrong or is it a bug?

Image

<table class="uk-text-small uk-table-small uk-table-striped">
<thead>
<tr>
<th>FEATURES</th>
<th>STANDARD EDITION</th>
<th>PRO EDITION</th>
<th>ARCADE EDITION</th>
</tr>
</thead>
<tbody>
<tr>
<td>OS WIN7/8.1</td>
<td>EOL</td>
<td></td>
<td></td>
</tr>
<tr>
<td>OS WIN-10</td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
</tr>
<tr>
<td>WARP DESKTOP</td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
</tr>
<tr>
<td>DX9,10,11</td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
</tr>
<tr>
<td>OPEN GL V2.0 and above
</td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
</tr>
<tr>
<td>MIRROR MODE</td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
</tr>
<tr>
<td>SECONDARY UNWARPED MONITOR</td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
</tr>
<tr>
<td>UNLIMITED UNWARPED EXTRA MONITORS</td>
<td></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td></td>
</tr>
<tr>
<td>MANUAL CALIBRATION</td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
</tr>
<tr>
<td>AUTO CAMERA CALIBRATION</td>
<td></td>
<td><span uk-icon="icon: check; ratio: 1"></span></td>
<td></td>
</tr>
</tbody>
</table>

  • Joomla
  • UIkit
  • YOOtheme Pro

Edited

4 Answers

1

Avatar thomas.p Support Online answered

Thank you. There's no extra row or padding, the table does simply not fill the whole width.

You created a row with a 50-50 / Halves Layout. The second column of that row contains your HTML element. This column has the secondary style which is responsible for the background color.

Now as your Table doesn't fit the whole column, the part on the right which is left 'empty' will be covered fully with that background color.

I suggest adding the class uk-width-1-1 to your table to make it fit its container.

<table class="uk-text-small uk-table-small uk-table-striped uk-width-1-1">

Kind regards
Thomas

0

Avatar thomas.p Support Online answered

Hi alphabravo14,

I just tried your code in an html element and it seemed to work fine. Are you sure this is an extra column as it looks like padding on the screenshot?

Please provide a link to your site and access credentials if necessary, so that I can have a first hand look.

Thank you
Thomas

0

Avatar alphabravo14 answered

Hi, done (see hidden) and I think you may be right its adding extra padding when striped is selected however it is not extended the white strip accordingly.

0

Avatar alphabravo14 answered

Thanks Thomas !! Been driving me wild for over a week and such a simple solution. All fixed.

Know someone who can answer? Share a link to this question via email or twitter.