Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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">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');
});Boa tarde,
Estive dando atenção maior a outras partes do projeto e acabei deixando essa aqui um pouco de lado... E agora estou retornando nela. Então, ainda estou com o bootstrap "estranho" relacionado a importação do boostrap core com o theme. Hoje a noite irei dedicar para resolver isso e ai posto mais novidades ou dificuldades :p
Sobre o script na head, eu li algumas documentações do bootstrap mesmo, o próprio site deles, orientam que seja no final do arquivo pois ganha desempenho, li o link que me encaminhou e lá também diz a mesma coisa, além de colocá-los em arquivos externos. Obrigado pela dica, irei alterar hoje mesmo, estava mantendo ele desorganizado por ter uma certa facilidade de alteração pois estava modificando ele constantemente, porém preciso pegar boas práticas e largar essas manias que como você disse, pode me trazer problemas sem estar bem estruturado.
Assim que eu tiver novidades publicarei aqui.
Uma coisa que corrigi que alterou um pouco o layout da tabela foi o position no meu css, precisei colocar alguns componentes relative e mantive a tabela absolute, só então consegui gerenciar via z-index o meu select sobreposto quando ela abria... Um detalhe que eu não esclareci bem no tópico.
Então temos algo falhando com o seu tema. O complemento bootstrap-theme, nada mais serve do que adicionar um tema para o bootstrap. Ele não deve interferir em questões do responsivo ou qualquer outra propriedade que o arquivo anterior tenha. Reveja seus arquivos, veja se não tem nada entrando em conflito e se comprou o tema, contate o criador.
Já da pra perceber que isso não está muito bem feito só pelo fato de ter script dentro da head (a uns 5 anos atrás, talvez essa fosse a melhor prática, mas não hoje em dia). Veja: https://developer.yahoo.com/performance/rules.html
Ele não está chamando o bootstrap via CDN, é local, então você pode ir até o arquivo bootstrap.min.css, desminificar e editar as propriedades dentro dele pra não ter que ficar dando override com um CSS novo (só ocupa espaço e piora o desempenho).
No mais não tem muito no que ajudar nesse assunto, se o tema estivesse bem estruturado, você não teria esses tipos de problemas.