Styling QSpinBoxes in QColorDialog without affecting QAbstractSpinBox styling with QSS

To give our Qt desktop application a stylish look, I have been utilizing Jorgen-VikingGod's impressive QSS framework as a foundation. Unfortunately, we encountered a hurdle when it came to usability on a dated tablet device running Windows. The tiny spin box buttons were too small for some of our customers to operate effectively.

One suggested solution was to create larger +/- buttons and position them on opposite sides of the spin box:

https://i.sstatic.net/mDmpk.png

However, this led to compatibility issues with certain Qt convenience controls like QColorDialog:

https://i.sstatic.net/pmWoA.png

The QSS code I used is as follows:

 (QSS Code here)

I attempted to tweak the selectors in my QSS code but could not achieve the desired outcome without causing a jumble of default and customized styles. It seems that QSS does not support CSS3-style filtering through the ":not" selector functionality.

Is there a way to apply this style globally to all spin boxes in my application except those within QColorDialog? Alternatively, is there a method to exclude a specific subclass like QColSpinBox from inheriting this styling? I prefer not to manually set this style individually on each spin box instance in my application.

cssqtqtstylesheets

Answer №1

If you want to customize the appearance of certain components in QColorDialog, you can use CSS/QSS.

https://i.sstatic.net/QE0VK.png

For example, you could include the following code snippet:

QColorDialog QSpinBox {
    min-width: 3.5em;
    text-align: center;
}

This will give some additional space to the spin boxes. I also recommend using min-width and min-height for QColorDialog's QColorPicker like so:

QColorDialog QColorPicker {
    min-width: 20em;
    min-height: 20em;
    border: solid 1px gray;
}

Answer №2

Appreciate the guidance provided!!! It took me quite a while to figure out how to reset Push Buttons back to their default/native state after struggling with Qt 5.9.2:

QColorDialog QPushButton {background-color:native; color:native; border: native; border-radius:-1px; padding: native;}

There's no use of auto or default values here.

The magic lies in using native, but for the border and background, you need to eliminate any border-radius due to the code snippet below:

void QStyleSheetStyle::drawComplexControl(ComplexControl cc, const QStyleOptionComplex *opt, QPainter *p,
                                          const QWidget *w) const
{
    RECURSION_GUARD(baseStyle()->drawComplexControl(cc, opt, p, w); return)

    QRenderRule rule = renderRule(w, opt);

    switch (cc) {
    case CC_ComboBox:
        if (const QStyleOptionComboBox *cmb = qstyleoption_cast<const QStyleOptionComboBox *>(opt)) {
            QStyleOptionComboBox cmbOpt(*cmb);
            cmbOpt.rect = rule.borderRect(opt->rect);
            if (rule.hasNativeBorder()) {
                rule.drawBackgroundImage(p, cmbOpt.rect);
                rule.configurePalette(&cmbOpt.palette, 
            ...
            ...
            ...

... ... ...
bool hasNativeBorder() const {
    return bd == 0
           || (!bd->hasBorderImage() && bd->styles[0] == BorderStyle_Native);
}
... ... ... 
void QRenderRule::fixupBorder(int nativeWidth)
{
if (bd == 0)
    return;

if (!bd->hasBorderImage() || bd->bi->pixmap.isNull()) {
    bd->bi = 0;
    // ignore the color, border of edges that have none border-style
    QBrush color = pal ? pal->foreground : QBrush();
    const bool hasRadius = bd->radii[0].isValid() || bd->radii[1].isValid()
                           || bd->radii[2].isValid() || bd->radii[3].isValid();
    for (int i = 0; i < 4; i++) {
        if ((bd->styles[i] == BorderStyle_Native) && hasRadius)
            bd->styles[i] = BorderStyle_None;

Even when specifying the border as native, it defaults to none if a border radius was previously set up... You must provide an invalid value for radius. Radius is stored as QSize which is invalid for -1, -1, -1, -1.

none will cause hasNativeBorder to fail, resulting in no border/background at all...

Wouldn't it be easier to have a simple qt-all-native: true or a similar QSS extension...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I change the cursor of a button to a pointer in Bootstrap 4 when the button is not disabled?

I'm working with a bootstrap button <button class="btn btn-primary">Login</button> My goal is to change the cursor to a pointer (hand) on this button when it's not disabled, instead of the default arrow. The disabled property of th ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way to soften the repetitive elements in the background image?

Is there a method to blur the part of a background image that is repeated, such that if it is positioned in the center, the sides of the image appear blurry as well? ...

jqueryhtmlcss

Applying a variety of elements to a single function

I am in the process of creating a mini-survey and I want the buttons to change color when clicked, but return to normal when another button is selected within the same question. Currently, clicking on a button turns it red while leaving the others clear. H ...

javascripthtmlcssfunction

"Implementing JQuery addClass Functionality to Enhance Menu Sty

I've created a menu that is stacked on top, with the "Representaciones" section shown on the same page below a welcome image. However, when I click on it, everything works fine but if I refresh the page, the "selected" class disappears from "represent ...

jquerycssmenu

When you hover over the image, the text will disappear

When I hover over the image of LTC, a thumbnail appears with text and a button. However, I do not want the text "LTC" to be shown when hovering over the image. <div class="col-md-4"> <div class="view view-eighth"> <div class=" ...

htmlcss

Connecting your HTML file to a CSS stylesheet

I'm struggling to connect my "index.html" file with my "stylesheet.css" file. I've tried copying the code from resources like CodeAcademy and w3schools, but nothing seems to be working. I'm currently using Notepad++ as my text editor - could ...

htmlcss

Prevent a div from being displaced by the transform property once it reaches the window's border

Is it possible to prevent the viewer I created using CSS transform from moving when its borders reach the window borders? Should I consider using a different method instead? If you'd like to see the code, you can check it out here. var x=0, y=0 ...

javascriptjquerycssbordertransform

I successfully managed to ensure that the splash screen is only displayed upon the initial page load. However, I am now encountering an issue where it fails to load again after I close the page. Is there any possible solution

After successfully implementing a splash screen that only plays once on page load, I encountered an issue. When I close the tab and revisit the page, the splash screen no longer plays. Is there a way to fix this problem? Perhaps by setting a time limit for ...

javascripthtmlcsscss-animationssplash-screen

The li::before pseudo element isn't working properly

I am having issues with my UL list where the CSS class I applied is not affecting the li::before pseudo class. Here's the HTML: <ul class="my-ul"> <li>Item 1</li> <li>Item 2</li> </ul> This is the CSS I a ...

htmlcsspseudo-element

Issues with Videojs Responsive Lightbox Functionality

I am looking for a solution to display VideoJS in a lightbox while keeping it responsive. I came across this helpful code snippet: https://github.com/rudkovskyi/videojs_popup. It seemed perfect until I tried using it with the latest version of Videojs and ...

javascriptcsshtmllightboxvideo.js

Ensure the clarity tabs labels have the padding-left CSS property added

In my project, there are 2 clarity tabs (you can view the StackBlitz reference here). I want to apply the padding-left property specifically to Tab1 (the tab label itself, not the content) in order to create some space around it. Through Chrome Dev Tools, ...

cssangularpaddingvmware-clarity

Partial height side navigation bar

Check out this JS Fiddle: https://jsfiddle.net/wqbn6pe6/2/ This is a simple side navigation, but the grid layout is causing the sidebar not to stretch to the bottom even though it's set at 100% height. Any suggestions or solutions? Here's the ...

htmlcsstwitter-bootstrap-3

Optimizing Bootstrap 4 Carousel for various screen sizes

I want to implement a full screen bootstrap 4 carousel with a transparent navbar at the top. The provided code seems to be functioning correctly. HTML: <!doctype html> <html lang="ro"> <!-- START head --> <head> &l ...

htmlcssbootstrap-4

The contents of the multi-level navigation are automatically shown as the page loads

I've implemented a multilevel dropdown menu on my website using a plugin, and it works as expected. However, there's an issue where the contents of the dropdown menu display for a brief moment while the page is loading. I tried adjusting the posi ...

javascriptjqueryhtmlcss

Can you please explain what shape-id denotes and provide guidance on locating it within a CSS file?

I have a question that may seem trivial to experienced web developers - what exactly is "shape-id"? For example, in the code <hr shape-id="2">. I'm currently attempting to change the color of the horizontal lines (hr) on my website, but I can& ...

htmlcss

overlaying an image with a CSS box and then dynamically removing it using JavaScript

I am new to JavaScript, so please bear with me if this question seems quite simple. I am facing an issue with my current task. There is an image on a web page. My goal is to place a black box on top of the image (using CSS) to cover it up. Then, with th ...

javascriptjqueryhtmlcss

Creating a visually striking layout with Bootstrap card columns masonry effect by seamlessly adjusting card heights to prevent any

When using the bootstrap card columns masonry and a user clicks on a button inside a card, the height of the card changes dynamically by adding a card-footer. However, in certain situations, the cards change position causing a jumpy effect. To see this i ...

javascriptjqueryhtmlcssbootstrap-4

Customizing TinyMCE's font style menu options

Our platform utilizes TinyMCE as in-place editors to allow users to make live edits to content. However, a challenge arises when using a dark background with light text, as TinyMCE defaults to using this text color rather than black. https://i.sstatic.net ...

cssreactjstypescripttinymce

The selected text on the webpage is not showing up highlighted

Encountering an unusual issue that is challenging to comprehend and difficult to find a solution for using Google search. I have created a website with multiple web pages. Each page follows the same format: header with links at the top, content area in th ...

css

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...

asp.netjavascripthtmlcss