Get Adobe Flash player

Monthly Archives: April 2019

Elementor ปลั๊กอิน WordPress ที่ช่วยจัดการแสดงผลหน้าเว็บไซต์

ปลั๊กอินที่จะช่วยในการจัดการของหน้าเว็บไซต์ของเราในส่วนของ content เพื่อที่จะช่วยลดระยะเวลาในการเขียนโค้ด


 

เริ่มต้นการใช้งาน ขั้นตอนแรกกดเพิ่มหน้าใหม่ Add New

 

คลิกที่ Edit with Elementor เพื่อเรียกใช้ตัว Elementor

 

หน้าต่างการใช้งานของ Elementor

 

ข้อดี

  • ตัว Elementor มีเครื่องมือให้เลือกใช้มากมายไม่ว่าจะเป็น การใส่หัวข้อ รูปภาพ การจัดข้อความ สไลด์รูปภาพ ฯลฯ
  • สามารถนำรูปแบบตัวอย่างที่มีมาปรับใช้ได้
  • สามารถจัด icon , shortcode, custom html มาแปะไว้หน้าเว็บไซต์ได้
  • สามารถเลือกจัดรูปแบบ colum ได้

ข้อเสีย

  • การ custom ฟอนต์อาจจะต้องไปปรับเปลี่ยนหลายจุดหรืออัพเกรดไปใช้ Version Pro

วิธีการแก้ปัญหา {{}} ในLaravel บน VS code

ปัญหาก็คือถ้าเราพิม {{}} ใน tag html ตัว tag นั้นจะขยับไปข้างหน้าทำให้เราต้องจัดใหม่อยู่เสมอวิธีแก้คือ

 

  1. ทำการเปิด Vscode แล้วกด F1 แล้วค้นหาคำว่า Setting (UI)

 

2. แล้วทำการคลิกรูปบนด้านขวาตามในภาพ

 

3. เมื่อคลิกกแล้วจะขึ้นมาดั้งในภาพและให้ทำใส่โค้ดลงไป

ส่วนของโค้ด

เราจะสามารถแก้ไขปัญหาได้

CSS Table text-overflow ellipsis ตัดข้อความทิ้งเมื่อข้อความในตารางยาวเกินไป

เมื่อมีข้อความที่ยาวมาก ๆ ในตารางจนเกิดการเว้นบรรทัดข้อมูลเกิดขึ้นทำให้ข้อมูลในตารางดูไม่เรียบร้อย วิธีแก้ไขปัญหาเราสามารถใช้ CSS Property  text-overflow มาช่วยได้ โดยการกำหนดค่าให้เป็น ellipsis (ตัดข้อความทิ้ง) และใช้ Property white-space กำหนดค่าเป็น nowrap (ไม่ต้องเว้นบรรทัด)

แต่ปัญหานี้ไม่ได้แก้ง่ายขนาดนั้น สาเหตุเพราะตารางใน html นั้นจะมี Property table-layout ที่มีค่าเริ่มต้นเป็น auto (ยืดหยุ่นตามข้อมูล) ก็คือถ้าข้อมูลยาวมากแล้วไม่สามารถเว้นบรรทัดได้ ตารางจะทำการยืดความกว้างของ column นั้นออกไปเพิ่ม ทำให้ text-overflow ellipsis นั้นไม่ทำงาน ดังนี้จึงต้องมีการเปลี่ยน table-layout ของตารางใหม่จาก auto เป็น fixed

ตัวอย่างที่ข้อมูลใน column สุดท้ายมีความยาวมาก

ตัวอย่าง CSS

ดูเพิ่มเติมที่ https://codepen.io/anon/pen/RdrGbX