I have the following example. When I expand the panel, the remaining items below it goes down to make room for the content of the opened panel.
However, what I need is, when I expand the panel, it should scroll upwards so the header of the opened panel is on top. Reason being is that, I am planning to make the content height to occupy as much height as possibly available in the screen, making the opened panel almost occupy most of the screen.
For Angular Material Component's Expansion Panel,
you can use the following css for making the expanded expansion-panel to be present above all, ie the expanded expansion panel will move to the first position in the list.
--------- styles.css ---------.
.mat-expansion-panel,
.mat-accordion {
display: flex !important;
flex-direction: column;
}
.mat-expansion-panel.mat-expanded {
order: -1;
}
Approach :
Give .mat-accordion, display: flex and manipulate order property on the expanded expansion-panel to achieve the goal.
Stackblitz- Demo showing expaned panel moving to top in the list
Related
I have a vaadin layout that works fine on a larger screen. As soon as the screen size (and the resolution) drop, all the contents get cut off and no scrollbar appears.
I tried using a Panel to remedy the issue, but the panel likewise gets cut off.
Panel panel = new Panel();
panel.setContent(horizontalSplit);
panel.setSizeFull();
panel.getContent().setSizeUndefined();
I also tried using
Responsive.makeResponsive(horizontalSplit)
but it still cuts off
Any suggestions?
If you set
panel.setSizeFull();
and
panel.getContent().setSizeUndefined();
then it is normally to content be cutt of on small screens.
Solution is to setSizeFull() on panel content too.
Add the following style in your styles.scss file
.overflow-auto{
overflow : auto;
}
Then set StyleName to your panel
panel.setStyleName("overflow-auto");
The jQuery Mobile popup dimensions are limited to having a 15px margin on the left an right sides, and a 30px margin on the top and bottom. If the content is too large for these constraints, then the popup grows longer (not wider), so that the whole page must be scrolled to view the popup content.
I need to change this behavior such that the popup dimensions never exceed the height of the window, and such that the content scrolls vertically within the popup.
It is possible to limit the size of the popup thusly:
$('#popup').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 30
$('#popup').css('max-height', maxHeight + 'px')
}
})
...but the popup content is the same, passing the bottom of the popup and still forcing the user to scroll the page, rather than the content within the popup.
How do I allow the popup content to scroll vertically within the popup?
You should use:
$('#popup').css('overflow-y', 'scroll');
Here's a working example: http://jsfiddle.net/Gajotres/mmRnq/
Final notes
If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.
I am able to use http://jsfiddle.net/9pUu4/ code to have vertical text in table cell. Above this table is my horizontal navigation menu which expands into links upon hovering the tab with jquery ui menu. My problem is that when hover the tab above vertical text the text laid over the menu. But it doesn't happen when hover the horizontal text on the same row of the table; that is menu covers page content. This happens on chrome and firefox.
I tried messing with z-index issue with no luck. Does it have anything to do with the transform css property (-webkit-transform, -moz-transform)? Or jquery menu conflict with vertical text?
.Vertical
{
writing-mode:bt-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
After digging deeper in SO, How do I make sure my drop down menus overlap and cover anything on my page?, I suspect vertical text: transform origin; or simply vertical text comes after menu on page layout, may make this vertical text "on-top".
Anyways, adding this wrapper outside of the menu works.
#div1
{
position : relative;
z-index : 1000;
}
More code
z-index = 1 as stated works, but I just want to make sure it covers everything.
Is is possible to create a scrolling div within a html5 IOS app where the height needs to be dynamic?
To give a bit of background to my headache - our app has 3 main panels - the user can left or right swipe to reveal the first and third panel which contain notifications/settings (as in the Facebook app. All 3 outer panels are fixed position.
The main panel contains 6 pages - which are all absolutely positioned divs which hide and show via menu selection. Each revealed div (or page) needs to scroll, but all content is dynamic - so I cant set a height.
I have found several solutions for fixed heights - but none so far for dynamic heights..
Any suggestions?
Scrolling Divs
Another new feature in iOS 5+ is divs can finally scroll. To make a div scroll you’ll just need to add the following (this example has a fixed header but adjust the positioning to fit your app):
.scrollable {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
The trick here is adding the -webkit-overflow-scrolling to anywhere you’d normally set your overflow. The downside of Apple’s implementation is that the div doesn’t bounce as you’d hope when you are already at the absolute top or bottom. Instead of bouncing the div being scrolled, it bounces the whole page and reveals the browser chrome. This is where you’ll need a javascript fix.
Please try this example for Scrollability.
Please see this Link
iScroll is a party lib which help in good scrolling.
It has a scrolling without providing height.
We just have to call a method refresh when dom elements of scrolling are added.
I have a div in a page (footer) and I want the following to happen with CSS:
If the page has not enough content to fill the window, the div should be at the very bottom.
If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.
If I do it with position absolute etc, I can't get the second case to work.
Any ideas?
I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.
You want to use a sticky footer.
For example: http://ryanfait.com/sticky-footer/
or if you google Sticky footer you find a few alternatives