كيفية التحكم في محاذاة datatable داخل لوحة لوحة؟

StackOverflow https://stackoverflow.com/questions/3547485

سؤال

لقد حصلت على إعداد متعدد الأعمدة ، مع DataTables مثل كل من الأعمدة. كل من Datatables هو طول مختلف. يؤدي هذا إلى تمديد لوحة الألواح لتناسب أكبر البيانات (حتى الآن ، هذا جيد). تتمحور DataTables المتبقية رأسياً (هذا ليس جيدًا لأنه يبدو فظيعًا على الشاشة) بدلاً من أن تكون مبررًا.

كيف يمكنني إخبار Panelgrid بالمحتويات العالية؟ أو ، هل مقاربي خاطئ تمامًا وأحتاج إلى القيام بشيء مختلف (إذا كان الأمر كذلك ، فإن الاقتراحات موضع ترحيب)؟

هل كانت مفيدة؟

المحلول

يقدم JSF كـ HTML ويمكن تصميمه باستخدام CSS. فحص العنصر على النحو التالي:

  1. عرض صفحة JSF في متصفح.
  2. انقر بزر الماوس الأيمن فوق الصفحة.
  3. يختار أنظر المصدر.

ال <h:panelGrid> يقدم HTML <table> عنصر؛ ال <h:dataTable> تقدم HTML <table> عنصر ، كذلك. العناصر البيانات متداخلة داخل <td> العنصر ، قدمه <h:panelGrid>. لذا ، قم بتعيين vertical-align التابع <td> التابع <h:panelGrid> إلى top.

على افتراض أن <h:panelGrid> لديه id الذي ينتهي به <table id="panelGridId"> في HTML ، استخدم CSS التالية:

#panelGridId>tbody>tr>td { 
    vertical-align: top;
}

نماذج

إذا كانت الشبكة جزءًا من النموذج ، فستحتاج CSS إلى تضمين معرف النموذج. فمثلا:

<form id="amazingForm">
  <h:panelGrid id="amazingGrid">
    ...
  </h:panelGrid>
</form>

سوف تشبه CSS:

#amazingForm\:amazingGrid > tbody > tr > td {
  vertical-align: top;
}

مثال

فيما يلي مثال على مستند HTML يعرض محاذاة رأسية تعمل داخل جدول تم تكوينه باستخدام CSS:

<!-- language: html -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3547485</title>
        <style>#myid>tbody>tr>td { vertical-align: top; }</style>
    </head>
    <body>
        <table id="myid">
            <tbody>
                <tr>
                    <td><table><tbody><tr><td>n1a</td></tr><tr><td>n1b</td></tr></tbody></table></td>
                    <td><table><tbody><tr><td>n2a</td></tr></tbody></table></td>
                    <td><table><tbody><tr><td>n3a</td></tr><tr><td>n3a</td></tr><tr><td>n3c</td></tr></tbody></table></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

جميع المحاذاة إلى الأعلى. بدون القاعدة ، يتم توسيط جميعها. من الصعب معرفة القاعدة الدقيقة التي تحتاج إلى تطبيقها لأنه من غير الواضح كيف تبدو العلامات التي تم إنشاؤها.

دروس

أنظر أيضا:

نصائح أخرى

يمكنك استخدام CSS لجعل Panelgrids لتتماشى.

.mystyle {
vertical-align: top;
horizontal-align: center;

}

قم بتضمين ملفات XHTML الخاصة بك.

<link href="#{resource['css:style.css']}" rel="stylesheet" type="text/css"/>

وأضف هذا الرمز في PantsGrid.

 <h:panelGrid columns="3" columnClasses="mystyle, mystyle, mystyle">

ملاحظة: بالنسبة لثلاثة أعمدة ، يمكنك تضمينها 3 مرات

يمكنك تجنب تطبيقه على كل TD ، فقط داخل Panelgrid و DataTable داخل ذلك. واجهت نفس المشكلة والعملت بالنسبة لي:

.pgstyle td{ 
vertical-align: top;
}

أين pgstyle هل يحتوي styleclass الذي تقدمه لكل لوحة على DataTable ، مثل:

<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top