ডিভ সীমান্তের কিছু অংশ কেটে ফেলা হচ্ছে

9

আমার কাছে একটি ধারক উপাদান রয়েছে যা কয়েকটি অন্যান্য উপাদান ধরে রেখেছে, তবে তাদের স্ক্রিন আকারের উপর নির্ভর করে অংশগুলির অবিচ্ছিন্নভাবে বিভিন্ন অংশে কাটা হয়েছে। এইচটিএমএল পৃষ্ঠাটি প্রস্থের সাথে সামঞ্জস্য করা হলে (এটি ক্লিক করে এবং টেনে নিয়ে) আপনি আমার কোড স্যান্ডবক্স লিঙ্কে আচরণটি পর্যবেক্ষণ করতে পারেন। আমি কীভাবে নিশ্চিত করতে পারি যে কেবলমাত্র প্রধান ধারক সীমানাটি রেন্ডার করা হয়েছে, এবং শিশু উপাদানগুলির কোনও প্রভাব নেই?

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
সূত্র

4

হাই পার্পলেক্সটি, আপনি কি স্ক্রিনশট সরবরাহ করতে পারেন, দয়া করে? আমি পোস্ট থেকে সমস্যাটি পুনরায় উত্পাদন করতে বা পুরোপুরি বুঝতে পারছি না বলে মনে হচ্ছে।

— গ্লেব কোস্ট

আমি একটি ইমেজ যুক্ত করেছি। আমার যে সমস্যা হচ্ছে তা হ'ল ধারক উপাদানগুলি বাইরের সীমানায় হস্তক্ষেপ করছে। আমি এতে যা কিছু রেখেছি তা নির্বিশেষে এটি ধারাবাহিকভাবে দৃ re়ভাবে রেন্ডার হতে চাই।

— 25:46

2

স্যান্ডবক্সে কোড আপনি এখানে পোস্ট করেছেন তার থেকে আলাদা এবং কোনও সংস্করণই চিত্রটিতে আচরণটি প্রদর্শন করে না (ক্রোম এবং ফায়ারফক্স উভয়ই উইন্ডোর আকার পরিবর্তন করছে)।

— নেভিনি

4

আমি পুনরুত্পাদন করতে পারি না। আপনি কোন ওএস এবং ব্রাউজার ব্যবহার করছেন?

— বিসিডিউইট উইট 13

2

আপনার স্টাইলডটেক্সটবক্স উপাদানটি কেবল ব্যবহারকারীর ইনপুট উপাদানটি ধারণ করে যেমন আমি স্যান্ডবক্সে দেখতে পাচ্ছি। এছাড়াও, আপনি যদি ব্যবহারকারীর ইনপুট উপাদানটি রঙ করেন যাতে আপনি এটি দেখতে পান তবে মনে হয় কিছুই কাটেনি, সবকিছু ঠিকঠাক চলছে।

— লিওন ভুকোভিয়

5

অন্যান্য মন্তব্যকারীদের মতো, আপনি যে ত্রুটিটি প্রতিবেদন করছেন তা আমি যথেষ্ট পরিমাণে বের করে দিতে পারি, তবে এটি আমার কাছে সমস্যার মতো মনে box-sizingহয়েছিল। Https://k7ywy.codesandbox.io/ এর মাধ্যমে রেন্ডার করা ডিওএম পর্যালোচনা করার সময় আমরা দেখতে পারি box-sizing:border-boxযে মোড়কের উপাদান বা অভ্যন্তরীণ উপাদানগুলিতে প্রয়োগ করা হচ্ছে না, তবে আপনি প্রশ্নটিতে আটকানো স্নিপেটে এটি ঠিক করা হয়েছে।

আমি প্রশ্ন করেছি এমন কয়েকটি বিষয় লক্ষ্য করেছি।

কেন সব কিছুতেই প্রয়োগ box-sizingহয় না ? সাধারণত যখন ডিল width:100%;এবং padding/border / এরmargin এটি জীবনকে এত সহজ করে তোলে!
আমার উদাহরণে আমি এটিকে জেএস থেকে সরিয়েছি এবং সিএসএস ফাইল ব্যবহার করে এটি প্রয়োগ করেছি।
আপনি কেন display:flexএকাধিক জায়গায় ব্যবহার করছেন তবে অন্য কোনও ফ্লেক্স-সম্পর্কিত বৈশিষ্ট্যগুলি আশ্বাস দিচ্ছেন না?
এটিকে const InputBox = styled.spanএবং থেকে অপসারণ করার চেষ্টা করুনconst StyledKeyboard = styled.span

এটি কি আপনার জন্য এটি ঠিক করে? স্যান্ডবক্স উদাহরণ । রেন্ডার আউটপুট ।

— জেসন লিডন
সূত্র

আপনার স্ক্রিনশটে ডান সীমানাটি নীচের সীমানার চেয়ে উল্লেখযোগ্যভাবে পাতলা।

— আতঙ্কিত 11

আমি ছেড়ে এবং আপনার পোস্টে upvote, আমি আশা করি আপনি কমপক্ষে এটির অর্ধেক অর্ধেক পাবেন।

— আমেরেলিকাএ

0

ইনপুট ক্ষেত্রে কেবল ব্যাকগ্রাউন্ড কোনওটিই বা স্বচ্ছ প্রয়োগ করবেন না এবং এটি সীমান্তের সমস্যার সমাধান করবে

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

— KKGupta
সূত্র

0

এটি একটি বক্স-সাইজিংয়ের সমস্যা। আপনি এখানে আরও পড়তে পারেন । আমি আপনাকে সুপারিশ করছি আপনি ব্যবহার করবেন না display: flex। ব্যাকগ্রাউন্ড রঙ স্বচ্ছ করতে চেষ্টা করুন? আশাকরি এটা সাহায্য করবে!

0

একটি দুর্দান্ত সহজ উপায় হ'ল box-sizing: border-boxপিতামাত্ত্বিক উপাদানটি দেওয়া। সুরক্ষিত থাকতে, আপনি এটির মূল উপাদান স্তরে এটি করতে পারেন:

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

— পছন্দ জর্জ
সূত্র