Ksk Achari Ksk Achari - 1 month ago 10
jQuery Question

Tabs alignment in jQuery UI Tabs

I am applying tabs functionality for a div and I am getting the layout like this(See the attachment in My Tabs).Anyone can help me? Thanks in advance.

My Tabs

This is my HTML code:

<div id="tabs">
<ul>
<li><a href="#tabs1" id="lan1" class="lantabs">Dutch</a></li>
<li><a href="#tabs2" id="lan2" class="lantabs">English</a></li>
<li><a href="#tabs3" id="lan3" class="lantabs">German</a></li>
</ul>
<div id="tabs1">
<table style="margin:10px; border: 1px solid #0498BE;background-color: #FFFEFE; " class="excolltable" align="left" width="100%" cellpadding="10">
<tbody>
<tr>
<td style="font-size: 14px;" align="center" width="40%"><b>Exclude List</b></td>
<td style="font-size: 14px;" align="center" width="60%"><b>Consider as one Word</b></td>
</tr>
<tr>
<td style="font-size: 12px;" align="left" width="40%">als, is, te, een, mee, met, de, om, in, aan, het, je, zijn, en, van, op, worden, ook, voor, deze, ik, we, die, bij, over, er, heeft, haar, dit, dat, zo, hem, zijn, maar, mij, was, heel, zeer, heb, door, niet, kan, mijn, had, zij, hij, ga, of, nog, zou, dus, kon, wel, n, v, t, ze, ben, wordt, iets, naar, kunnen, n, v, t, per, dan, daarna, via, doen, gaat, wilde, hier, u, moet, krijg, gestuurd, mag, zegt, gaf, erg, al, hoe, anders, bedoel, wat, wij, na, daar, tot, m, gehad, meer, nu, uw, nee, meeus, kroller, zie, zal, ligt, me, e, weet, af, omdat, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, geeft, wil, staat, uit, hebben, andere, gaan, ons, veel, doe, onze, vind, toch, Obvion, alleen, geen, toe, dingen, denkt, doet, weer, ilse, westerveld, boer, brenda, bruijn, debeij, eddy, ramon, gerry, florius, abn, amro, aegon, ing, asr, syntrus, argenta, regiobank, daarnaast, hetgeen, aangaf, ongeveer, am, acc, accountmanger, accountmanagers, abnamro, als, danwel, etc., nav, werd, jullie, ', 'm, etc, hun, alles, maken, loopt, niets, allemaal, denk, misschien, moment, moeten, verbeterpunten, hypotheek, eigenlijk, altijd, zelf, keer, willen, kunt, echt, toen, bijv, vinden, verder, neen, vooral, meneer, heer, mevrouw, gijs</td>
<td style="font-size: 12px;" align="left" width="60%">Goede voorwaarden, toegevoegde waarde, up to date, kennis van zaken, Bijzonder Beheer, face to face, eigen belang, min-max</td>
</tr>
</tbody>
</table>
<br>
<table style="margin:10px;border: 1px solid #0498BE;background-color: #FFFEFE;" class="excolltable" align="left" width="100%" cellpadding="10">
<tbody>
<tr>
<td style="font-size: 14px;" align="center" width="40%"><b>Synonymwords</b></td>
<td style="font-size: 14px;" align="center" width="60%"><b>Displayword</b></td>
</tr>
<tr>
<td style="font-size: 12px;" align="left" width="40%">goed,goede,geod</td>
<td style="font-size: 12px;" align="left" width="60%">goed</td>
</tr>
<tr>
<td style="font-size: 12px;" align="left" width="40%">prettig,prettige</td>
<td style="font-size: 12px;" align="left" width="60%">prettig</td>
</tr>
<tr>
<td style="font-size: 12px;" align="left" width="40%">ideeen,ideeën</td>
<td style="font-size: 12px;" align="left" width="60%">ideeën</td>

</tr>
</tbody>
</table>
</div>
<div id="tabs2"></div>
<div id="tabs3"></div>
</div>


This is my javascript code

$(document).ready(function() {
$( "#tabs" ).tabs({ active: 0 });
});

Answer

Add float:none to table to fix the issue. By default browser has pre-defined css properties.

$(document).ready(function() {
     $( "#tabs" ).tabs({ active: 0 });
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
<ul> 
    <li><a href="#tabs1" id="lan1" class="lantabs">Dutch</a></li>
    <li><a href="#tabs2" id="lan2" class="lantabs">English</a></li>
    <li><a href="#tabs3" id="lan3" class="lantabs">German</a></li>
</ul>
<div id="tabs1">
    <table style="margin:0px; border: 1px solid #0498BE;background-color: #FFFEFE; float:none " class="excolltable" align="left" width="100%" cellpadding="10">
        <tbody>
            <tr>
                <td style="font-size: 14px;" align="center" width="40%"><b>Exclude List</b></td>
                <td style="font-size: 14px;" align="center" width="60%"><b>Consider as one Word</b></td>            
            </tr>
            <tr>
                <td style="font-size: 12px;" align="left" width="40%">als, is, te, een, mee, met, de, om, in, aan, het, je, zijn, en, van, op, worden, ook, voor, deze, ik, we, die, bij, over, er, heeft, haar, dit, dat, zo, hem, zijn, maar, mij, was, heel, zeer, heb, door, niet, kan, mijn, had, zij, hij, ga, of, nog, zou, dus, kon, wel, n, v, t, ze, ben, wordt, iets, naar, kunnen, n, v, t, per, dan, daarna, via, doen, gaat, wilde, hier, u, moet, krijg, gestuurd, mag, zegt, gaf, erg, al, hoe, anders, bedoel, wat, wij, na, daar, tot, m, gehad, meer, nu, uw, nee, meeus, kroller, zie, zal, ligt, me, e, weet, af, omdat, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, geeft, wil, staat, uit, hebben, andere, gaan, ons, veel, doe, onze, vind, toch, Obvion, alleen, geen, toe, dingen, denkt, doet, weer, ilse, westerveld, boer, brenda, bruijn, debeij, eddy, ramon, gerry, florius, abn, amro, aegon, ing, asr, syntrus, argenta, regiobank, daarnaast, hetgeen, aangaf, ongeveer, am, acc, accountmanger, accountmanagers, abnamro, als, danwel, etc., nav, werd, jullie, ', 'm, etc, hun, alles, maken, loopt, niets, allemaal, denk, misschien, moment, moeten, verbeterpunten, hypotheek, eigenlijk, altijd, zelf, keer, willen, kunt, echt, toen, bijv, vinden, verder, neen, vooral, meneer, heer, mevrouw, gijs</td>
                <td style="font-size: 12px;" align="left" width="60%">Goede voorwaarden, toegevoegde waarde, up to date, kennis van zaken, Bijzonder Beheer, face to face, eigen belang, min-max</td>
            </tr>
        </tbody>
    </table>
    <br>
    <table style="margin:10px;border: 1px solid #0498BE;background-color: #FFFEFE;float:none" class="excolltable" align="left" width="100%" cellpadding="10">
        <tbody>
        <tr>
            <td style="font-size: 14px;" align="center" width="40%"><b>Synonymwords</b></td>
            <td style="font-size: 14px;" align="center" width="60%"><b>Displayword</b></td>         
        </tr>
        <tr>
            <td style="font-size: 12px;" align="left" width="40%">goed,goede,geod</td>
            <td style="font-size: 12px;" align="left" width="60%">goed</td>
        </tr>
        <tr>
            <td style="font-size: 12px;" align="left" width="40%">prettig,prettige</td>
            <td style="font-size: 12px;" align="left" width="60%">prettig</td>
        </tr>
        <tr>
            <td style="font-size: 12px;" align="left" width="40%">ideeen,ideeën</td>
            <td style="font-size: 12px;" align="left" width="60%">ideeën</td>

        </tr>
        </tbody>
    </table>
</div>
<div id="tabs2"></div>
<div id="tabs3"></div></div>