CODEWITHSUNDEEP
c++cssqtuser-interfaceqwidget
Cory Klein
Cory Klein

Reputation: 55900

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;
}

QWidget with rounded edges

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.

Animated QWidget showing effect of disappearing rounded edges

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. ;)

Upvotes: 1

Views: 697

Answers (4)

Martí Climent
Martí Climent

Reputation: 587

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.

Upvotes: 0

Phlucious
Phlucious

Reputation: 3843

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).

Upvotes: 1

hungerstar
hungerstar

Reputation: 21725

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);

Upvotes: 2

justisb
justisb

Reputation: 7290

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.

Upvotes: 1

Related Questions