CSS + Bootstrap (tabela + popover) + bootstrap-theme e é possível sobr
Bom dia a todos,
Meus "talentos" de design não estão nada bons... Tenho o seguinte cenário:
Imagem da table: http://imgur.com/Y4JLjiW
Imagem do popover: http://imgur.com/B3hEi2e
Coloquei o link para não poluir o tópico...
No meu arquivo main.php eu tenho o seguinte no head:
<head>
<title>Página Principal</title>
<meta charset="UTF-8">
<script type="text/javascript" src="Framework/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="Framework/bootstrap-3.3.6-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="Framework/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
<script src="Framework/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/bootstrap.less">
<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/responsive.less">
<link rel="stylesheet" href="css/css_mainphp.css">
<link rel="stylesheet" href="bootstrap-select/dist/css/bootstrap-select.css">
<script src="bootstrap-select/dist/js/bootstrap-select.js"></script>
<script src="m2brdialog/jquery.js" type="text/javascript"></script>
<script src="m2brdialog/jquery-ui.js" type="text/javascript"></script>
<script src="m2brdialog/m2br.dialog.pack.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="m2brdialog/m2br.dialog.css" />
<link rel="stylesheet" type="text/css" href="m2brdialog/exemplo.css" />
Estas linhas:
<link rel="stylesheet" href="Framework/bootstrap-3.3.6-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="Framework/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
Estão dando problema... De acordo com os documentos bootstrap, ele indica que o arquivo theme é uma extensão, um complemente load... E pode ser muito bem usado com o boostrap padrão que é a linha acima do -theme.
O problema é que, se eu comento a linha de cima e adiciono class="table-responsive" na minha div da tabela, ela fica responsiva e o meu popover fica perfeito, com borda tudo bonitinho.
Só que meus selects ficam enormes, tenho que fazer uma gambi para colocar os botões centralizados e os botões não ficam com ícones e nem nos selects.
Se eu comento o -theme, não muda nada, ele atribui só o padrão, porém minha tabela nunca fica responsiva e meu popover fica todo zuado igual na imagem... Na verdade eu até consegui fazer com que ela ficasse +/- responsiva mas ai quando clico no select, ele corta até na div ou borda da tabela inferior, dai aparece um scroll para rolar para baixo, sendo que na verdade eu preciso que ao clicar no select da tabela, ele sobreponha qualquer conteúdo que tenha na página, ele precisa ser absoluto acima de qualquer componente.
OBS:
tabela + select:
<div id="topo-tabela" >
<table class="table table-striped table-bordered table-hover">
<thead>
<th>Nome da Obra</th>
<th>Autor</th>
<th>Tema</th>
<th>Editora</th>
<th>Disciplina</th>
<th>Palavras-Chave</th>
<th>Tipo de Arquivo</th>
<th>Ações</th>
</thead>
<tbody>
<tr ng-repeat="data in customers">
<!-- Autor -->
<td>
<div class="form-group">
<label for="" class="col-lg-2 control-label"></label>
<div class="col-lg-10">
<select id="basic" class="selectpicker show-tick form-control" data-live-search="true">
<?php
$sql = "select * from autores";
$res = Connection::getInstance()->query($sql);
while($linha=mysqli_fetch_array($res)) { ?>
<option value=""><?php echo $linha["AUT_NOME"]; ?></option>
<?php } ?>
</select>
</div>
</div>
</td>
css simplão:
#topo-tabela {
background: white;
filter:alpha(opacity=10);
-moz-opacity: 0.8 ;
opacity: 0.8;
}
meu popover js
<script type="text/javascript">
$(document).ready(function () {
// Associa o evento do popover ao clicar no link.
$('#autor-popover').popover({
trigger: 'manual',
html: true,
title: 'Cadastro de Autor',
content: $('#div-popover').html() // Adiciona o conteúdo da div oculta para dentro do popover.
}).click(function (e) {
e.preventDefault();
// Exibe o popover.
$(this).popover('toggle');
});
$('#btn-fechar').live('click', function (e) {
// Oculta o popover ao clicar no botão fechar.
$('#autor-popover').popover('hide');
});Discussão (2)
Carregando comentários...