दिव्य सीमा के कुछ हिस्सों को काट दिया जा रहा है

Question

मेरे पास एक कंटेनर तत्व है जो कुछ अन्य तत्वों को पकड़े हुए है, लेकिन स्क्रीन आकार के आधार पर उनमें से कुछ हिस्सों पर अनावश्यक रूप से काट दिया जाता है। आप मेरे कोड सैंडबॉक्स लिंक पर व्यवहार का निरीक्षण कर सकते हैं, जब HTML पृष्ठ को चौड़ाई में समायोजित किया जाता है (इसे क्लिक करके और खींचकर)। मैं यह कैसे सुनिश्चित कर सकता हूं कि केवल मुख्य कंटेनर सीमा प्रदान की जाए, और यह कि बाल तत्वों का कोई प्रभाव न हो?

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>
  );
}

Comments

हाय Perplexityy, आप एक स्क्रीनशॉट प्रदान कर सकते हैं, कृपया? मुझे लगता है कि मैं पद से समस्या को पूरी तरह से समझने में सक्षम नहीं हूं।

— ग्लीब कोस्ट

मैंने एक छवि जोड़ी। मेरे पास समस्या यह है कि कंटेनर तत्व बाहरी सीमा के साथ हस्तक्षेप कर रहे हैं। मैं चाहूंगा कि मैं इसमें जो कुछ भी रखूं, वह निरंतर ठोस हो।

— प्रतिपक्षी

सैंडबॉक्स में कोड आपके द्वारा यहां पोस्ट किए गए से अलग है, और न ही संस्करण छवि में व्यवहार को प्रदर्शित करते हैं (क्रोम और फ़ायरफ़ॉक्स दोनों विंडो को आकार देने की जाँच की)।

— नेवैनिन

मैं प्रजनन नहीं कर सकता। आप किस OS और ब्राउज़र का उपयोग कर रहे हैं?

— BCDeWitt

आपका स्टाइलटैक्सबॉक्स घटक केवल UserInput घटक को पकड़े हुए है जैसा कि मैं सैंडबॉक्स में देख सकता हूं। इसके अलावा, यदि आप UserInput घटक को कलर करते हैं तो आप इसे देख सकते हैं, ऐसा लगता है कि कुछ भी नहीं कटा है, सब कुछ ठीक चल रहा है।

— लियोन वोविकोव

Answer 1

अन्य टिप्पणीकारों की तरह, मैं आपके द्वारा बताई गई त्रुटि को काफी हद तक दूर कर सकता हूं, लेकिन यह मुझे एक box-sizingमुद्दे की तरह लग रहा था । Https://k7ywy.codesandbox.io/ के माध्यम से प्रदान किए गए DOM की समीक्षा करते समय हम देख सकते हैं box-sizing:border-boxकि रैपर तत्व या आंतरिक तत्वों पर लागू नहीं किया जा रहा है, लेकिन यह आपके द्वारा प्रश्न में चिपकाए गए स्निपेट में तय हो गया है।

मैंने कुछ चीजों पर ध्यान दिया, जिन पर मैं सवाल उठाऊंगा।

1. box-sizingहर चीज पर लागू क्यों नहीं ? आमतौर पर width:100%;और padding/ border/ के साथ काम करते समय margin, यह जीवन को इतना आसान बना देता है!
   अपने उदाहरण में मैंने इसे जेएस से हटा दिया और सीएसएस फ़ाइल का उपयोग करके इसे लागू किया।

2. आप display:flexकई स्थानों पर क्यों उपयोग कर रहे हैं, लेकिन किसी अन्य फ्लेक्स-संबंधित गुणों को स्वीकार नहीं कर रहे हैं?
   उस const InputBox = styled.spanऔर से हटाने की कोशिश करेंconst StyledKeyboard = styled.span

क्या यह आपके लिए ठीक है? सैंडबॉक्स उदाहरण । रेंडर किया गया आउटपुट ।

Comments

आपके स्क्रीनशॉट में, दाईं ओर की सीमा, नीचे की सीमा की तुलना में एकदम पतली है।

— Perplexityy

मैं आपकी पोस्ट को छोड़ता हूं और बढ़ाता हूं, मुझे उम्मीद है कि आपको इसका कम से कम आधा हिस्सा मिलेगा।

— AmerllicA

Answer 2

बस पृष्ठभूमि को कोई भी या पारदर्शी क्षेत्र पर लागू न करें और यह सीमा मुद्दे को हल करेगा

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

Answer 3

यह एक बॉक्स-आकार का मुद्दा है। आप यहाँ और पढ़ सकते हैं । मैं यह भी सलाह देता हूं कि आप इसका उपयोग न करें display: flex। शायद पृष्ठभूमि के रंग को पारदर्शी में बदलने की कोशिश करें? उम्मीद है की यह मदद करेगा!

Answer 4

एक अच्छा आसान तरीका box-sizing: border-boxमूल तत्व को देना है। सुरक्षित होने के लिए, आप इसे मूल घटक स्तर पर कर सकते हैं:

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