Month: 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 นั้นจะขยับไปข้างหน้าทำให้เราต้องจัดใหม่อยู่เสมอวิธีแก้คือ   ทำการเปิด 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