2 सवाल: कैसे औचित्य-सामग्री केंद्र के साथ flexbox div में 100% तक खिंचाव के लिए इनपुट प्राप्त करने के लिए

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

मैं width: 150%

जैसे कुछ किए बिना 100% युक्त बटन को फैलाने के लिए नीचे स्निपेट में इनपुट प्राप्त नहीं कर सकता।

.explore__column,
.explore__row {
  display: flex;
}

.explore__row {
  flex-direction: row;
  flex: 1 1;
}

.search-box__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
  margin-right: 3.75rem!important;
  margin-bottom: 3.75rem!important;
  width: 0;
  border: 1px solid rgba(33, 33, 33, .4);
  align-items: center;
  border-radius: 5px;
  background: transparent;
  background: #fff;
  cursor: pointer;
}

.search-box__item.search-box__active {
  border-top: 2px solid #4f9bc9;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .12);
}

.search-box__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
  margin-right: 3.75rem!important;
  margin-bottom: 3.75rem!important;
  width: 0;
  border: 1px solid rgba(33, 33, 33, .4);
  align-items: center;
  border-radius: 5px;
  background: transparent;
  background: #fff;
  cursor: pointer;
}
<div class="explore__row"><button class="search-box__item search-box__active" type="button"><div class="search-box__translate"><svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-Plan" style="overflow: visible;"></use></svg></div><div class="search-box__fade
"><input type="text" autocomplete="off" class="input__default form-control" placeholder="search Plans"></div><h2>One</h2></button><button class="search-box__item" type="button"><div class="search-box__translate"><svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-BusinessUnit" style="overflow: visible;"></use></svg></div><div class="search-box__fade"><input type="text" autocomplete="off" class="input__default form-control" placeholder="search Business Units"></div><h2>Two</h2></button>
</div>
    
1
2 उत्तर                              2                         
  1. आप एक बटन तत्व के अंदर <div> का उपयोग नहीं कर सकते हैं (आप पहली बार में इस मामले में एक बटन का उपयोग क्यों करेंगे? इसने जब भी आपने इस पर क्लिक किया है, तो आपकी सामग्री विचलित हो गई है)
  2. बस इनपुट के साथ-साथ उसके अभिभावक में 100% की चौड़ाई जोड़ें, और साथ ही साथ पेडिंग लेने के लिए box-sizing: border-box जोड़ें।

.explore__column,
.explore__row {
  display: flex;
}

.explore__row {
  flex-direction: row;
  flex: 1 1;
}

.search-box__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
  margin-right: 3.75rem!important;
  margin-bottom: 3.75rem!important;
  width: 0;
  border: 1px solid rgba(33, 33, 33, .4);
  align-items: center;
  border-radius: 5px;
  background: transparent;
  background: #fff;
  cursor: pointer;
  padding: 0 10px;
}

.search-box__item.search-box__active {
  border-top: 2px solid #4f9bc9;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .12);
}

.search-box__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
  margin-right: 3.75rem!important;
  margin-bottom: 3.75rem!important;
  width: 0;
  border: 1px solid rgba(33, 33, 33, .4);
  align-items: center;
  border-radius: 5px;
  background: transparent;
  background: #fff;
  cursor: pointer;
}

.search-box__fade,
input {
  width: 100%;
  box-sizing: border-box;
}
<div class="explore__row">
  <div class="search-box__item search-box__active" type="button">
    <div class="search-box__translate">
      <svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-Plan" style="overflow: visible;"></use></svg>
    </div>
    <div class="search-box__fade">
      <input type="text" autocomplete="off" class="input__default form-control" placeholder="search Plans"></div>
    <h2>One</h2>
  </div>
  <div class="search-box__item" type="button">
    <div class="search-box__translate">
      <svg viewBox="0 0 30 30" style="overflow: visible;"><use xlink:href="#icon-BusinessUnit" style="overflow: visible;"></use></svg>
    </div>
    <div class="search-box__fade">
      <input type="text" autocomplete="off" class="input__default form-control" placeholder="search Business Units">
    </div>
    <h2>Two</h2>
  </div>
</div>
    
0
2019-05-08 15: 56: 03Z
  1. मैंने एक बटन का उपयोग किया है, इसलिए यह सारणीबद्ध है और अभिगम्यता के लिए भी है, मैंने सोचा होगा कि यह एक बटन होना चाहिए
    2019-05-08 15: 58: 04Z
  2. ठीक है, एक बटन एक ऐसी चीज़ है जिसे क्लिक किया जा सकता है और आमतौर पर एक क्रिया को ट्रिगर किया जाता है। और एक बटन में इनपुट फ़ील्ड शामिल नहीं होनी चाहिए, क्योंकि इनपुट पर क्लिक करने से फोकस बटन पर भी क्लिक होगा। इनपुट फोकस प्राप्त कर सकते हैं /अपने आप में टैब किए जा सकते हैं, इसलिए वे पहले से ही सुलभ हैं।
    2019-05-08 15: 59: 30Z

    अपने flex-direction: column तत्व से .search-box__item निकालें। और यह कोड स्निपेट जोड़ें:

    .search-box__item {
        flex-wrap: wrap;
    }
    
    .search-box__fade {
        width: 100%;
    }
    
    input {
        width: 100%;
        box-sizing: border-box;
    }
    
        
    0
    2019-05-08 15: 55: 46Z
स्रोत रखा गया यहाँ