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
Related
I have a view where a lot of data is displayed in a table. I have to have a big screen to see it all but can not count on that users always have that size as I have.
But unfortunately my grails project doesn't support horizontal scroll so if your screen isn't wide enough, you aren't able to see the rightmost part.
What can I do to get the view scroll horizontal?
I use version 3.2.4 of grails.
Add the following style to your gsp, overflow is discussed here:
<style type="text/css">
table {
display: block;
overflow-x: auto;
}
</style>
I'm using jQuery UI and have setup a table to resize columns.
span {
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
I apply some simple ellipsis to the cells so that when they are too small I get the ...
If I look at the page it looks like:
When I resize the column however, it doesn't re-apply the ellipsis :(
Is there a simple way to do this? I tried removing the overflow by making it visible, then re-applying it to be hidden, but the ellipsis goes back to the original view when rendered.
The problem was that the Table Cell had a fixed width in CSS:
width: 120px;
Which was then resized with JavaScript. When the resizing happens the cell content in the cell stayed the same width.
Changing the CSS to be min-width: 120px; and resizing with JavaScript from width to min-width solved the problem.
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>
I have a simple example where I am trying to drag an element inside another element with a fixed position. Once I drop the element inside the fixed (or absolute) position container, the element is no longer draggable.
Does anyone have any thoughts? I'm thinking this might be a bit of an issue if any fixed/absolute positioned containers cause draggable elements not to function properly. See my JS Bin.
http://jsbin.com/igiqan
This has actually nothing to do with the fixed position.
Your draggable element has a lower implicit z-index based on the DOM tree. So when you drag it onto the drag area, it is below it.
Give it an explicit z-index so it is frontmost:
.box
{
width: 20px;
height: 20px;
color: #c40000;
background-color: #c40000;
z-index: 100;
}
DEMO
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. :-)