Opera calculating incorrect height on absolute positioned div with top margin - height

Scenario:
header height + content height extends beyond viewport which has overflowing content hidden. Content is absoultely positioned with top 0, bottom 0, and has a top margin equal to the header height so it doesn't overlap it.
Opera defect:
Opera seems to be calculating the height of the absolutely positioned div (with respect to the viewport) BEFORE it considers the top margin of the element. This is for content (plus header) that extends beyond the bottom edge of the viewport where overflowing content is hidden (html{overflow:hidden}).
Other browsers seem to calculate the height after applying the top margin which results in an overall shorter height for that absolutely positioned div. Not Opera though, the aboslutely poistioned div is the same size as the viewport and extends beyond the viewport the length of the header.
jsfiddle example
Workaround:
Do not use a top margin with absolutely positioned divs that extend beyond viewport where viewport overflow is hidden. Instead, set the top style on the absolutely postioned div to the length of what the top margin was.
margin-top: 0px;
top: 68px;
This will make Opera and all the other browsers behave consistently.

Related

How to resize a border-image in width and height when only her width is resized?

I mean something like when you are expanding the widget by click-drag into her 'right border' in the ➡ direction, then the border-image would be 'scaled' in the direction ↘➡.
It would be the same as resizing the image by clicking at the bottom right corner, the difference is that the widget height is not increasing.
Would it be possible using a stylesheet option?
I have seen this snippet around:
border-image: url(...) 0 0 0 0 stretch stretch;
But it didn't modify anything when resizing the image, i wonder if there are any other 'snippets' like this.

How to set min-height on vue-chartjs

I have a chart in vue3 with vue-chart.js
When I view in mobile size the chart is too small to view in height.
How do I assign a min-height in CSS or in chart-options?
I have set the div height to 200px but the chart will still shrink as the width gets reduced.
I can set the chart-options "responsive: false" and the hiegth but the width does not follow changing size. Maybe a responsive in width but set height is the answer but not sure how to do that.
Thanks

Flex Slider full height and width without stretching

I need Flex Slider to occupy the entire page, like the one on this website: http://webfire.co.uk/
I've set both height and width to 100%, but when I re-size the page, it causes the image to distort and stretch. However, setting the height to auto leaves a white space underneath the slider, so it doesn't fill up the full page. The same thing happens with background-size:cover - the width becomes responsive but the height stays the same.
On the website above, they manage to sort of re-center the image when the window is re-sized.
Any suggestions? :)

Maintaining rounded corners when the height is less than twice the border radius?

In Qt you can use CSS stylesheets to give a QWidget a rounded corner:
QWidget#myWidget {
background-color: #ffbb33;
border-radius: 20px;
}
I wanted to animate this QWidget to show it popping up from the bottom of the screen to notify the user, but found that when the height of the widget is less than the border radius, the rounded edges jarringly disappear.
Is it possible to prevent this?
Update: I appreciate everyone's web related solutions to this problem. Most of them actually do translate pretty well to this application. But I do just want to point out that this application is coded in C++ with Qt libraries. If you have other web-related solutions, please do post them, but be aware that if you're using web technologies to do this, then "It works for me" isn't exactly applicable in this case. ;)

You could animate the corners. Start small or no border radius and build up to what you need. You may not be using jQuery but you could do something similar.
CSS
#myWidget {
border-radius: 5px;
}
jQuery
$('#myWidget').animate({ 'border-radius': '20px' }, 1500);

Why not just set the bottom CSS property to its negative height, and then animate the bottom property to 0, rather than height? See this fiddle for an example. This way you don't have to mess with the height of the element, and there won't be any weird squishing of the content, either.

Since you're using QPropertyAnimation, you can set up an animation in parallel to your resizing animation that animates the rounded border going from radius 0px to 20px (or whatever).

one thing you could do is to reimplement the QWidget's resizeEvent, and there, calculate the maximum availabe size for the borders. Then set the border radius using this.setStyleSheet("border-radius: ?px"); (replacing ? for the result, ovbiously)
You can check here how to reimplement a function: https://beginnersbook.com/2017/09/cpp-function-overriding/, where BaseClass is QWidget and DerivedClass is the new widget, which you could call QRoundedCornersWidget.

Stop Qt QGraphicsView from scrolling on re-size

I have two QGraphicsView that are of equal width, one ontop the other in a Vertical Layout.
When I re-size my application window, the QGraphicsView on the bottom does what I expect, it remains at the exact position it started at, however the top view begins to move the scene to the right exposing coordinates that are below x=0(essentially blank padding on the left edge of the View), which I do not want, I need both to behave the same because they correspond to each other.
I must have missed something, because should these views behave exactly the same? I need them to align, as the top view has hidden scroll bars and scrolls horizontally by however much the bottom view is scrolled.

Make sure your resizeAnchor is set to NoAnchor and alignment is Qt::AlignLeft | Qt::AlignTop. You may need to try some other combination to work with your situation.