EDIT: It would seem all I needed to do was add data-position="fixed" to the header and that ensured it was encapsulated by a separate wrapper than content.
According to the panels docs, a panel must be a sibling of the header, content and footer elements within a page. So this is my basic markup (heavily stripped down):
<body>
<div data-role="panel"></div>
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</body>
However, when JQM re-renders the DOM, it creates this:
<body>
<div data-role="page">
<div data-role="panel"></div>
<div class="ui-panel-content-wrap ...">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
</div>
</body>
As you can see, it wraps the header, content and footer in the content wrap instead of just the content. How can I force it to behave correctly?
Related
I am in the process of converting my website from aspx to cshtml (Razor). This is going fine apart from an issue I have with my 2 or 3 column master pages and trying to convert these to a cshtml Layout Page.
In Razor I have basically created separate pages for all of my sections and am then calling these from the Layout Page using #RenderPage. Maybe this in itself is wrong? Basically what all the sections are displaying fine apart from the Main content section which is basically a wrapper for the 3 (or 2) columns that I wish to be displayed within this. I have tried various ways to do this but either just get the 1 main column displayed across the width of the page or get the column displayed above each other but the formatting of the other 2 is incorrect. I know all of the CSS etc works fine in aspx but I am obviously doing something wrong in Razor.
CSHTML New Layout Page
<body>
<div id="container">
<div id="top">
#RenderPage("~/Views/Shared/_Top.cshtml")
</div>
<div id="header">
#RenderPage("~/Views/Shared/_Header.cshtml")
</div>
<div id="nav">
#RenderPage("~/Views/Shared/_Nav.cshtml")
</div>
<div class="main">
#RenderPage("~/Views/Shared/_Main.cshtml")
<div class="columnVerySmall">
#RenderPage("~/Views/Shared/_ColumnVerySmall.cshtml", false)
</div>
<div id="columnLarge">
#RenderBody()
</div>
<div id="columnSmall">
#RenderPage("~/Views/Shared/_ColumnSmall.cshtml", false)
</div>
</div>
<div id="footer">
#RenderPage("~/Views/Shared/_Footer.cshtml")
</div>
<div id="scripts">
#RenderPage("~/Views/Shared/_Scripts.cshtml")
</div>
</div>
</body>
Old ASPX Master Page:
<div class="main">
<main role ="main" class="mainWrapper">
<div class="columnVerySmall">
<asp:ContentPlaceHolder ID="columnVerySmallContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="columnLarge">
<asp:ContentPlaceHolder ID="columnLargeContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="columnSmall">
<asp:ContentPlaceHolder ID="columnSmallContent" runat="server"></asp:ContentPlaceHolder>
</div>
</main>
</div>
I have managed to solve this by changing the Main section as shown in the code block below. I basically added the "Main" code to my layout and then #Render for the Columns. I don't really see how I can do this by having a separate page for "Main" and then calling it from the Layout Page using #RenderPage as I was originally trying. This is what I changed:
<div class="main">
<main role="main" class="mainWrapper">
<div class="columnVerySmall">
#RenderPage("_ColumnVerySmall.cshtml")
</div>
<div class="columnLarge">
#RenderBody()
</div>
<div class="columnSmall">
#RenderPage("_ColumnSmall.cshtml")
</div>
</main>
</div>
At the moment my mobile app looks similar to the one on the link below:
http://jsfiddle.net/TM6Dt/
with the following code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
Mail
Settings
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
What I'd like to do is have both of the circular buttons on the right side of the header bar. I've tried putting them in a controlgroup div but for some reason this changes them so they are no longer circular - I get square buttons with the icons in the middle. What's worse is they are not even aligned properly! You can see what I mean here:
http://jsfiddle.net/Gd8ZB/
and the code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
<div data-role="controlgroup" class="ui-btn-right">
Mail
Settings
</div>
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
How do I get around this problem? Any help would be appreciated!
I've done that as follows:
<div class="ui-btn-right">
Mail
Settings
</div>
Fiddle
http://jsfiddle.net/TM6Dt/1/
one way to do it is to change position of the first button in first example and move it to the right with following css
style="right: 40px; left: initial;"
I would remove the space between the header and the beginning of the collapsible, I would appreciate if you can help
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="collapsible-set" data-corners="false">
<div data-role="collapsible">
<h3>Title</h3>
<p>Content</p>
</div>
<div data-role="collapsible">
<h3>Title 2</h3>
<p>Content 2</p>
</div>
</div>
</div>
[Here is a link with a picture. I would remove the space between the header and the beginning of the collapsible][1]
[1]: http://afines.com/foro/space.jpg
"There's a 15px padding .... on the content div"
This appears to have been answered here to some extent. Also, when inspecting the .ui-collapsible-set element using Chrome's Developers tools option I found that there is provision for margin which is set at .5em.
In order to completely remove the space between a header and a collapsible-set the margin requires adjusting using the <style> tag:
.ui-collapsible-set {
margin: 0 0;
}
i thought this would be a problem of jquery-mobile 1.1.0 RC.
But also in the final release i got this weird problem, that my header overlaps my content div:
When i now click somewhere in the content div, the page rerenders and the content div is at the correct position(directly beneath the header).
I'm using Backbone.js Views for representing content, and jquery-mobile-router. I tried almost everything but i counldn't find any solution for this problem.
Does anyone know a solution for that?
html:
<!-- newsoffers page -->
<div data-role="page" id="newsoffers">
<div data-role="header" data-theme="a" data-fullscreen="false" data-position="fixed">
</div>
<!-- /content -->
<div data-role="content" data-scroll="true" class="content-full">
</div>
<!-- /content -->
<div id="newsoffersFooter" data-role="footer" data-position="fixed" data-fullscreen="false" data-id="mainFooter" data-theme="b">
</div>
<!-- /footer -->
</div>
the code for the header is dynamically injected! The content will be injected while the "pagebeforeshow" event is fired.
"setNavBarCollection" adds a backbone collection to the header, which is then rendered as a navbar.
The "refreshOffers" function generates a view containing a backbone collection which is fetched asynchronously.
Please help,
jquery mobile multipage wont work when a page is called from another page. It only displays the buttons but doesnt navigate to its internal pages when clicked. It works fine when the page is access directly.
<!-- Page 1-->
<div data-role="page" id="description" data-title="Description">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 1-->`enter code here`
</div>
</div>
<div data-role="content">
<!--- content 1-->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
<!-- Page 2-->
<div id="Physicians" data-role="page" data-title="Physicians">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 2 -->
</div>
<div data-role="content">
<!-- content 2 -->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
Try adding to the anchor the attribute rel="external".
Example:
Description
try giving <div data-role="page" first for your second page
When you call this page from another page, it ONLY loads the div[data-role="page"] of that page, not the other div in this multi-page file!
Actually to be precise, when you link to a page from another page, ONLY the code inside the div you are targeting is pulled in via AJAX, even if you had JS in the <head> that won't get loaded either.
Try linking to this page with an external link and you'll find it works fine.