I am trying to set the size of a radio button indicator with a style sheet like so:
QRadioButton::indicator {
width: 25px;
height: 25px;
}
In the designer, this shows up correctly. However, when I actually run the app the indicators revert to the normal size. All other entries in the style sheet show up correctly at runtime. Why is this portion of the stylesheet working in the designer but not at runtime? How can I fix it? There are no other stylesheets in my app that that affect radio buttons.
How the radio button appears in designer:
How the radio button appears at runtime:
The sizing got weird, sorry. But you can clearly see that the indicator is much larger in relation to the text in the pic taken from the designer.
There are multiple things you need to look for when using designer.
Now to quick check.
//Add this lines and try again
QRadioButton *obj = new QRadioButton()
obj->setObjectName("test");
//If your using qss/css file for styling things...
#test QRadioButton::indicator {
width: 25px;
height: 25px;
}
Few more inputs...
Font size of text attached to QRadioButton also check changing by some more pixel and check what sort of changes shown to your widget.
Hope this will help you.
Related
Is there any solution to change the font color of QTableWidget's heads and items separately using Qt Designer? I want to make a complete design in Qt Designer without using code to set any styles
I wanted to add this as a comment but unfortunately my reputation is too low.
This should be possible by using a Stylesheet in the property editor. I can't test it right now but I assume it should look like these:
QTableWidget {
color: red;
}
QHeaderView {
color: blue;
}
Edit: I saw later that you asked without using code to set any styles. This is as far as I know not possible. But you can set the Style in property editor as I suggested, s.t. you can see the changes in the Qt Designer directly.
I want user to select a theme which he wants to apply to the document.
So i have created a popup dialog which has multiple themes which are qradiobutton. But I want to display only icons and remove circle from the widget.
I have tried visible:hidden for the radio button but that didn't worked.
If you want to customize QRadioButton with style-sheets I suggest you check the reference documentation: https://doc.qt.io/qt-5/stylesheet-reference.html#qradiobutton-widget
You should also find useful the examples given in Qt documentation as it shows how to replace the check indicator by different images:
QRadioButton::indicator {
width: 13px;
height: 13px;
}
QRadioButton::indicator::unchecked {
image: url(:/images/radiobutton_unchecked.png);
}
QRadioButton::indicator:unchecked:hover {
image: url(:/images/radiobutton_unchecked_hover.png);
}
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qradiobutton
If you do this yo can just use the indicator to display the icon and leave the QRadioButton label empty.
However, I have to warn you, depending on which QStyle you are using, it could happen that using style-sheets destroys completely the style of a component. A general example is: you are using a style where buttons have round corners, you use style-sheets to change the font of the button and as a result the button does not have round corners anymore. This is caused by incompatibilities between some QStyle and the style-sheet mechanism. If you do not want to make a multi platform app, it might not be an issue as you will use only one style, but if you make an multi platform app, you have to check every possible style you platform can have on the different platforms.
So if you want to have a QRadioButton without indicator and not use style-sheets, you can do it in C++ directly by subclassing QAbstractButton. Just make sure you set your class to be autoExclusive so that is will behave like a radio button.
would you try this? ( visible => visibility )
input[type="radio"] {
visibility: hidden;
}
or
input[type="radio"] {
display: none;
}
I'm facing this problem when styling an editable QComboBox:
I'm unable to change the color of the grey box inside the QComboBox...
Any idea how to change it just with a stylesheet?
Thank you
What about
QComboBox:editable {
background: white;
}
? I did not test it, but the reference seems good to me.
Edit
As of using Qt version 5.6.2 the provided change works as desired. No differently colored box inside the currently edited QComboBox.
This shoud work
YourCombobox->findChild<QLineEdit*>()->setStyleSheet("QLineEdit {background: green;}");
Previous line get the reference to the QLineEdit which is part of the QComboBox widget and applies the style sheet to it, not to the combobox.
I don't know if this could also work, if you want to try it and give a feedback..
YourCombobox->setStyleSheet("QLineEdit {background: green;}");
Currently I am working on RadCalendar. My requirement is Calendar has to be started from current month and we should have only NEXT navigation button. When user navigates to next month, then the PREV navigation icon had to be displayed along with NEXT navigation icon.
How can I achieve this????
For test purpose I created a TelerikStyle.css and placed the below code:
BODY
{
margin: 0px;
padding-left: 0px;
font-size: 32px;
font-family: Arial;
}
.MyRadCalendar .rcTitlebar a.rcPrev
.MyRadCalendar .rcTitlebar a.rcFastPrev,
.MyRadCalendar .rcTitlebar a.rcNext,
.MyRadCalendar .rcTitlebar a.rcFastNext
{
visibility: hidden;
}
And I am creating this Radcalendar dynamically. So I tried to attach to apply this CSS Styles to Radcalender through below way.
_myCalendar.CssFile = "~/stylesheets/TelerikStyle.css";
_myCalendar.TitleStyle.CssClass = "rcTitlebar";
But my navigation buttons are not hiding. So please tell me how to apply CSS Styles for Radcalender dynamically. And How to achieve my above requirement?
Each of the Telerik Skins actually have a minimum height and width setting for the RadCalendar in order to ensure that the visual styles of the control are not broken.
As you can imagine modifying the width and height to arbitrary settings could skew the look and feel of the control quite a bit.
What you can do, however, is either modify one of the existing skins or create your own.
This section http://www.telerik.com/help/aspnet-ajax/calendar-custom-skin.html in their online documentation covers how to change the appearance, and the specific article covers how to create a custom skin.
Thanks
AB
It is possible to configure the QWebView to work with "Elide" disabled (equivalent to Qt::ElideNone)?
The "Elide" graphic texts being compressed (elieded) to fit inside the select.
Example:
I wish the entire text to be displayed when clicked on comobox (selectbox). Is it possible?
Thanks.
[edit]
I think it may be the way the styleSheet (qt):
QComboBox QAbstractItemView {
...
}
I just do not know which property to use styleSheet disable "elited".
Maybe something like this:
QComboBox QAbstractItemView {
elided: none;
...or...
elide: none;
}
Anyone know a link with all properties stylesheets used in QT (I searched but did not find)?
[edit 2]
I tried white-space: pre; and white-space: nowrap; that seems the most logical, but does not work with QAbstractItemView, will be the selector is another?
You can change the textElideMode property by adding a rule QComboBox QAbstractItemView { qproperty-textElideMode: ElideNone } (See Style Sheet Syntax - Setting QObject properties) but it will only clip the text on the right without extending the drop-down box.
According to the code source, the list view adjust its size to its content when it is displayed as a popup which is done by adding this in the stylesheet:
QComboBox {
combobox-popup: true;
// To make room for the possible scrollbar
// (the value has to match the scrollbar width of the current style/platform)
padding-right: 20px;
}
Outside that popup mode, the width of the drop-down box is taken from the list view minimum size (or from the min-width css property of the QAbstractItemView), but there doesn't seem to be a way, with css only, to automatically adjust the size of the drop-down box to the content of the list.