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;
}
Related
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'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 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'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'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. :-)