| <div class="pusher ng-scope" style="padding: 10px"> | |
| <h1 class="ng-binding ng-scope">Meraki Clients</h1> | |
| <div class="ui top attached tabular menu ng-scope"> | |
| <a class="item active" href="/meraki_clients">Lista</a> | |
| <a class="item inverted green" href="/meraki_clients/new"> | |
| <i class="add icon"></i> Nuevo | |
| </a> | |
| <a class="item inverted orange"> | |
| <i class="pencil icon"></i> Editar | |
| </a> | |
| <div class="right menu"> | |
| <div class="item"> | |
| <div class="ui transparent icon input"> | |
| <input placeholder="Buscar..." type="text"> | |
| <i class="search link icon"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- uiView: segment --> | |
| <div class="ui bottom attached segment ng-scope"> | |
| <table class="ui celled table ui ng-scope"> | |
| <thead> | |
| <tr> | |
| <th> | |
| <div class="ui checkbox fitted ng-valid"> | |
| <input class="hidden ng-pristine ng-untouched ng-valid" tabindex="0" type="checkbox"> | |
| <label></label> | |
| </div> | |
| </th> | |
| <th data-column="name">Nombre</th> | |
| <th data-column="company">Empresa</th> | |
| <th data-column="position">Cargo</th> | |
| <th data-column="phones">Telefonos</th> | |
| <th data-column="emails">Correos</th> | |
| <th data-column="addresses">Direcciones</th> | |
| </tr> | |
| </thead> | |
| <!-- ngIf: clients.list === null || clients.list.length === 0 --> | |
| <!-- ngIf: clients.list !== null && clients.list.length > 0 --> | |
| <tbody class="ng-scope"> | |
| <!-- ngRepeat: client in clients.list --> | |
| <tr class="ng-scope"> | |
| <td colspan="7" class="warning center aligned">No se ha creado npingun cliente. <a href="#">¿Desea crear uno?</a></td> | |
| </tr> | |
| <!-- end ngRepeat: client in clients.list --> | |
| <tr> | |
| <td colspan="7" class="center aligned"> | |
| <div class="ui active small inline loader"></div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| <!-- end ngIf: clients.list !== null && clients.list.length > 0 --> | |
| </table> | |
| </div> | |
| </div> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.js"></script> |
Semantic UI does not provide a way to define column spannings with grids different than the global @columnCount setting.
In this example, the first two rows now work as expected.
Forked from Juan Loman's Pen Semantic UI column problem.
A Pen by Guzman Monne on CodePen.
| <link href="https://cdn.rawgit.com/MrFusion42/Semantic-UI/column-generators/dist/semantic.min.css" rel="stylesheet" /> |