1

Dentro de mi formulario de usuario tengo una sección de permisos disponibles para el usuario, mi intención es que esta sección de permisos, justamente los permisos que listo, se muestren en al menos dos columnas. ¿Cómo podría lograr esto con bootstrap 4?.

Así se ven actualmente mis permisos:

permisos

Como mencioné anteriormente deseo poder mostrar la lista de permisos en 2 columnas y no lo estoy logrando.

Intenté agregando esta linea

<ul class="list-group list-group-horizontal">

pero no me esta funcionando.

Esta es mi sección de permisos:

 <div class="col-md-6">       
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">Permisos</h3>                
            </div>
            <div class="box-body"> 
            @role('Admin')              
                @include('admin.users.partials.permissions-checkboxes') 
            @else                     
                <ul class="list-group">
                    @forelse ($user->permissions as $permission)
                        <li class="list-group-item">{{ $permission->name }}</li>
                    @empty
                        <li class="list-group-item">No tiene permisos</li>
                    @endforelse
                </ul>
            @endrole
            </div>
        </div>       
    </div>

Este es el partials de permissions:

@foreach( $permissions as $id => $name )
<div class="checkbox">
    <label>
        <input name="permissions[]" type="checkbox" value="{{ $name }}"
            {{ $user->permissions->contains($id) ? 'checked':'' }}>                            
        {{ $name }}                           
    </label>                        
</div>              
@endforeach 

ACTUALIZACION 1

En esta actualizacion he agregado <div class="row"> y <div class="col-6 col-md-4">. No resulto ninguna modificacion.

<div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">Permisos</h3>                
            </div>
            <div class="box-body">
                <div class="row"> 
                    <div class="col-6 col-md-4">
                    @role('Admin')              
                        @include('admin.users.partials.permissions-checkboxes') 
                    @else      
                        <ul class="list-group">
                            @forelse ($user->permissions as $permission)
                                <li class="list-group-item">{{ $permission->name }}</li>
                            @empty
                                <li class="list-group-item">No tiene permisos</li>
                            @endforelse
                        </ul>
                    @endrole
                    </div>
                </div>
            </div>
        </div>       

ACTUALIZACION 2

simplemente agregando esta linea <div class="checkbox col-sm-6"> en mi archivo @include('admin.users.partials.permissions-checkboxes'), he podido mostrar la lista de permisos de usuarios en dos columnas, pero ha ocurrido una pequeña diferencia de espacios en el primer permiso (View posts), con respecto a los demas permisos, notan el espacio que hay?. Observar imagen.

permisos

Esto puede tener solución?

2
  • Por favor alguien tiene alguna sugerencia para acomodar la lista de permiso en 2 columnas Commented el 22 mar. 2020 a las 13:59
  • Revisa esto (getbootstrap.com/docs/4.0/layout/grid), y fíjate en la clase .row que es necesario y apóyate con la respuesta de @JorgeGuz Commented el 23 mar. 2020 a las 8:09

1 respuesta 1

1

Ya que estás usando Bootstrap como framework puedes utilizar su sistema de grid para dar el estilo que necesitas a tu site. En este caso creo que te bastaría con incluir clases en el 'li' que carga los 'permisos' del tipo 'col-6' y ajustar para cada breakpoint el espacio tal y como tú consideres:

   <div class="col-md-6">       
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Permisos</h3>                
        </div>
        <div class="box-body"> 
        @role('Admin')              
            @include('admin.users.partials.permissions-checkboxes') 
        @else                     
            <ul class="list-group">
                @forelse ($user->permissions as $permission)
                    <li class="list-group-item col-sm-6 widthLi">{{ $permission->name }}</li>
                @empty
                    <li class="list-group-item">No tiene permisos</li>
                @endforelse
            </ul>
        @endrole
         </div>
        </div>       
     </div>

Esto debería funcionar, pero de no ser así puedes agregar una clase al 'li' donde cargas esos datos y darle un width menor al 50% y un 'display' adecuado para que se distribuyan el espacio:

     .widthLi{
           display: inline-block;
           width: 45%
     }

Por último y viendo que las soluciones anteriores no parecen resolver tu casuística prueba darle esta misma clase 'col-6' dentro de tu 'partial view' del siguiente modo:

  @foreach( $permissions as $id => $name )
     <div class="checkbox col-sm-6">
        <label>
        <input name="permissions[]" type="checkbox" value="{{ $name }}"
             {{ $user->permissions->contains($id) ? 'checked':'' }}>                            
         {{ $name }}                           
          </label>                        
     </div>              
  @endforeach 
6
  • gracias por responder he realizado la modificacion que me haz indicado, sigo sin poder dividir la fila en al menos dos columnas, revisa mi actualizacion, alguna otra sugenrencia? Commented el 23 mar. 2020 a las 17:43
  • He añadido otra opción ya que lo anterior no te funciona. Espero que está vía si pueda resultarte de ayuda.
    – JorgeGuz
    Commented el 23 mar. 2020 a las 19:21
  • gracias nuevamente por tu nueva sugerencia, la verdad no esta resultando ningun cambio, lo que me haz indicado tambien lo probe en el partials.permissions-checkboxes, pero se sigue mostrado toda la lista en una sola columna. Commented el 24 mar. 2020 a las 17:56
  • quisas esos cambios deberian de ir en el partials que dices?, yo le he probado pero no funciona Commented el 24 mar. 2020 a las 18:03
  • Puedes probar, he puesto en la respuesta está posibilidad también. Espero que te funcione. De no ser así revisa tu código y tu CSS porque es posible que haya algo que prime por encima de estos cambios y obligue a estos checkbox a seguir comportándose de este modo que no deseas.
    – JorgeGuz
    Commented el 24 mar. 2020 a las 23:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.