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.
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 am bulding a mobile project which has a number of modules having elements positioned as fixed. The issue which am facing is only on browsers running on iOS.
The exact issue is that whenever I tr to scroll over the body of the page having , say the bottom toolbar, as fixed, the whole fixed element moves respectively with the scroll, and once the scroll ends completely, then only it comes back to its assigned place.
I have given the body of the page a relative css rule.
Please help as this happens only on iOS.
.add-to-block {
background: #fff;
position: fixed;
bottom: 0px;
right: 0px;
display: block;
height: auto;
width: 100%;
*(inner content element) {
inner content element styling...
}
}
Please try this, source here
.add-to-block {
transform: translate3d(0,0,0);
.....
.....
}
There is not really an easy answer to this as it has been a known issue on ios for a while (supposedly fixed in ios8) but this gives you a few ways to fix it: https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios it details all the issues with position fixed on ios devices and possible ways to fix it if you need to use it.
Add height: 100% and overflow: auto for fixed element.
Full example at https://codepen.io/astnt/pen/ExgOqeX
Safari allows you to scroll beyond the limits of the fixed div so that it can put in a nice bouncy effect. When you scroll past this point though, if there is a container that is scrollable, then subsequent touch events get handed off to this. Therefore scrolling does nothing for a bit until control gets handed back to the fixed div.
The fix is to give the container div the overflow-y: hidden style so that Safari does not hand off the touches, and we continue interacting with the fixed div.
None of the proposed solutions worked for me, although i had the fixed element inside the scrolling div (and moved it up), had no transform or other layer-creating properties on the parent elements (and created a layer on the fixed element) etc.
My solution was to just change the fixed element to be position: sticky;
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 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. :-)