CSS का उपयोग करते हुए, "B" के नीचे / छोर पर "कसकर" को "कसकर" कैसे संरेखित करें जहां "B" में अज्ञात चौड़ाई और पाठ टॉपिंग है

9

मेरे पास एक "सॉर्टेबल" टेबल है जहां वर्तमान में सॉर्ट किए गए कॉलम का हेडर एक आइकन दिखाता है:

यहां छवि विवरण दर्ज करें

सॉर्ट आइकन पाठ के अंत में प्रदर्शित किया जाना है (यानी, हम LTR / RTL का समर्थन कर रहे हैं)। मैं वर्तमान में उपयोग कर रहा हूं display:flex। हालाँकि, यदि टेबल की चौड़ाई सिकुड़ जाती है और कॉलम हेडर टेक्स्ट रैप करना शुरू कर देता है, तो मैं अस्पष्ट राज्यों में भाग लेता हूँ जहाँ यह स्पष्ट नहीं होता है कि कौन सा कॉलम सॉर्ट किया गया है:

यहां छवि विवरण दर्ज करें

इसके बजाय मैं निम्नलिखित आवश्यकताओं को पूरा करना चाहूंगा:

  1. आइकन हमेशा "कसकर" पाठ की सबसे लंबी रेखा के "अंत" के साथ गठबंधन किया जाता है (भले ही रैपिंग सेल / बटन व्यापक हो)।
  2. आइकन को पाठ की अंतिम पंक्ति के साथ नीचे-संरेखित किया जाना चाहिए।
  3. आइकन को कभी भी अपनी लाइन पर नहीं लपेटना चाहिए।
  4. बटन मौजूद होना चाहिए और सेल की पूरी चौड़ाई का विस्तार करना चाहिए। (यह आंतरिक स्टाइल है और मार्कअप आवश्यकतानुसार बदल सकता है।)
  5. यदि संभव हो तो सीएसएस और एचटीएमएल ही।
  6. यह ज्ञात / सेट कॉलम की चौड़ाई या हेडर टेक्स्ट पर भरोसा नहीं कर सकता है।

उदाहरण के लिए:

यहां छवि विवरण दर्ज करें

मैं के विभिन्न संयोजनों का एक समूह के साथ प्रयोग किया गया है display: inline/inline-block/flex/grid, position, ::before/::after, और यहां तक कि float(!), लेकिन वांछित व्यवहार नहीं कर सकते। यहाँ समस्या का प्रदर्शन मेरा वर्तमान कोड है:

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size: 0.875rem;
  border: 0;
  background-color: transparent;
  width: 100%;
  display: flex;
  align-items: flex-end;
  font-weight: bold;
  line-height: 1.4;
}

.sort {
  width: 1.25rem;
  height: 1.25rem;
}
<table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          Age
          <span class="sort"></span>
         </button>
      </th>
      <th class="th">
        <button class="button">
          Favorite Food
          <span class="sort"></span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          Favorite Color
          <span class="sort">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          Likes Neil Diamond?
          <span class="sort"></span>
        </button>
      </th>
    </tr>
  </thead>
</table>
स्निपेट का विस्तार करें

इस UI को पूरा करने के बारे में कोई विचार? यह शायद मेज या बटन सामान के साथ बहुत कम है। वास्तव में मुझे Thing A"कसकर नीचे" / अंत की आवश्यकता है Thing B(एक लचीली चौड़ाई और जो पाठ लपेटा जा सकता है) के लिए संरेखित किया गया है, लेकिन Thing Aअपनी खुद की एक पंक्ति पर नहीं लपेट सकता।

मैंने flexमानों के साथ खिलवाड़ करने की कोशिश की है, लेकिन कोई भी संयोजन या तो पाठ को समय से पहले लपेट देता है या जल्द ही पर्याप्त नहीं होता है।

html  css  layout  html-table  alignment 
— robertwbradford
स्रोत
मैंने आपके वर्तमान सीएसएस और एचटीएमएल के साथ आपके मुद्दे को ठीक करने की कोशिश की, लेकिन बटन और स्पैन एलिमेंट को मिलाया गया जहां एक सिरदर्द है, इसलिए मैंने सीएसएस और एचटीएमएल के साथ फ़ॉन्ट-भयानक का उपयोग करने का फैसला किया, यह एक उदाहरण है उम्मीद है कि यह मदद करता है
— स्टेन चकन
@stanchacon एक नज़र लेने के लिए धन्यवाद। मुझे उल्लेख करना चाहिए था, लेकिन मेरे पास कॉलम की चौड़ाई सेट करने या हेडर पाठ समय से आगे क्या होगा, यह जानने की लक्जरी नहीं होगी। मैंने # 6 आवश्यकताओं को जोड़ा।
— रोबर्टब्रेडफोर्ड
1
@stanchacon ... और मैं अभी के बारे में एक रिबे के लिए जा सकता था :)
— robertwbradford
@robertwbradford क्या यह पहले से ही संबोधित है? या आप अभी भी एक समाधान के लिए देख रहे हैं?
— फुरकान रहमथ
@MohammedFurqanRahamathM, इसका उत्तर अभी तक नहीं दिया गया है। अभी भी देख रहे हैं ...
— robertwbradford

जवाबों:

1

लगता है कि आपको इसके लिए JS की आवश्यकता है। यहां एक जवाब है कि 5 को छोड़कर सभी शर्तों को पूरा करना चाहिए।

const debounce = fn => {
  let frame;

  return (...params) => {
    if (frame) {
      cancelAnimationFrame(frame);
    }
    frame = requestAnimationFrame(() => {
      fn(...params);
    });
  };
};

const text = [...document.querySelectorAll(".text")];
const iconWidth = "1.25rem";

const positionIcon = () => {
  if (!text) return;
  
  text.forEach(t => {
    const width = t.getBoundingClientRect().width;

    const icon = t.nextElementSibling;
    if (!icon) return;
    
    icon.style.left = `calc(${width}px + ${iconWidth})`;
  });
};

positionIcon();
window.addEventListener("resize", debounce(positionIcon));
.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size: 0.875rem;
  border: 0;
  background-color: transparent;
  width: 100%;
  font-weight: bold;
  line-height: 1.4;
  position: relative;
}

.sort {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  bottom: 1rem;
  left: 100%; /* no js fallback */
}

.sort svg {
  height: 1.25rem;
  width: 1.25rem;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <svg id="arrow" viewBox="0 0 24 24" role="presentation"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</svg>
<table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          <span class="text">Age</span>
          <span class="sort">
            <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
         </button>
      </th>
      <th class="th">
        <button class="button">
          <span class="text">Favourite Food</span>
          <span class="sort">
          <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          <span class="text">Favorite Color</span>
          <span class="sort">
            <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          <span class="text">Likes Neil Diamond?</span>
          <span class="sort">
            <svg>
              <use xlink:href="#arrow">
            </svg>
          </span>
        </button>
      </th>
    </tr>
  </thead>
</table>
स्निपेट का विस्तार करें

— प
स्रोत
1

मुझे लगता है कि दृश्य अस्पष्टता को छोड़कर यहाँ कोई मुद्दा नहीं है। यहाँ मेरे अवलोकन हैं।

  • वास्तव में आइटम कसकर बंधे हुए हैं। डिफ़ॉल्ट रूप से कोई भी तत्व किसी अन्य का अनुसरण करेगा जब तक कि अन्यथा निर्दिष्ट न हो।
  • एक रिक्ति क्यों है? इनकी दो विविधताएँ हैं
    • पहला: यदि पाठ किसी रैपिंग तत्व के अंदर नहीं है (वह स्थिति जिसमें वह अभी है)। इस परिदृश्य में, चूँकि दोनों पाठ के साथ-साथ स्पैन के लिए स्पष्ट रूप से उल्लेखित चौड़ाई नहीं है, इसलिए चौड़ाई का स्वत: असाइनमेंट है और पाठ सभी चौड़ाई के लिए प्रयास कर रहा है सिवाय 1.25rem चौड़ाई के जो स्पैन तत्व ले रहा है। और w3c प्रलेखन के अनुसार, नियम केवल दिए गए स्ट्रिंग पर ब्रेकप्वाइंट की पहचान करने के लिए मौजूद हैं और रिक्ति नहीं, क्योंकि पाठ औचित्य एक पूरी तरह से अलग समस्या है। कृपया इस समस्या का संदर्भ लें को समझने के लिए कि यह कैसे किया जाता है, इसका मानक गतिशील प्रोग्रामिंग प्रश्न कॉलेज में अध्ययन किया गया है। तो निश्चित रूप से रिक्ति करते समय रिक्ति मौजूद होगी और कृपया उपलब्ध चौड़ाई को याद रखें, जिसे ब्राउजर ध्वस्त नहीं करने वाला है।
    • दूसरा: यदि पाठ एक रैपिंग तत्व के अंदर है , तो स्पैन, पी, डिवा आदि हो सकता है। इस मामले में भी, चौड़ाई का ऑटो असाइनमेंट होता है क्योंकि कोई चौड़ाई स्पष्ट रूप से निर्दिष्ट नहीं है। और इस मामले में, आप वास्तव में निरीक्षण तत्व में देख सकते हैं कि तत्व सॉर्ट आइकन की 1.25rem चौड़ाई को छोड़कर सभी स्थान पर कब्जा करने की कोशिश करता है।

इतना टाइट बाउंडिंग, इसका अस्तित्व है, बस यह है कि डायनेमिक स्पेसिंग दृश्य अस्पष्टता पैदा कर रहा है।

अब समाधान के लिए आ रहा है, निकटतम समाधान जो मैं जावास्क्रिप्ट हस्तक्षेप के बिना आ सकता था , हालांकि सही नहीं है, है,

  • एक तत्व के अंदर पाठ लपेटें, शायद एक स्पैन

  • अधिकतम-चौड़ाई देकर इस पाठ की चौड़ाई को सीमित करें:

    button.button > span {
    max-width: 60%; // I saw this to be decent enough
    text-align: center; // This is to offset the visual effect of spacing
}

नोट: दtext-align: center केवल लापता स्थान के प्रभाव को कम करने के लिए है, जब तक कि आपको इसके साथ न जाने की सख्त आवश्यकता हो।

कृपया मुझे बताएं कि क्या यह आपके प्रश्न को संबोधित करता है।

यह इस प्रकार होगा: यहां छवि विवरण दर्ज करें

— फुरकान रहमथ
स्रोत
उत्तर के लिए धन्यवाद। इसके लिए हमारे पास अंत में होना चाहिए।
— रॉबर्टब्रेडफोर्ड
@robertwbradford मैंने अपना उत्तर बदल दिया है जिससे आप संभावित समस्या का समाधान कर सकते हैं और समाधान का प्रस्ताव कर सकते हैं। कृपया मुझे बताएं कि क्या यह आपके प्रश्न का उत्तर देता है।
— फुरकान रहमथ
0

मुझे लगता है कि आप लगभग अच्छे हैं और (3) को याद कर रहे हैं, जो थोड़ा मुश्किल है। एक विचार यह है कि आइकन तत्व 0को टेक्स्ट और सॉर्ट आइकन के बीच किसी भी व्हाट्सएप के बराबर चौड़ाई में निष्क्रिय किया जाए। इसके लिए मैं टेक्स्ट के लिए एक अतिरिक्त आवरण का उपयोग करता हूं और फ्लेक्सबॉक्स का उपयोग हटा देता हूं।

आपके पास कुछ अतिप्रवाह होगा, लेकिन यह कोई समस्या नहीं है क्योंकि आप गद्दी लगा रहे हैं। आप चाहें padding-rightतो बढ़ा भी सकते हैं

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size:0;
  border: 0;
  background-color: transparent;
  width: 100%;
  font-weight: bold;
  line-height: 1.4;
}
.button > span {
  font-size: 0.875rem;
}
.sort {
  width: 0;
  height: 1.25rem;
  display: inline-block;
  vertical-align: bottom;
}
<table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          <span>Age</span>
          <span class="sort"></span>
         </button>
      </th>
      <th class="th">
        <button class="button">
          <span>Favorite Food</span>
          <span class="sort"></span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          <span>Favorite Color</span>
          <span class="sort">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          <span>Likes Neil Diamond?</span>
          <span class="sort"></span>
        </button>
      </th>
    </tr>
  </thead>
</table>
स्निपेट का विस्तार करें

— तमनी अफिफ़
स्रोत
उत्तर के लिए धन्यवाद। कुछ अच्छे बिंदु, लेकिन मैं इसे "आवश्यकता 1" को पूरा नहीं कर रहा हूं जहां तीर को पाठ की सबसे लंबी पंक्ति के अंत के साथ संरेखित करने की आवश्यकता होगी। "पसंदीदा रंग" के मामले में, जब "रंग" दूसरी पंक्ति में लपेटता है, तो आइकन को "पसंदीदा" के अंत के साथ क्षैतिज रूप से संरेखित करना चाहिए जैसा कि अंतिम स्क्रीनशॉट में दिखाया गया है।
— रॉबर्टबर्टबॉर्डफोर्ड
1
@robertwbradford ah ने इसे इस तरह नहीं समझा .. मुझे लगा कि इसे पिछले एक के साथ तंग किया जाना चाहिए। मुझे लगता है कि आप इस आवश्यकता के लिए भाग्य से बाहर हैं ...
— तैमनी Afif
0

अगर आपका थ्रेड शीर्षक गतिशील नहीं है, तो मेरे पास बहुत आसान फिक्स है।

इसके लिए आपको शीर्षक और svg आइकन के अंतिम शब्द को एक साथ स्पैन में रखना होगा

उदाहरण के लिए: -html 

<button>
 Long 

<span> title 
 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</span>
</button>

प्रदर्शन हटाएं: .बटन वर्ग से फ्लेक्स और शैली प्रदर्शन दें: इनलाइन-ब्लॉक को अतिरिक्त स्पैन में

इनलाइन-ब्लॉक होने के कारण svg आइकन कभी अलग लाइन में नहीं होगा। इसके सामने कम से कम एक शब्द होगा

— शिरीष महारजन
स्रोत
जवाब देने के लिए धन्यवाद। मैं इसे एक घटक के रूप में बना रहा हूं, इसलिए शीर्षक पाठ गतिशील होगा :(
— robertwbradford
आप अंतिम शब्द को स्पैन में डालने के लिए Js का उपयोग कर सकते हैं। यह कठिन नहीं होना चाहिए
— शिरीष महारजन
0

आप इस तरह की कोशिश कर सकते हैं:

<style>

.table {
  border-collapse: collapse;
  width: 100%;
}

.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}


.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size: 0.875rem;
  border: 0;
  background-color: transparent;
    
 /* display: flex;
  align-items: flex-end;*/
  font-weight: bold;
  line-height: 1.4;
  float: left;
}
@media only screen and (min-width:502px)
{.button {
    width: calc(192px - 89px);
  }
  .button.food {
    width: calc(214px - 89px);
}
}

.sort {
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
}
.sort svg {
  position: absolute;
}
</style>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <table class="table">
  <thead class="thead">
    <tr class="tr">
      <th class="th">
        <button class="button">
          Age
          <span class="sort"></span>
         </button>
      </th>
      <th class="th">
        <button class="button food">
          Favorite Food
          <span class="sort"></span>
        </button>
      </th>
      <th class="th" aria-sort="ascending">
        <button class="button">
          Favorite Color
          <span class="sort">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
          </span>
        </button>
      </th>
      <th class="th">
        <button class="button">
          Likes Neil Diamond?
          <span class="sort"></span>
        </button>
      </th>
    </tr>
  </thead>
</table>
स्निपेट का विस्तार करें

आशा है कि यह उत्तर आपके लिए उपयोगी होगा। मैंने मोबाइल दृश्य के लिए सीएसएस नहीं बनाया है!

— कृष्ण सवानी
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.