Ant-design: لا توجد محاذاة عند استخدام Datepicker Select في نفس الوقت

تم إنشاؤها على ١٩ أكتوبر ٢٠١٦  ·  5تعليقات  ·  مصدر: ant-design/ant-design

البيئة التي تحدث فيها المشكلة هي:

  • إصدار antd: 2.1.0
  • نظام التشغيل ونسخته: win7 x64
  • المتصفح ونسخته: كروم 53.0.2785.143 م

    ماذا فعلت؟

استخدم Datepicker Select في نفس الوقت

النتيجة التي تتوقعها هي:

مكونان محاذيان

النتيجة الفعلية هي:

لم يتم محاذاة عنصري التحكم ، تحتاج إلى إضافة نمط verticalAlign: 'middle' في منتقي التاريخ لإصلاحه

نسخة تجريبية على الإنترنت قابلة لإعادة الإنتاج

http://codepen.io/daysv/pen/BLqbxw

🐛 Bug

التعليق الأكثر فائدة

  1. حدد إزالة vertical-align: middle واحتفظ بالقيمة الافتراضية vertical-align: baseline متسقة مع الإدخال ، ومنتقي التاريخ ، وما إلى ذلك.
  2. تمت محاذاة vertical-align: baseline وفقًا لنص التنضيد الطبيعي داخل Select. نظرًا لتوضع العنصر النائب ومربع البحث داخل Select تمامًا (بدون محاذاة) ، يتم استخدام خدعة صغيرة هنا ، عن طريق إضافة نص موجود دائمًا داخل Select To محاذاة.

    .ant-select-selection--single .ant-select-selection__rendered::after {
     content: '.';
     visibility: hidden;
     pointer-events: none;
    }
    
  3. سيؤثر .ant-select-selection__rendered الخاص بـ overflow: hidden على محاذاة النص ، قم بإزالته.
  4. بعد إزالته ، سيتم إتلاف تأثير تجاوز النص الأصلي ، وسيتم تصحيحه واحدًا تلو الآخر.
  5. مزيد من إصلاح مربع التحرير والسرد التالف.

يتم تضمين الكثير من تفاصيل الأسلوب ...

ال 5 كومينتر

Select لديه vertical-align: middle ، من المفترض أن ينسى منتقي التاريخ الإضافة.

دعني أغير هذا ، التحديد يجب ألا يكون vertical-align: middle .

  1. حدد إزالة vertical-align: middle واحتفظ بالقيمة الافتراضية vertical-align: baseline متسقة مع الإدخال ، ومنتقي التاريخ ، وما إلى ذلك.
  2. تمت محاذاة vertical-align: baseline وفقًا لنص التنضيد الطبيعي داخل Select. نظرًا لتوضع العنصر النائب ومربع البحث داخل Select تمامًا (بدون محاذاة) ، يتم استخدام خدعة صغيرة هنا ، عن طريق إضافة نص موجود دائمًا داخل Select To محاذاة.

    .ant-select-selection--single .ant-select-selection__rendered::after {
     content: '.';
     visibility: hidden;
     pointer-events: none;
    }
    
  3. سيؤثر .ant-select-selection__rendered الخاص بـ overflow: hidden على محاذاة النص ، قم بإزالته.
  4. بعد إزالته ، سيتم إتلاف تأثير تجاوز النص الأصلي ، وسيتم تصحيحه واحدًا تلو الآخر.
  5. مزيد من إصلاح مربع التحرير والسرد التالف.

يتم تضمين الكثير من تفاصيل الأسلوب ...

بالإضافة إلى ذلك ، تم إصلاح نمط التحديد المتعدد small/large .

تم إقفال هذا الموضوع تلقائيًا لأنه لم يكن به نشاط حديث. الرجاء فتح مشكلة جديدة للأخطاء ذات الصلة والربط بالتعليقات ذات الصلة في هذا الموضوع.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات