jquerytwitter-bootstrapjquery-uiprime-ui

PrimeUI dropdown button cutted


I a trying to use the dropdown component, but the dropdown button looks like cutted and the submit button isn't aligned with the dropdown. I taked a screenshot. Take a look:

Problem

With PrimeUI, I am using other libraries:

These libraries are added in this order:

{{ 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') }}

My 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>

Solution

  • Found the problem and a workaround. There's a incompatibility with bootstrap. So, if I remove the bootstrap CSS from my code, more specifically, this line:

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

    The button layout works like a charm. However, I can't remove the bootstrap from my project, then I added a custom CSS to fix this little problem. Here the CSS I used:

    .pui-dropdown .pui-dropdown-trigger {
        padding: 0px;
        width: 20px;
    }