Primefaces กำหนดขนาด Dialog ยังไงให้ scrollbar ไม่เพี้ยน

ขนาด default ของ dialog ใน Primefaces นั้นจะขยายไปตามขนาดของ content ที่อยู่ภายใน
หากเราอยากกำหนดเองก็ใส่ width height เป็น pixel ไปเลยก็จบ
แต่!…ถ้าอยากให้มันยืดหดตามขนาดหน้าจอนี่สิปัญหา พอใส่เป็นเปอเซ็นต์เข้าไป scorllbar เอ๋อไปเลย
ผมก็ได้แต่งม css อยู่นาน ก็ไม่สำเร็จซักที แต่บัดนี้ค้นพบแล้วว่า ใช้ jQuery มาช่วยนั้นง่ายกว่าเยอะ

 

ขั้นตอนที่ 1 สร้าง Css เพื่อกำหนดขนาด

กำหนดขนาดของ dialog และสั่งให้แสดง scrollbar เมื่อ content มีขนาดเกิน dialog ดังนี้

 

ขั้นตอนที่ 2 สร้าง Dialog

กำหนด widgetVar=”dialogVar” class=”dialog-pacteez”
กำหนด onShow=”setContentHeight()” ซึ่งเป็น fucntion ที่เราจะสร้างขึ้นมาแก้ปัญหา scrollbar เพี้ยน
ส่วนเนื้อหาก็ใส่ตามที่ท่านต้องการ ของผมหากินง่ายๆด้วยการใส่ content เป็นตัวอย่างสูตรคูณ ดังนี้

 

ขั้นตอนที่ 3 สร้าง javascript function

นี่คือจุดสำคัญที่สุดของบทความนี้ครับ ใช้ jQuery เพื่อกำหนดขนาดของ ui-widget-content ให้มีขนาดเท่ากับ dialog มันก็คือกรอบของส่วน scrollbar นั่นเอง
ถ้า dialog มี header ก็ต้องลบขนาดของ header ด้วยครับ ตัวอย่างของผมลบออกไป 90px

 

ขั้นตอนที่ 4 สร้างปุ่มสำหรับเปิด Dialog

อ้างถึง widgetVar ของ dialog โดยใช้คำสั่งนี้ PF(‘dialogVar’).show()

 

ขั้นตอนที่ 5 เรียบร้อยแล้ว ทดสอบได้เลย

เมื่อกดปุ่ม “Show Dialog” ก็จะเห็น Dialog พร้อม Scrollbar ที่สวยงามดังนี้

3 thoughts on “Primefaces กำหนดขนาด Dialog ยังไงให้ scrollbar ไม่เพี้ยน

    • 12/09/2017 at 10:54
      Permalink

      Users want to see something in the page while scrolling the dialog.

      Reply
  • 11/11/2017 at 16:21
    Permalink

    However, the scrollbar is not showing up within the header and as a result, when I scroll, the header scrolls along with the contents of the dialog.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Advertisment ad adsense adlogger