PrimeUI 下拉按钮被截断
PrimeUI dropdown button cutted
我尝试使用下拉组件,但下拉按钮看起来像被切断了,提交按钮与下拉列表不对齐。我截图了。看一看:
使用 PrimeUI,我正在使用其他库:
- Bootstrap 3.3.2;
- jQuery 2.1.3;
- jQuery UI 1.11.2;
这些库按以下顺序添加:
{{ HTML::script('jquery/jquery-2.1.3.min.js') }}
{{ HTML::script('bootstrap/js/bootstrap.min.js') }}
{{ HTML::script('jqueryui/jquery-ui.min.js') }}
{{ HTML::script('primeui/primeui-1.1-min.js') }}
{{ HTML::style('bootstrap/css/bootstrap.min.css') }}
{{ HTML::style('bootstrap/css/bootstrap-theme.min.css') }}
{{ HTML::style('jqueryui/jquery-ui.min.css') }}
{{ HTML::style('primeui/themes/bootstrap/theme.css') }}
{{ HTML::style('primeui/primeui-1.1-min.css') }}
我的HTML:
<div id="detalhesAdicionais">
<script>
$(document).ready(function () {
$('#perfilSelecionado').puidropdown();
$('#btnAdicionarPerfil').puibutton();
});
</script>
<h2>Perfis Cadastrados</h2>
<div class="perfis">
<select id="perfilSelecionado">
@foreach($perfisDisponiveis as $perfil)
<option value="{{$perfil->perfil}}">{{$perfil->perfil}} - {{$perfil->descricao}}</option>
@endforeach
</select>
<button type="submit" id="btnAdicionarPerfil">Adicionar</button>
</div>
</div>
找到问题和解决方法。 bootstrap 不兼容。所以,如果我从我的代码中删除 bootstrap CSS,更具体地说,这一行:
{{ HTML::style('bootstrap/css/bootstrap.min.css') }}
按钮布局很有魅力。但是,我无法从我的项目中删除 bootstrap,然后我添加了一个自定义 CSS 来解决这个小问题。这里我用的CSS:
.pui-dropdown .pui-dropdown-trigger {
padding: 0px;
width: 20px;
}
我尝试使用下拉组件,但下拉按钮看起来像被切断了,提交按钮与下拉列表不对齐。我截图了。看一看:
使用 PrimeUI,我正在使用其他库:
- Bootstrap 3.3.2;
- jQuery 2.1.3;
- jQuery UI 1.11.2;
这些库按以下顺序添加:
{{ HTML::script('jquery/jquery-2.1.3.min.js') }}
{{ HTML::script('bootstrap/js/bootstrap.min.js') }}
{{ HTML::script('jqueryui/jquery-ui.min.js') }}
{{ HTML::script('primeui/primeui-1.1-min.js') }}
{{ HTML::style('bootstrap/css/bootstrap.min.css') }}
{{ HTML::style('bootstrap/css/bootstrap-theme.min.css') }}
{{ HTML::style('jqueryui/jquery-ui.min.css') }}
{{ HTML::style('primeui/themes/bootstrap/theme.css') }}
{{ HTML::style('primeui/primeui-1.1-min.css') }}
我的HTML:
<div id="detalhesAdicionais">
<script>
$(document).ready(function () {
$('#perfilSelecionado').puidropdown();
$('#btnAdicionarPerfil').puibutton();
});
</script>
<h2>Perfis Cadastrados</h2>
<div class="perfis">
<select id="perfilSelecionado">
@foreach($perfisDisponiveis as $perfil)
<option value="{{$perfil->perfil}}">{{$perfil->perfil}} - {{$perfil->descricao}}</option>
@endforeach
</select>
<button type="submit" id="btnAdicionarPerfil">Adicionar</button>
</div>
</div>
找到问题和解决方法。 bootstrap 不兼容。所以,如果我从我的代码中删除 bootstrap CSS,更具体地说,这一行:
{{ HTML::style('bootstrap/css/bootstrap.min.css') }}
按钮布局很有魅力。但是,我无法从我的项目中删除 bootstrap,然后我添加了一个自定义 CSS 来解决这个小问题。这里我用的CSS:
.pui-dropdown .pui-dropdown-trigger {
padding: 0px;
width: 20px;
}