เนื้อหาที่แสดงบนหน้า JQuery ที่เขียนไม่มีระยะขอบ และเนื้อหาอยู่ใกล้กับขอบของเบราว์เซอร์ ซึ่งน่าเกลียดอย่างยิ่ง (ดังที่แสดงด้านล่าง)
รหัสมีดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<ร่างกาย>
<form id="form1" runat="server">
<div data-role="page" id="page">
<div data-role="header" data-theme="b">
<h2>เนื้อหาข่าว</h2>
</div>
<div>
<div>
<asp:Image ID="newsImage" runat="server" AlternateText="รูปภาพข่าว" />
</div>
<div>
<asp:Label ID="lblDetail" runat="server" Text="Label"></asp:Label>
</div>
</div>
<div data-role="footer" data-theme="d">
<h4>การให้คำปรึกษาด้านการจัดเลี้ยง</h4>
</div>
</div>
</แบบฟอร์ม>
</ร่างกาย>
ที่จริงแล้ว เหตุผลนั้นง่ายมาก นั่นคือ เนื้อหาที่แสดงไม่ได้ถูกวางไว้ภายในเนื้อหา ดังนั้นเพียงเพิ่ม data-role="content" ลงใน div โค้ดที่แก้ไขจะเป็นดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<ร่างกาย>
<form id="form1" runat="server">
<div data-role="page" id="page">
<div data-role="header" data-theme="b">
<h2>เนื้อหาข่าว</h2>
</div>
<div>
<div>
<asp:Image ID="newsImage" runat="server" AlternateText="รูปภาพข่าว" />
</div>
<div>
<asp:Label ID="lblDetail" runat="server" Text="Label"></asp:Label>
</div>
</div>
<div data-role="footer" data-theme="d">
<h4>การให้คำปรึกษาด้านการจัดเลี้ยง</h4>
</div>
</div>
</แบบฟอร์ม>
</ร่างกาย>