Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Qt CSS Widget positioning and sizing



  • Is it possible to position and set the size of a widget using CSS ?

    I tried:

        QFrame {background-color: #e9efef;
    	    background-image: url('meshtile_4x4.png');
    	    border: 2px solid #cccccc;
                border-top-left-radius: 8px;
    	    border-top-right-radius: 8px;
    	    border-bottom-left-radius: 8px;
    	    border-bottom-right-radius: 8px;
                width:80%;}
    

    This didn't work, I was expecting the width to be 80% of the parent container, it wasn't.



  • @SPlatten
    In Qt QSS/CSS, all measurements such as width can only be expressed as a number ("measurement units", default pixels), there is no support for percentages :( https://doc.qt.io/qt-5/stylesheet-reference.html#length



  • Thank you, shame, since CSS is a standard and the % are part of that standard, it shouldn't be difficult to incorporate.



  • @SPlatten
    QSS != CSS at all! And Qt widgets != HTML :) Basically you need to read through that reference page I quoted every time you want to put in some Qt stylesheet stuff; it something isn't there, it isn't supported. There are very good reasons why it would be difficult to incorporate....



  • I really don't agree as I'm doing exactly this myself.



  • @SPlatten
    Sorry, "don't agree" about what? That's how QSS is, I didn't write it.... If you wish to suggest to the Qt team that they add support for percentage measurements you can do so e.g. on the Qt bug system, but I assume since they haven't done so in many years they're not going to do it now.



  • I haven't seen QSS mentioned before, I thought it was supposed to be CSS, thats why I said I don't agree.



  • @SPlatten
    https://doc.qt.io/Qt-5/stylesheet.html

    The concepts, terminology, and syntax of Qt Style Sheets are heavily inspired by HTML Cascading Style Sheets (CSS) but adapted to the world of widgets.

    The syntax is the same, but not the supported elements. The same with, say, QTextEdit support for "HTML", which is actually support for Qt's own "rich text" subset of HTML.

    The only full support for HTML, CSS (and JS) is in QWebEnginePage, which really is HTML and is implemented via Chromium engine. I don't see anywhere that Qt has support for HTML.

    I don't disagree with you that it's "a shame", but it is what it is!



  • Not a problem, I'm creating a solution that will behave exactly the way CSS does and already has several benefits over QML.



  • @SPlatten
    For the record, I imagine that implementing "80%" in a widgets app will need to go via QBoxLayout::setStretch() on the layout containing the widgets.


Log in to reply