I've a CSS style for my footer in a jquery mobile app:
[data-role=footer]{
bottom:0px;
position: relative !important;
top: auto !important;
width:100%;
}
Now I want that the footer is always at the bottom of the page, including the case that the content is higher then the page so I have to scroll.
Look and feel should be similar to a normal website, opened in safari on iOS.
Is there a way to do that?
In jquery-mobile to create a fixed footer just do:
<div data-role="footer" data-position="fixed">
your footer data
</div>
Related
I use select2 and bootstrap. Every time I click select2, my page will expand and appear a horizontal and vertical scrollbar.
<script>
$('.select2').select2({
});
</script>
I have used this style then problem is solved
.select2-container {
width: auto !important;
display: block;
}
I'm using jquery-mobile and want to separate page into two areas: list and details. So I do it with two-column grid. But sometimes list or/and detail area getting too long for screen and I'd like to have independent scrolling of both areas, preferably with jquery-tools, so that scrolling of one area doesn't affect the other one.
Does anyone have ideas?
Solution 1
Create content divs data-role="content" and much as you want directly under data-role="page. Set a max-height value and overflow-y: scroll;.
.ui-content {
max-height: 150px !important;
overflow-y: scroll;
}
Demo
Solution 2
Inside main content div data-role="content", add content divs and override their max-height and overlfow-y only not the parent content div.
.ui-content .ui-content {
max-height: 150px !important;
overflow-y: scroll;
}
Demo
I am using the age old trick to make a div scrollable like below:
<div style="height: 100px; overflow: scroll;">
Messages within div.
Messages within div.
Messages within div.
Messages within div.
</div>
But the scroll bar is never shown on the iPad.
Does anybody have an idea how to add a scroll bar or at least some sort of visual indication that the div is scrollable for the iPad?
I have a Div Which Shows on Click of Table Cell of another(TableDiv) Div.I need to set the Boundraies (Limits) depend on the TableDiv Width and Height.My Draggable is out side of TableDiv.
<div class="TableDiv">
<table>
</table>
</div>
<div id="draggingDiv">
</div>
My Jquery Code as below
$("#draggingDiv").draggable({reset:true});
Thanks In Advance
Its clearly an issue with css positioning.
It would be great if u share the css styling of your divs.
But according to me adding this to your style sheet would solve the problem
position:absolute;
width : 100%;
height : 100%;
% Sizing fixes the div to 100% of its parent div.
Same thing could be applicable to draggable element too.
I'm trying to set the icons to the right side rather than the left. I've tried data-iconpos="right" which works fine on the buttons but no affect here.
Thanks
What I have done is to override the style.
Put this after the mobile css is loaded
<style>
.ui-btn-icon-left .ui-icon {
left: auto !important;
right: 10px !important;
}
</style>
Or you can edit the JQM CSS directly, OR you can create your own custom CSS.
These are the only three ways I have found so far, but love the JQM folks to do something about this.
I added a specific rule for collapsible elements, so their icons are always on the left.
.ui-collapsible-set .ui-btn-icon-left .ui-icon {
left:auto;
right:15px;
}
This affects all the collapsible content headers without setting all of the left icons to right. :-)