0

Estoy usando Livewire e hice un header con un icono de sort y direction el problema es que cuando el tamaño de la pantalla se reduce el icono se mueve abajo del texto, me gustaria que se mantenga a un costado del texto.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

@foreach ($headers as $field)
<th wire:click="order('{{ $field->field }}')">
    <span class="label">{{ $field->name }}</span>
    @if ($sort == '{{ $field->field }}')
        @if ($direction == 'asc')
            <i class="fal fa-sort-alpha-up-alt icon-sort"> </i>
        @else
            <i class="fal fa-sort-alpha-down-alt icon-sort"> </i>
        @endif
    @else
        <i class="fal fa-sort icon-sort"> </i>
    @endif
</th>
@endforeach


thead{
    font-size: 18px;
    font-family: 'Nunito',sans-serif;
    text-transform: uppercase;
    text-align: left;
}
thead tr th, tbody tr td{
    padding: 7px 20px 7px 0px;
}
thead tr th{
    font-weight: 400;
    cursor: pointer;
    overflow-x: hidden;
}
thead tr th span{
    display: inline-block;
}
thead tr th i{
    font-size: 12px;
    display: inline-block;
    float: right;
    margin-top: 5px;
}

1 respuesta 1

2

solo debes agregarle la propiedad white-space:nowrap que evita que se haga un salto de linea por espacio cuando el texto sea demaciado ancho.

tbody tr td{
  white-space:nowrap;
}
1

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.