Div kenarlığının bazı bölümleri kesiliyor

9

Birkaç element tutan bir konteyner elemanım var, ancak ekran boyutuna bağlı olarak bunların parçaları çeşitli bölümlerde açıklanamayan kesiliyor. HTML sayfasının genişliği ayarlandığında (tıklayıp sürükleyerek) kod sanal alan bağlantımdaki davranışı gözlemleyebilirsiniz. Yalnızca ana konteyner kenarlığının oluşturulmasını ve alt öğelerin herhangi bir etkisinin olmamasını nasıl sağlayabilirim?

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
kaynak

4

Merhaba Perplexityy, bir ekran görüntüsü verebilir misiniz, lütfen? Ben çoğaltmak mümkün görünmüyor ya da sorunu yazıdan tam olarak anlamıyorum.

— Gleb Kost

Bir resim ekledim. Yaşadığım sorun, konteyner öğelerinin dış kenarlığı etkiliyor olması. Ne koyduğumdan bağımsız olarak sürekli sağlam bir render olmasını isterim.

— Şaşkınlık

2

Korumalı alandaki kod, burada gönderdiğiniz koddan farklıdır ve her iki sürüm de görüntüdeki davranışı göstermez (hem Chrome hem de Firefox'un pencereyi yeniden boyutlandırmasını kontrol edin).

— NevNein

4

Üreme yapamıyorum. Hangi işletim sistemini ve tarayıcıyı kullanıyorsunuz?

— BCDeWitt

2

StyledTextBox bileşeniniz, sanal alanda görebildiğim gibi yalnızca UserInput bileşenini tutuyor. Ayrıca, UserInput bileşenini görebileceğiniz şekilde renklendirirseniz, hiçbir şey kesilmemiş gibi görünüyor, her şey iyi çalışıyor.

— Leon Vuković

5

Diğer yorumcular gibi, bildirdiğiniz hatayı oldukça iyi bir şekilde çözebilirim, ancak bana bir box-sizingsorun gibi geldi . Oluşturulan DOM'u https://k7ywy.codesandbox.io/ aracılığıyla incelerken, box-sizing:border-boxsarıcı öğeye veya dahili öğelere uygulanmadığını görebiliriz , ancak soruya yapıştırdığınız snippet'te sabitlenir.

Sorgulayacağım birkaç şey fark ettim.

Neden box-sizingher şeye başvurmuyorsunuz? Genellikle width:100%;ve padding/ border/ ile uğraşırken margin, hayatı çok daha kolay hale getirir!
Örneğimde JS'den kaldırdım ve CSS dosyasını kullanarak uyguladım.
Neden display:flexbirden fazla yerde kullanıyorsunuz , ancak diğer esnek özelliklerle ilgili iddia etmiyorsunuz?
O kaldırmayı deneyin const InputBox = styled.spanveconst StyledKeyboard = styled.span

Bu sizin için düzeltiyor mu? Korumalı alan örneği . Oluşturulan çıktı .

— Jason Lydon
kaynak

Ekran görüntünüzde, sağ kenarlık alt kenarlıktan belirgin şekilde daha incedir.

— Perplexityy

Ben ayrılıp görevinize oy verin, umarım ödülün en azından yarısını alırsınız.

— AmerllicA

0

Giriş alanına arka plan yok veya saydam uygulamanız yeterlidir ve bu sınır sorununu çözer

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

— KKGupta
kaynak

0

Bu bir kutu boyutlandırma sorunu. Daha fazlasını buradan okuyabilirsiniz . Kullanmamanızı da tavsiye ederim display: flex. Belki arka plan rengini saydam olarak değiştirmeyi deneyin? Bu yardımcı olur umarım!

0

Güzel bir kolay yol box-sizing: border-boxana öğeye vermektir . Güvende olmak için, bunu kök bileşen düzeyinde yapabilirsiniz:

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

— George'u İyileştir
kaynak