Parties de la frontière div coupées

9

J'ai un élément de conteneur qui contient quelques autres éléments, mais en fonction de la taille de l'écran, certaines parties sont inexplicablement coupées en différentes parties. Vous pouvez observer le comportement sur mon lien sandbox de code, lorsque la page HTML est ajustée en largeur (en cliquant et en la faisant glisser). Comment puis-je m'assurer que seule la bordure du conteneur principal est rendue et que les éléments enfants n'ont aucun impact?

https://codesandbox.io/s/focused-tree-ms4f2

import React from "react";
import styled from "styled-components";

const StyledTextBox = styled.div`
  height: 15vh;
  width: 30vw;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  border: 1px solid black;
  background-color: #fff;
  > * {
    box-sizing: border-box;
  }
`;

const InputBox = styled.span`
  height: 35%;
  width: 100%;
  display: flex;
  border: none;
  outline: none;
`;



const UserInput = styled.input`
  height: 100%;
  width: 90%;
  border: none;
  outline: none;
`;

const SolutionBox = styled.div`
  height: 35%;
  width: 100%;
  border: none;
  outline: none;
`;

const StyledKeyboard = styled.span`
    height: 30%;
    width: 100%;
    position: relative;
    background-color: #DCDCDC;
    box-sizing: border-box;
    display: flex;
`

export default function App() {
  return (
    <StyledTextBox>
      <InputBox>
        <UserInput />
      </InputBox>
      <SolutionBox/>
      <StyledKeyboard/>
    </StyledTextBox>
  );
}

javascript css reactjs

— Perplexité
source

4

Salut Perplexité, pouvez-vous fournir une capture d'écran, s'il vous plaît? Je ne semble pas être en mesure de reproduire ou je ne comprends pas parfaitement le problème de la poste.

— Gleb Kost

J'ai ajouté une image. Le problème que j'ai, c'est que les éléments du conteneur interfèrent avec la bordure extérieure. Je voudrais que ce soit un rendu toujours solide, peu importe ce que j'y mets.

— Perplexité

2

Le code dans le bac à sable est différent de celui que vous avez publié ici, et aucune des versions ne présente le comportement dans l'image (vérifié Chrome et Firefox redimensionnant la fenêtre).

— NevNein

4

Je ne peux pas reproduire. Quel système d'exploitation et navigateur utilisez-vous?

— BDawg

2

Votre composant StyledTextBox contient uniquement le composant UserInput comme je peux le voir dans le sandbox. De plus, si vous colorez le composant UserInput pour le voir, il semble que rien ne soit coupé, tout fonctionne correctement.

— Leon Vuković

5

Comme les autres commentateurs, je peux tout à fait distinguer l'erreur que vous signalez, mais cela m'a semblé être un box-sizingproblème. Lors de l'examen du DOM rendu via https://k7ywy.codesandbox.io/, nous pouvons voir qu'il box-sizing:border-boxn'est pas appliqué à l'élément wrapper ou aux éléments internes, mais il est fixé dans l'extrait de code que vous avez collé dans la question.

J'ai remarqué certaines choses que je remettais en question.

Pourquoi ne pas appliquer box-sizingà tout? Habituellement, lorsque vous traitez avec width:100%;et padding/ border/ margin, cela vous facilite la vie!
Dans mon exemple, je l'ai supprimé du JS et l'ai appliqué à l'aide du fichier CSS.
Pourquoi utilisez-vous display:flexà plusieurs endroits sans attribuer d'autres propriétés liées à Flex?
Essayez de supprimer cela de const InputBox = styled.spanetconst StyledKeyboard = styled.span

Est-ce que cela vous arrange? Exemple de bac à sable . Sortie rendue .

— Jason Lydon
source

Dans votre capture d'écran, la bordure droite est nettement plus fine que, disons, la bordure inférieure.

— Perplexityy

Je pars et vote pour votre message, j'espère que vous obtiendrez la prime au moins la moitié.

— AmerllicA

0

Appliquez simplement le fond aucun ou transparent au champ de saisie et cela résoudra le problème de bordure

.muXee{
    background-color: transparent;
//OR background:none
}

— KKGupta
source

0

C'est un problème de taille de boîte. Vous pouvez en lire plus ici . Je vous recommande également de ne pas utiliser display: flex. Essayez peut-être de changer la couleur d'arrière-plan en transparent? J'espère que cela t'aides!

0

Un bon moyen simple est de donner box-sizing: border-boxà l'élément parent. Pour être sûr, vous pouvez le faire au niveau du composant racine:

* {
  ...;
  box-sizing: border-box;
}

— Favorisez George
source