Qt - QTreeView: How to show a checkbox in a themed application? - qt

I inherited a themed application which use Qt as GUI library.
Among other things it has a tree of keywords which is built using QTreeView which behaves WRT to the selected items from the folder pane in the standard way:
Ie. if all the items from selection have the keyword 'Plants' assigned then the checkbox of 'Plants' is checked. If none of the items have the said keyword the checkbox is unchecked and if some of the items from selection have assigned the keyword 'Plants' assigned then the checkbox is grayed.
The problem is that while the above model works ok, when the checkbox is grayed (in 'indeterminate' state), this simply disappears from the screen:
The checkbox is still there (the user can click it and works as expected) but it is invisible.
How can I fix this?
...and because I suspect that it is a problem with the theme, I paste here the relevant (IMHO) part from the theme:
QTreeView::indicator{
border: 0px solid red;
width: 14px;
height: 16px;
}
QTreeView::indicator:unchecked{
image: url(UI:checkbox_unchecked.png);
}
QTreeView::indicator:unchecked:disabled{
image: url(UI:checkbox_unchecked_disabled.png);
}
QTreeView::indicator:checked{
image: url(UI:checkbox_checked.png);
}
QTreeView::indicator:checked:disabled{
image: url(UI:checkbox_checked_disabled.png);
}
QTreeView#UIGroup_TreeView{
background-color: rgb(40, 40, 40);
alternate-background-color: rgb(50, 50, 50);
border: 0px solid black;
}
Any help?

As you can see in docs
A QCheckBox has an indeterminate state that your style is not defining an image for.
You should create images for these:
QTreeView::indicator:indeterminate{
image: url(...);
}
QTreeView::indicator:indeterminate:disabled{
image: url(...);
}

Related

Contact Form 7 - How Do I Style The Select Arrow and Select Options

I'm building a website using Contact Form 7 for WordPress and am having issues styling the select menu. Specifically, I cannot move the arrows or add padding to the dropdown so it's not so tight.
I've tried using this CSS to add spacing to the dropdown items (and some other CSS trickery) but it has no effect:
options {
padding: 20px 10px!important;
margin: 20px 10px!important;
line-height: 36px!important;
border-bottom: 10px solid tan!important;
}
Do you know if there's a way to control the styling behavior of CF7's select menu (arrow and options dropdown)?
Thank you!
Demo Website:
https://miles.birdhouse-demos.com/connect/
CSS styling for <select/> fields is very limited and does not allow you to achieve this. You will need to use a hybrid field plugin that constructs dropdowns with HTML lists that can be styled, such the Hybrid HTML Dropdown plugin, which can be styled and can be loaded on your page to convert your existing <select/> fields into hybrid ones,
<script type="text/javascript">
(function(){
let sel, hyd;
document.addEventListener('DOMContentLoaded', (e) => { //instantiate on document ready.
sel= document.querySelector('#my-select-list');
hyd = new HybridDropdown(sel,{});
})
})
</script>
Alternatively, you can install the Smart Grid-layout extension for CF7 which has a dynamic-dropdown field tag you can use instead of the CF7's default dropdown, and has as the option to display as a Hybrid Dropdown field for you.
Try this
It's possible to customize the dropdown arrow with this code:
select {
-webkit-appearance: none;
-moz-appearance: none;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);
background-repeat: no-repeat;
background-position-x: 98%;
background-position-y: 2px;
}
Here is a list about what you can do with this code:
Remove completely the arrow, to do so, simply remove this line: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
Customize the arrow size. You need to add the following line to the code given above: background-size: 30px 30px;
You can change the value in px.
Change the arrow, to do so, replace the URL in the following line of code: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
This guide will help you to inject the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
If you have any questions, let me know.
Thanks.
Credit: Kevin - From: https://www.jotform.com/answers/2449062-how-can-i-remove-modify-change-the-dropdown-arrow-using-css

Google App Maker - How to keep constant space between the label and input of a dropdown/textbox widget?

I have a field in a form with label/display name:
"I can confirm that this supply is not subject to restrictions under the Test Group, or be of a specialist nature, and as such require other checks that this method does not support."
I am using a dropdown widget with options Yes and No to display it.
I could wrap the label by trying below css.
.app-AddRequest-Field15-Label {
white-space: normal;
}
But now the space between the input and label is very less. Even if I put a margin top to the input when in mobile view the label wraps even more and the space still remains very less/ both override.
Images with borders
Label border: black
Input border: Orange
I want to keep a constant space in all views. Please suggest.
I mocked up a solution that works for up to four lines of data in a label. These are the steps you need to follow:
1.) In the global css, make sure you have the following lines:
.app-Dropdown-Label {
white-space: normal;
}
.twoLinesLabel{
top: -15px !important;
}
.threeLinesLabel{
top: -30px !important;
}
.fourLinesLabel{
top: -45px !important;
}
2.) On any of the client scripts place the following:
function adjustLabel(widget){
var label = widget.getElement().children[0];
var ch = label.clientHeight;
var lines = Math.floor(ch / 15);
switch(lines){
case 2:
label.classList.add("twoLinesLabel");
break;
case 3:
label.classList.add("threeLinesLabel");
break;
case 4:
label.classList.add("fourLinesLabel");
break;
}
}
3.) On the onAttach event handler of any dropdwon you need this adjustment, place the following:
adjustLabel(widget);
The only problem with that approach is that in the UI you won't be able to see the necessary space your field requires so that it don't overflows with the previous field. So you'll have to preview the app and make adjustements accordingly.
Another way is to make sure that your CSS looks like this instead:
.app-Dropdown-Label {
white-space: normal;
}
.twoLinesLabel label{
top: -15px !important;
}
.threeLinesLabel label{
top: -30px !important;
}
.fourLinesLabel label{
top: -45px !important;
}
Then on the Display category of the property editor, simply add the correspoding style to the dropdown. That way you will be able to see the changes in the editor immediately.
Whatever way you choose, the result is the following:

Updating QWidget style after setting it readonly

I have Qt style sheet (qss) for QLineEdit, using different styles for readonly and editable. Works fine, but if I toggle a QLineEdit to readonly (at runtime) the style does not change.
Is there a way to force a stylesheet update of such a line edit?
As requested, the stylesheet:
QLineEdit {
background: transparent;
border: 1px solid green;
border-radius: 5px;
}
QLineEdit[readOnly="true"] {
background: rgba(40,40,40);
border: 1px solid rgba(50,50,50);
}
After change edit's state try next code:
qApp->style()->unpolish(this);
qApp->style()->polish(this);
Where "this" current QMainWindow or QDialog.
Here my own findings:
The polish / unpolish thing works
However, it is somehow inconvenient as I have to apply it for each QLineEdit object, it does not work for me if I do it on the parent level (e.g. on a dialog with multiple QLineEdits)
What works for me is to force an update like this
widget->setStyleSheet(widget->styleSheet());, by just setting the same stylesheet. I works also on the top level widget, updating multiple child elements.

Replacing the Close icon for a JQueryUI Dialog box

After extensive searching on this topic, I haven't been able to find an answer, so hopefully someone can help me with this issue. I have a relatively basic dialog box:
$("#dialog-search").dialog({
resizable: false,
height:dimensionData.height,
width: dimensionData.width,
modal: true,
title: dimensionData.title,
position: [x,y],
open: function() {
$("#dialog-search .dateField").blur();
},
close: function(event, ui){
callBack(event,ui);
}
});
What I want to do is replace the X icon (ui-icon-close) with a different icon provided by the ui (ui-icon-minus), so that clicking the minus icon closes the dialog instead. I've seen posts on how to hide the icon or replace it with a custom image in css, but I haven't yet found a way to replace the icon with another icon to perform the same functionality.
Edit: I also want to be able to use ui-icon-close for a different functionality in my dialog box by adding a custom behavior/location, but that may be outside the scope for this question. Feel free to address this if it's a related solution, though.
Try to see the structure of the dialog and it should not be hard to do it.
http://jqueryui.com/demos/dialog/#theming
Use the create event to change the class of the close button icon to class of another icon will do.
http://jsfiddle.net/Quincy/kHU2M/1/
$("#dialog-search").dialog({
create: function(event, ui) {
var widget = $(this).dialog("widget");
$(".ui-dialog-titlebar-close span", widget)
.removeClass("ui-icon-closethick")
.addClass("ui-icon-minusthick");
}
});
Old question, but maybe I'll help someone. Following CSS made the trick for me, totally custom Close button UI. Not very elegant :), but works fine for me.
.ui-icon-closethick {
background-image: url(images/my-10px-image.png) !important;
background-position: left top !important;
margin: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick {
width: 10px !important;
height: 10px !important;
}
.ui-dialog .ui-dialog-titlebar-close {
background: none !important;
border: none !important;
}
.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-close:hover {
padding: 0 !important;
}
My custom close button shown below:

How to apply diffrent css style on different events of an asp button?

I have a web user control where I have ten asp buttons.
I want that when I hover on these buttons the cursor should change to hand cursor, I am able to do that.
Now I want that when I press a button it should change it's back and fore colors so that it looks selected.
I tried to do that by code but it's not working. Following is my css file content:
.buttonclass
{
background-color: Olive;
cursor: pointer;
}
.selectedItemClass
{
background-color: Blue;
color: White;
}
and on the button click I have written like:
Button btn = sender as Button;
btn.CssClass = "selectedItemClass";
but it's not working any idea or another way to achieve the required behavior.
Your code will only work after post-back, and then the button will remain with the selectedItemClass.
You will need to use client-side code to change the class of your button.
One option would be to use a javascript/jquery solution like:
$(".buttonclass").mousedown(function(){
$(this).addClass("selectedItemClass")
});
$(".buttonclass").mouseup(function(){
$(this).removeClass("selectedItemClass")
});
Have you checked if the class is added or replaced? or you can do:
.selectedItemClass
{
background-color: Blue!important;
color: White!important;
}
to check if the order of your css is ignoring the fact there are two different background-color and the priority of them.

Resources