1

我试图使用下拉组件，但下拉按钮看起来像是被剪掉了，并且提交按钮与下拉列表不对齐。我截图了。看一看：

问题

使用 PrimeUI，我正在使用其他库：

  • 引导程序 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>
4

1 回答 1

2

发现问题和解决方法。与引导程序不兼容。所以，如果我从我的代码中删除引导 CSS，更具体地说，就是这一行：

{{ HTML::style('bootstrap/css/bootstrap.min.css') }}

按钮布局就像一个魅力。但是，我无法从我的项目中删除引导程序，然后我添加了一个自定义 CSS 来解决这个小问题。这是我使用的CSS：

.pui-dropdown .pui-dropdown-trigger {
    padding: 0px;
    width: 20px;
}
于 2015-01-23T12:54:01.847 回答