2

Sean:

index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>CBT</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

con app-root definida como:

<div class="w-screen relative bg-green-200 min-h-screen overflow-hidden">
    <router-outlet></router-outlet>
</div>

Cuando router-outlet muestra la componente definida como:

<div class="flex flex-col items-center justify-center md:h-screen my-12 md:my-0 relative z-10">
    <h1 class="text-2xl font-bold mb-6">Crear Usuario</h1>

    <form (ngSubmit)="onSubmit()"
        class="bg-white p-6 rounded shadow-md w-3/5 md:w-3/5 gap-0 md:grid md:grid-cols-2 md:gap-4">
        <!-- Columna izquierda: Nombre, Apellidos y Correo -->
        <div class="col-span-1">
            <div class="mb-4">
                <label for="name" class="block text-sm font-medium text-gray-700">Nombre</label>
                <input type="text" id="name" [(ngModel)]="name" name="name" required
                    class="mt-1 p-2 border border-gray-300 rounded w-full" placeholder="John" />
                <div *ngIf="!name" class="text-red-500 text-sm mt-1">
                    {{ warnings[0] }}
                </div>
            </div>

            <div class="mb-4">
                <label for="lastname" class="block text-sm font-medium text-gray-700">Apellidos</label>
                <input type="text" id="lastname" [(ngModel)]="lastname" name="lastname" required
                    class="mt-1 p-2 border border-gray-300 rounded w-full" placeholder="Doe" />
                <div *ngIf="!lastname" class="text-red-500 text-sm mt-1">
                    {{ warnings[1] }}
                </div>
            </div>

            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-700">Correo</label>
                <input type="email" id="email" [(ngModel)]="email" name="email" required
                    class="mt-1 p-2 border border-gray-300 rounded w-full" placeholder="[email protected]" />
                <div *ngIf="!email || !checkEmail()" class="text-red-500 text-sm mt-1">
                    {{ warnings[2] }}
                </div>
            </div>
        </div>

        <!-- Columna derecha: Contraseña, Confirmar Contraseña, y Tipo de Usuario -->
        <div class="col-span-1">
            <div class="mb-4">
                <label for="password" class="block text-sm font-medium text-gray-700">Contraseña</label>
                <input type="password" id="password" [(ngModel)]="password" name="password" required
                    class="mt-1 p-2 border border-gray-300 rounded w-full" placeholder="********" />
                <div *ngIf="!password" class="text-red-500 text-sm mt-1">
                    {{ warnings[3] }}
                </div>
            </div>

            <div class="mb-4">
                <label for="confirmPassword" class="block text-sm font-medium text-gray-700">Confirmar
                    Contraseña</label>
                <input type="password" id="confirmPassword" [(ngModel)]="confirmPassword" name="confirmPassword"
                    required class="mt-1 p-2 border border-gray-300 rounded w-full" placeholder="********" />
                <div *ngIf="password !== confirmPassword" class="text-red-500 text-sm mt-1">
                    {{ warnings[4] }}
                </div>
            </div>

            <div class="mb-4">
                <label for="role" class="block text-sm font-medium text-gray-700">Tipo de Usuario</label>
                <select id="role" [(ngModel)]="role" name="role" required
                    class="mt-1 p-2 border border-gray-300 rounded w-full">
                    <option value="" disabled selected>Selecciona un rol</option>
                    <option value="admin">Administrador</option>
                    <option value="middle">Entrevistador</option>
                    <option value="patient">Paciente</option>
                </select>
                <div *ngIf="!role" class="text-red-500 text-sm mt-1">
                    {{ warnings[5] }}
                </div>
            </div>
        </div>

        <!-- Botones en la parte inferior, ocupando ambas columnas -->
        <div class="col-span-2 flex justify-center items-center gap-4">
            <button type="submit" class="option-button">
                Crear Usuario
            </button>

            <button type="button" routerLink="/" class="option-button close">
                Volver Atrás
            </button>
        </div>
    </form>
</div>

resulta la siguiente página:

Imagen de la duda

Tanto app-create-user como su hijo directo (señalado en azul en la consola de desarrollo de Google) ocupan más del 100vw, apareciendo por ello la scrollbar horizontal. Sin embargo, si del app-root quitamos la clase w-screen, todo encaja bien. ¿Por qué?

Más curioso es que el ancho de app-create-user y su hijo directo coinciden a la perfección con el ancho de la pantalla según la consola, pero hay desplazamiento horizontal igualmente (no hay paddings, ni margins ni nada parecido que esté afectando). Es decir, la ventana visible es menor a la pantalla que supuestamente debería haber (hay visibles 748.15px, pero la consola de Google indica que el ancho del viewport es de 766.67px, siendo esta última medida la misma que la de los dos elementos HTML mencionados). ¿Podría haber una mala configuración en mi consola de Google? No creo, pues he revisado y no tengo zoom ni he visto nada que indique que mi vista en consola esté alterada (aunque tampoco soy un entendido en la consola de Google).

He aislado el fenómeno en el siguiente script que podéis ejecutar en angular-17 con tailwind (este script no presenta clases que no sean de tailwind) para replicarlo rápidamente.

<!doctype html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <title>CBT</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="w-screen relative bg-green-200 min-h-screen overflow-hidden">
    <div class="flex flex-col items-center justify-center md:h-screen my-12 md:my-0 relative z-10">
      <h1 class="text-2xl font-bold mb-6">Crear Usuario</h1>

      <form class="bg-white p-6 rounded shadow-md w-3/5 md:w-3/5 gap-0 md:grid md:grid-cols-2 md:gap-4">
        <!-- Columna izquierda: Nombre, Apellidos y Correo -->
        <div class="col-span-1">
          <div class="mb-4">
            <label for="name" class="block text-sm font-medium text-gray-700">Nombre</label>
            <input type="text" id="name" name="name" required class="mt-1 p-2 border border-gray-300 rounded w-full"
              placeholder="John" />
          </div>

          <div class="mb-4">
            <label for="lastname" class="block text-sm font-medium text-gray-700">Apellidos</label>
            <input type="text" id="lastname" name="lastname" required
              class="mt-1 p-2 border border-gray-300 rounded w-full" placeholder="Doe" />
          </div>

          <div class="mb-4">
            <label for="email" class="block text-sm font-medium text-gray-700">Correo</label>
            <input type="email" id="email" name="email" required class="mt-1 p-2 border border-gray-300 rounded w-full"
              placeholder="[email protected]" />
          </div>
        </div>

        <!-- Columna derecha: Contraseña, Confirmar Contraseña, y Tipo de Usuario -->
        <div class="col-span-1">
          <div class="mb-4">
            <label for="password" class="block text-sm font-medium text-gray-700">Contraseña</label>
            <input type="password" id="password" name="password" required
              class="mt-1 p-2 border border-gray-300 rounded w-full" placeholder="********" />
          </div>

          <div class="mb-4">
            <label for="confirmPassword" class="block text-sm font-medium text-gray-700">Confirmar
              Contraseña</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required
              class="mt-1 p-2 border border-gray-300 rounded w-full" placeholder="********" />
          </div>

          <div class="mb-4">
            <label for="role" class="block text-sm font-medium text-gray-700">Tipo de Usuario</label>
            <select id="role" name="role" required class="mt-1 p-2 border border-gray-300 rounded w-full">
              <option value="" disabled selected>Selecciona un rol</option>
              <option value="admin">Administrador</option>
              <option value="middle">Entrevistador</option>
              <option value="patient">Paciente</option>
            </select>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

1
  • Muchas gracias a quienes toméis vuestro tiempo para ayudar. Si necesitan pedirme algo para complementar la pregunta, díganmelo sin dudarlo. Gracias de nuevo :) Commented el 19 oct. a las 18:57

2 respuestas 2

1

El problema es que 100vw es el ancho del viewport, que en la práctica es la ventana.

Cuando tu página crece verticalmente se crea un scrollbar el cual tiene un ancho, por lo cual ahora tu ancho es 100vw + ancho_scrollbar.

Ejemplo:

*{
  margin:0;
  padding:0;

}
div{
  width:100vw;
  height: 10000px;
  background-color:blue;
}
<div></div>

La solución es utilizar un width: 100%; o un overflow-x: hidden;

1
  • Gracias. Ha funcionado perfectamente. He agregado una segunda solución alternativa en los comentarios de la otra respuesta. Esta solución alternativa explica por qué a mí me funcionaba bien cuando quitaba w-screen del código que compartí originalmente en la pregunta. Commented el 19 oct. a las 23:01
0

Revisando toda la documentación, he encontrado lo siguiente.

Tu problema radica en:

<div class="w-screen relative bg-green-200 min-h-screen overflow-hidden">

w-screen abarca todo el ancho del viewport, lo cuál afecta cuando toma el tamaño original de 2 columnas.

Al momento de conseguir un breakpoint, el cálculo necesita ser cambiado, y lo menciona en esta sección de la documentación: https://tailwindcss.com/docs/width#resetting-the-width

Entonces, probando breakpoints, hice el reset en sm:w-auto. Al momento de pasar tu formulario de 2 columnas a una, ahora no aparece el scrollbar horizontal. Vale destacar, que puede que tengas otro breakpoint, dependiendo del viewport, yo solo hice el sm, prueba con el resto tambien.

<div class="w-screen sm:w-auto relative bg-green-200 min-h-screen overflow-hidden">

2 Columnas: introducir la descripción de la imagen aquí

1 Columna: introducir la descripción de la imagen aquí

3
  • No creo que tu respuesta merezca una puntuación negativa, pero no es correcta (la correcta es la de Yussef). De hecho, tu solución tampoco funciona: la scrollbar horizontal vuelve a aparecer si bajamos de pantallas small (sm). ¿Por qué? Porque toma w-screen y, como dijo Yussef, suma el ancho de la scrollbar al ancho del viewport. Commented el 19 oct. a las 22:57
  • Sin embargo, de tu propuesta podemos deducir una respuesta alternativa. Si ponemos w-auto (para todas las pantallas), vemos que funciona siempre bien. Ahora bien: w-auto es el valor por defecto (no hace falta escribirlo explícitamente y es el caso que yo dije en mi pregunta que sí funcionaba). ¿Por qué funciona? Porque su hijos es flex, y los modelos flexbox ocupan todo el ancho disponible a no ser que se defina alguna restricción. Es decir: w-auto (ajusta al contenido) + flex (width al 100%) = width al 100%. ¡Ojo! 100% no es igual que 100vw, pues no suma la scrollbar. Por eso funciona. Commented el 19 oct. a las 22:59
  • Mi respuesta aclara que el w-screen toma el viewport, y que al hacer esto tienes conflictos con los breakpoints. Sin breakpoints, en mis pruebas, no ocurría este error, asi que pude centrar en que el problema, es el w-screen. Que es lo primero que explico durante la respuesta.
    – Excorpion
    Commented el 19 oct. a las 23:28

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.