Teile der Div-Grenze werden abgeschnitten

9

Ich habe ein Containerelement, das einige andere Elemente enthält, aber je nach Bildschirmgröße sind Teile davon unerklärlicherweise an verschiedenen Stellen abgeschnitten. Sie können das Verhalten auf meinem Code-Sandbox-Link beobachten, wenn die Breite der HTML-Seite angepasst wird (durch Klicken und Ziehen). Wie kann ich sicherstellen, dass nur der Hauptcontainerrand gerendert wird und die untergeordneten Elemente keine Auswirkungen haben?

Rand

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 Ratlosigkeit
quelle
4
Hallo Perplexityy, können Sie bitte einen Screenshot bereitstellen? Ich scheine nicht in der Lage zu sein, das Problem zu reproduzieren, oder ich verstehe es nicht vollständig.
Gleb Kost
Ich habe ein Bild hinzugefügt. Das Problem, das ich habe, ist, dass die Containerelemente den Außenrand stören. Ich möchte, dass es ein durchweg solides Rendering ist, unabhängig davon, was ich hineingegeben habe.
Ratlosigkeit
2
Der Code in der Sandbox unterscheidet sich von dem, den Sie hier gepostet haben, und keine der Versionen zeigt das Verhalten im Bild (aktiviert, dass sowohl Chrome als auch Firefox die Fenstergröße ändern).
NevNein
4
Ich kann nicht reproduzieren. Welches Betriebssystem und welchen Browser verwenden Sie?
BDawg
2
Ihre StyledTextBox-Komponente enthält nur die UserInput-Komponente, wie ich in der Sandbox sehen kann. Wenn Sie die UserInput-Komponente einfärben, damit Sie sie sehen können, scheint nichts abgeschnitten zu sein, alles funktioniert einwandfrei.
Leon Vuković

Antworten:

5

Wie die anderen Kommentatoren kann ich den von Ihnen gemeldeten Fehler durchaus erkennen, aber es klang für mich wie ein box-sizingProblem. Wenn Sie das gerenderte DOM über https://k7ywy.codesandbox.io/ überprüfen, können Sie feststellen, dass box-sizing:border-boxes nicht auf das Wrapper-Element oder die internen Elemente angewendet wird, sondern in dem Snippet behoben ist, das Sie in die Frage eingefügt haben.

Ich bemerkte ein paar Dinge, die ich in Frage stellen würde.

  1. Warum nicht box-sizingauf alles anwenden ? Normalerweise macht es das Leben im Umgang mit width:100%;und padding/ border/ marginso viel einfacher!
    In meinem Beispiel habe ich es aus dem JS entfernt und mithilfe der CSS-Datei angewendet.

  2. Warum verwenden Sie display:flexan mehreren Stellen, ohne jedoch andere flexbezogene Eigenschaften zu bewerten?
    Versuchen Sie, das von const InputBox = styled.spanund zu entfernenconst StyledKeyboard = styled.span

Behebt das das Problem für Sie? Sandbox-Beispiel . Ausgabe gerendert .

Jason Lydon
quelle
In Ihrem Screenshot ist der rechte Rand deutlich dünner als beispielsweise der untere Rand.
Ratlosigkeit
Ich gehe und stimme Ihrem Beitrag zu. Ich hoffe, Sie erhalten mindestens die Hälfte des Kopfgeldes.
AmerllicA
0

Wenden Sie einfach keinen Hintergrund oder transparent auf das Eingabefeld an, um das Randproblem zu beheben

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

Es ist ein Problem der Boxgröße. Sie können mehr lesen hier . Ich empfehle auch, dass Sie nicht verwenden display: flex. Versuchen Sie vielleicht, die Hintergrundfarbe in transparent zu ändern? Hoffe das hilft!


quelle
0

Eine schöne einfache Möglichkeit besteht darin, box-sizing: border-boxdem übergeordneten Element etwas zu geben . Um sicher zu gehen, können Sie dies auf der Ebene der Stammkomponenten tun:

* {
  ...;
  box-sizing: border-box;
}
Bevorzugen Sie George
quelle