The content displayed on the written JQuery page has no margins, and the content is close to the browser edge, which is particularly ugly (as shown below)
The code is as follows:
Copy the code code as follows:
<body>
<form id="form1" runat="server">
<div data-role="page" id="page">
<div data-role="header" data-theme="b">
<h2>News content</h2>
</div>
<div>
<div>
<asp:Image ID="newsImage" runat="server" AlternateText="News Image" />
</div>
<div>
<asp:Label ID="lblDetail" runat="server" Text="Label"></asp:Label>
</div>
</div>
<div data-role="footer" data-theme="d">
<h4>Catering consultation</h4>
</div>
</div>
</form>
</body>
In fact, the reason is very simple, that is, the displayed content is not placed inside the content, so just add a data-role="content" to the div. The modified code is as follows:
Copy the code code as follows:
<body>
<form id="form1" runat="server">
<div data-role="page" id="page">
<div data-role="header" data-theme="b">
<h2>News content</h2>
</div>
<div>
<div>
<asp:Image ID="newsImage" runat="server" AlternateText="News Image" />
</div>
<div>
<asp:Label ID="lblDetail" runat="server" Text="Label"></asp:Label>
</div>
</div>
<div data-role="footer" data-theme="d">
<h4>Catering consultation</h4>
</div>
</div>
</form>
</body>