Parti del bordo div tagliate

9

Ho un elemento contenitore che contiene alcuni altri elementi, ma a seconda della dimensione dello schermo parti di essi sono inspiegabilmente tagliate in varie parti. Puoi osservare il comportamento sul mio link sandbox codice, quando la pagina HTML viene regolata in larghezza (facendo clic e trascinandola). Come posso garantire che venga eseguito il rendering solo del bordo del contenitore principale e che gli elementi figlio non abbiano alcun impatto?

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

— Perplexityy
fonte

4

Ciao Perplexityy, puoi fornire uno screenshot, per favore? Non riesco a riprodurre o non capisco perfettamente il problema dal post.

— Gleb Kost,

Ho aggiunto un'immagine. Il problema che sto riscontrando è che gli elementi del contenitore interferiscono con il bordo esterno. Vorrei che fosse un rendering costantemente solido indipendentemente da ciò che ho inserito.

— Perplessualità

2

Il codice nella sandbox è diverso da quello che hai pubblicato qui, e nessuna delle due versioni mostra il comportamento nell'immagine (controllato sia Chrome che Firefox che ridimensionano la finestra).

— NevNein

4

Non riesco a riprodurre. Quale sistema operativo e browser stai usando?

— BDawg

2

Il componente StyledTextBox contiene solo il componente UserInput, come posso vedere nella sandbox. Inoltre, se si colora il componente UserInput in modo da poterlo vedere, sembra che nulla sia tagliato, tutto funziona correttamente.

— Leon Vuković,

5

Come gli altri commentatori, riesco a capire l'errore che stai segnalando, ma mi è sembrato un box-sizingproblema. Quando esaminiamo il DOM renderizzato tramite https://k7ywy.codesandbox.io/ possiamo vedere che box-sizing:border-boxnon viene applicato all'elemento wrapper o agli elementi interni, ma è stato risolto nello snippet incollato nella domanda.

Ho notato alcune cose che avrei messo in dubbio.

Perché non applicare box-sizinga tutto? Di solito quando si ha a che fare con width:100%;e padding/ border/ margin, rende la vita molto più semplice!
Nel mio esempio l'ho rimosso da JS e l'ho applicato usando il file CSS.
Perché stai usando display:flexin più punti ma non stai valutando altre proprietà relative al flex?
Prova a rimuoverlo da const InputBox = styled.spaneconst StyledKeyboard = styled.span

Questo lo risolve per te? Esempio di sandbox . Output reso .

— Jason Lydon
fonte

Nel tuo screenshot, il bordo destro è notevolmente più sottile di dire, il bordo inferiore.

— Perplessità il

Lascio e voto al tuo post, spero che otterrai la taglia almeno la metà di esso.

— Amerllic,

0

Basta applicare lo sfondo nessuno o trasparente al campo di input e questo risolverà il problema del bordo

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

— KKGupta
fonte

0

È un problema di ridimensionamento delle scatole. Puoi leggere di più qui . Consiglio anche di non usare display: flex. Forse prova a cambiare il colore di sfondo in trasparente? Spero che sia di aiuto!

0

Un bel modo semplice è quello di dare box-sizing: border-boxall'elemento genitore. Per sicurezza, puoi farlo a livello di componente radice:

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

— Favorisci George
fonte