Is it possible to accomplish the following in jquery mobile?
I've got a grid
<div class="ui-grid-a" >
<div class="ui-block-a" >
navigationtree
</div>
<div class="ui-block-b">
datatable with 50+ rows
</div>
</div>
when the table has too much data a scrollbar should appear and
block-b should be scrollable where block-a should be sticky at all times
so that the navigation stays in place.
is it possible to accomplish such a behaviour in jquery mobile?
Because 2 grid blocks share a width of 50% each its easy to achieve by setting block a to a fixed position and block b to float right.
Demo
http://jsfiddle.net/59v0gy6w/
<div class="ui-block-a" style="position:fixed">
<div class="ui-block-b" style="float:right">
cytasos has given a good answer! if you actually want just the ui-block-b to be scrollable, you can do it this way:
First scale the ui-content div to fill the device/screen height:
function ScaleContentToDevice() {
scroll(0, 0);
var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
$(".ui-content").height(content);
}
$(document).on("pagecontainershow", function () {
ScaleContentToDevice();
});
$(window).on("resize orientationchange", function () {
ScaleContentToDevice();
});
Next set the grid height to 100% and the block-b div to 100% height and overflow in CSS:
.ui-grid-a {
height: 100%;
}
.ui-block-b {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
DEMO
Related
I have mat-toolbar, so here i want the scrolling on the page to happen after mat-toolbar. so that mat-toolbar remains as fixed header. So that even if i scroll down i see the toolbar.
<mat-toolbar style="flex: 0 0 128px;" color="primary">
<button mat-icon-button aria-label="Back" routerLink="/reports">
<mat-icon>arrow_back</mat-icon>
</button>
<mat-card-title>Upload Report</mat-card-title>
</mat-toolbar>
<div>
//other form elements
</div>
Wrapping the toolbar and the other content in a CSS grid - having 100% height - will work, making both a grid row where the toolbar has auto height and the other content has overflow:auto.
<div class="container">
<mat-toolbar>
<h1>
Fixed Angular Material toolbar
</h1>
</mat-toolbar>
<main>
<p>
This is the main content which is scrollable because the main content has 'overflow-y: auto' and is a grid row
with a height of 1fr (the container is a CSS grid). This only works when the container div has a height of 100%.
</p>
</main>
</div>
.container {
height: 100%;
display: grid;
grid-template-rows: auto 1fr; // mat-toolbar main
}
/* Grid row 1 */
mat-toolbar {
}
/* Grid row 2 */
main {
overflow-y: auto;
padding: 1rem;
}
Here is a working example: https://www.jitblox.com/design/MdTqMjv9Pr
I am having an issue with my fixed header and footer scrolling up/down with my page content and then returning after scrolling stops. It only happens on iOS devices, at least that I am aware of.
Here is the CSS code that I have:
.toolbar-wrapper {
background: #f5f5f5;
border-bottom: 1px solid #e4e4e4;
min-width: 20em;
position: fixed;
left: 0;
top: 0;
}
.wrapper {
width: 100%;
clear: both;
}
And the HTML:
<div class="toolbar-wrapper wrapper">
<div class="container">
<nav id="click-menu" class="primary-nav collapsable-menu" role="navigation">
<span class="menu-toggle">Select a Page</span>
<div class="menu-wrap">
</div>
</nav>
</div>
<!-- .container -->
</div>
Try adding -webkit-transform: translate(0, 0); to .toolbar-wrapper.
I was having a similar issue where the a fixed position element was getting "stuck" in the middle of the page when scrolling back up. I believe that adding transform forces ios safari to use hardware acceleration - I could be wrong about that however.
Hope that helps!
I'm trying to give a "Options" drop down in the header bar. I've successfully added it to the header. But the problem is, it is stretching in its "expand" state, and return to normal in its collapse state.
Here's the fiddle to the problem : http://jsfiddle.net/vNTR5/
I've tried a couple of things :
I noticed the "ui-collapsible-heading ui-collapsible-heading-collapsed" class in the collapsed state, vs "ui-collapsible-heading" class in the expanded state. I captured the events and tried adding the "ui-collapsible-heading-collapse" class. It resulted in keeping the list permanently "expanded" once it had been expanded.
I tried making custom css class, and adding and removing those. But it simply won't take in margin-left added through a class. It takes it when its inline.
Please help.
Code snippet:
HTML:
<div data-role="header">
<h1>Main Menu</h1>
<div data-role="collapsible" id="optionsMenu" data-mini="true" class="rightMenu" data-collapsed-icon="gear" data-expanded-icon="gear">
<h3 style="margin-left:-20%;">Options</h3>
<ul data-role="listview">
<li data-icon="false">Settings</li>
<li data-icon="false">Logout</li>
</ul>
</div>
</div>
CSS:
.rightMenu{
position: absolute;
top:-10%;
right:2%;
}
Working example: http://jsfiddle.net/Gajotres/FSSzK/
.rightMenu {
position: absolute;
top:-10%;
right:2%;
width: 100px !important;
}
.rightMenu .ui-collapsible-content .ui-listview {
margin: -10px -15px -10px -35px !important;
}
so I'm using the Twitter Bootstrap plugin for Grails and I'm having trouble centering modals. When I remove the class="modal" part from the div that contains the modal, my centering function works properly, but when I put it back (which is necessary for it to have the functionality of a modal it gets stuck halfway off the page). Any help would be very nice :D
Here's my code:
<a style="position: relative; top: 2px;" data-toggle="modal" href="#myModal${instanceType.id}"
id="${instanceType.id}"> ${message} </a>
<div class="modal" style="background: black; overflow: hidden; top: 0px; left: 0px; display: none; border: 2px solid white; float: center; position: absolute"
id="myModal${instanceType.id}">
<div style="border:none" class="modal-header">
<a style="color:white;" class="close" data-dismiss="modal">X</a>
</div>
<iframe id="iFrame" style="border: none;"width=800px height=675px src="${action}/${instanceType.id}">
</iframe>
<div class="modal-body" style="background: black;"></div>
<div style="border:none; background: black;" class="modal-footer">
<a "="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<script>
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$(myModal${instanceType.id}).css({
'width' : $(window).width()*.75,
'height' : $(window).height()*.75
})
$(myModal${instanceType.id}).center()
$('#modal-footer').append('${saveName}')
function submitFunction(){
$("iFrame").contents().find("#submit").click()
}
function changePre(){
$("iFrame").contents().find(".buttonNew").submit()
alert('hi')
}
</script>
If you're using the default modal styling centers the modal by absolute positioning. So when you customize a modal windows, and you change the size of it, you shall adjust relevant elements also. Like the modal-body and modal header and the .modal class.
And to answer your question, and if I got your question right, that is you were trying to position your modal VERTICALLY.
Open bootstrap.css , then find and edit .modal.fade.in
The default value is 50%. Try to play with it until you achieve your desired position. Increase it to move the modal to the bottom, decrease it and it will do the opposite.
Default modal size modal window positions Horizontal centre of the screen, once the modal customizes(width changes), need to position it with script.
sample script:
$('#myModal').modal({
backdrop: true,
keyboard: true
}).css({
width: '800',// custom width
'margin-left': function () {
return -($(this).width() / 2);
}
});
I'd like to pop up a dialog that is not full screen, i.e., it "floats" above the page which opened it. Here is what I am trying:
<div data-role="page" id='Page1'>
<div data-role='button' id="Button1">Open Dialog</div>
</div>
<div data-role="dialog" id='Dialog'
style='width:200px; height:100px; top:100px; left:100px;'>
<div data-role='button' id="Button2">Close</div>
</div>
<script>
Button1.onclick = function() {
//$.mobile.changePage($('#Dialog'))
$.mobile.changePage('#Dialog',{role:'dialog'})
}
Button2.onclick = function() {
$(".ui-dialog").dialog("close");
}
Even though I set the bounds on Dialog's div, it is still full screen.
Here's what I came up with (after some great hints from Jasper):
<div data-role="page" id='Page1'>
<div data-role='button' id="Button1" >Open Dialog</div>
</div>
<div data-role="dialog" id='Dialog'>
<div data-role='header'id='Dialog_header'><h1>Dialog</h1></div>
<div data-role='button' id="Button2">Close</div>
</div>
<script>
Dialog_header.onclick= function(e){
$("#Dialog").fadeOut(500);
}
Button1.onclick = function(e) {
var $dialog=$("#Dialog");
if (!$dialog.hasClass('ui-dialog'))
{$dialog.page()};
$dialog.fadeIn(500);
}
Button2.onclick = function() {
$("#Dialog").fadeOut(500);
}
Button2 is a bonus: it shows how to close the dialog from code.
You can fiddle with it here:
http://jsfiddle.net/ghenne/Y5XVm/1/
You can force a width on the dialog like this:
.ui-mobile .ui-dialog {
background : none !important;
width : 75% !important;
}
Notice I also removed the background so the dialog can appear on top of the other page. The only problem that remains is that when you navigate to the dialog, the other page is hidden so the dialog appears on top of a white background.
Here is a demo: http://jsfiddle.net/jasper/TTMLN/
This is a starting point for you, I think the best way to create your own popup is to manually show/hide the dialog so jQuery Mobile doesn't hide the old page.
Update
You can certainly use a dialog as a popup with a small amount of custom coding:
$(document).delegate('#dialog-link', 'click', function () {
var $dialog = $('#dialog');
if (!$dialog.hasClass('ui-dialog')) {
$dialog.page();
}
$dialog.fadeIn(500);
return false;
});
Where dialog-link is the ID of the link that opens the dialog as a popup.
Here is a slight update to the CSS to center the modal horizontally:
.ui-mobile .ui-dialog {
background : none !important;
width : 75% !important;
left : 50% !important;
margin-left : -37.5% !important;
}
And here is a demo: http://jsfiddle.net/jasper/TTMLN/1/
here is a plugin that u can use..this plugin is also customizable with ur own html.
simpleDialogue plugin for jquery mobile