Using a stylesheet I manage to set the background for the title element as shown in the image above (1.) using:
QGroupBox::title
{
background-color: rgb(255, 255, 0);
subcontrol-origin: margin;
subcontrol-position: bottom center;
}
Now I want the title to expand to the maximum size of the hosting QGroupBox as shown in image 2.. How do I accomplish this?
Thanks!
Edit: I wish to do this using style sheets only.
It turns out my efforts to find a solution on Google failed due to incorrect search terms...
http://www.qtcentre.org/threads/43232-customizing-QGroupbox-title purposed setting
QGroupBox::title
{
padding-left: 2000px;
padding-right: 2000px;
}
Not very pretty but at least It could be done using stylesheets only.
You can set background-image to expand the title.
QGroupBox {
border: 1px solid #90c6dd;
border-radius: 0px;
margin: 8px 8px 7px 7px;
padding: 56px 10px 10px 10px;
background-image: url(:/res/svg/group-bg.svg);
background-repeat: repeat-x;
background-position: top left;
}
QGroupBox::title {
font-size: 24px;
font-weight: bold;
subcontrol-origin: padding;
subcontrol-position: top left;
min-height: 39px;
padding: 0 10px 0 10px;
}
if you can get pointer on the QGroupBox parent you can get its width and knowing its parameter do the following:
this->setWidth(pOnParent->width());
padding-left: 100%;
padding-right: 100%;
Related
I have the styleSheet of QPushbutton
QPushButton
{
background-image: url(:/image.png);
background-position: left center;
background-repeat: no-repeat;
color: rgb(255,255,255);
border-radius: 5px;
background-color: rgb(120,120,120);
border: none;
text-align: left;
}
Now I require a 10px image padding.
QPushButton
{
background-image: url(:/image.png);
background-position: left center;
background-repeat: no-repeat;
color: rgb(255,255,255);
border-radius: 5px;
background-color: rgb(120,120,120);
padding-left: 44px;
border: none;
text-align: left;
border-left: 12px solid rgb(120,120,120);
}
Now my left side no longer has border-radius. So how do I have the border-radius and padding the image at the same time? Thanks!
Look at this documentation, you can notice in the image how border is placed above the content.
https://doc.qt.io/qt-5/stylesheet-customizing.html#the-box-model
One thing I observed in your code is you made border: none;, which might have ignored your borders.
Just using padding-left should help....
May be something like below (not tested)
background-image: url(:/image.png);
background-position: left center;
background-repeat: no-repeat;
color: rgb(255,255,255);
border-radius: 5px;
background-color: rgb(120,120,120);
padding-left: 10px;
This question already has an answer here:
QTabBar strange line doesn't disappear
(1 answer)
Closed 2 years ago.
here's is the style sheet I used for a modified version Qt Mainwindow example:
QWidget { background: #757575 }
QTabWidget { padding: 0px; border: 0px; background-color: #757575; }
QTabWidget::pane { border: 0px solid #C2C7CB; top: -3px; background: #757575; }
QTabWidget::tab-bar {
subcontrol-position: top left;
subcontrol-origin: margin;
padding: 0px 0px 0px 0px;
border: 0px;
background: transparent;
}
QTabBar { background-color : #757575; }
QTabBar::close-button {
subcontrol-position: right;
}
QTabBar::tab {
color: white;
background: #757575;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
min-width: 8ex;
padding: 10px;
min-width: 100px;
}
QTabBar::tab::selected{ border-bottom: 0px solid #757575; background-color: darkgrey; }
The pic below shows the output of the above stylesheet on QDockWidget example
Here's a link for the Project
https://drive.google.com/open?id=0B6cx8jGbgXo7Z0xucXBaSEljMGc
QTabBar::setDrawBase(false); this function can solve the problem.hope this may help you.
This is a default border that was not redefined. Although I cannot reproduce the problem with your style sheets (things show up correctly to me), the solution is to redefine the border property, probably from the QToolBar
QToolBar {
border: 0;
background-color: #757575;
}
I'm trying to customize the style of the Webix ui.list widget, but there're two questions that I can't solve by myself:
is there a way to set the autoheight for items?
if no, which class will allow to set `text-overflow:ellipsis?
Here's a sample and the code of the current implementation:
CSS:
.webix_list_item{
border: 1px solid #ebebeb;
border-radius: 5px;
margin:15px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
background: #fafafa;
}
.webix_list_item:hover{
box-shadow: 0 0 10px rgba(177,44,99,0.6);
border: 1px solid #efefef;
background: #efefef;
}
.webix_list_item.webix_selected {
color: #fff;
background: #cac1c5;
border: 1px solid #bfb8bb !important;
}
JS (pretty simple):
webix.ui({
view:"list",
data:list_data,
width:230, scroll:false,
select:true
});
In addition to the CSS solution, Webix list has a type property which can handle the height of the items. Particularly:
type:{
height:"auto"
}
http://webix.com/snippet/c01714d0
Trivial, is this what you are expecting?
http://webix.com/snippet/0e340ea4
I have added the below css:
.webix_list_item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
if you want to set autoheight:
.webix_list_item {
white-space: normal;
overflow: visible !important;
height: auto !important;
}
I have created a vertical progress bar and an trying to style it with rounded edges. No matter what I do, I don't seem to be able to get the progress or chunk of the progress bar (QProgressBar::chunk) with rounded edges. Please help me out, I am new to QT.
Please find my code below:-
progressbar_V = new QProgressBar;
progressbar_V->setParent(this);
progressbar_V->setMinimum(0);
progressbar_V->setMaximum(5);
progressbar_V->setValue(3);
progressbar_V->setStyleSheet("QProgressBar{ border: solid grey; border-width: 6; border-radius: 12; color: black; text-align: centre; margin-right: 12; }, QProgressBar::chunk:vertical {background-color: #05B8CC; width: 20px;}");
progressbar_V->setGeometry(250,250,60,300);
progressbar_V->setOrientation(Qt::Vertical);
The Progress Bar text is at the top in the output as well. How will I get it to the middle of the vertical progress bar
You're right, you can use this parameter:
border-radius: 50px;
to get round borders !
but you just forgotten to specify px at the end
So, once your code is updated, it looks like this :
progressbar_V->setStyleSheet("QProgressBar{ border: solid grey; border-width: 6; border-radius: 12px; color: black; text-align: centre; margin-right: 12; }, QProgressBar::chunk:vertical {background-color: #05B8CC; width: 20px;}");
You need to change your style sheet into something like this:
progressbar_V->setStyleSheet("QProgressBar{ border: solid grey;border-bottom-right-radius: 12px;border-bottom-left-radius: 12px; color: black; text-align: centre; },QProgressBar::chunk {background-color: #05B8CC;border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;}");
happy coding..
I would like to display table in Qt with specific style. I want to draw all grid lines with same color and same width.
Problem is, that it is hard to style QHeaderView. All the time, I get 2px grid width or no grid at all.
I Have folowing window with one QTableWIdget
and asociated styleSheet
QWidget {
background-color: #333333;
color: #fffff8;
}
QHeaderView::section {
background-color: #646464;
padding: 4px;
border: 1px solid #fffff8;
font-size: 14pt;
}
QTableWidget {
gridline-color: #fffff8;
font-size: 12pt;
}
QTableWidget QTableCornerButton::section {
background-color: #646464;
border: 1px solid #fffff8;
}
Are there any tricks to have all grid lines 1px width? I'm using 4.8.5 and I can't upgrade to version 5.x.
The trick is border-style: none; in QHeaderView::section after witch border-left, border-right, border-top and border-bottom starts working. Correct style for QHeaderView::section should be
QHeaderView::section {
background-color: #646464;
padding: 4px;
font-size: 14pt;
border-style: none;
border-bottom: 1px solid #fffff8;
border-right: 1px solid #fffff8;
}
QHeaderView::section:horizontal
{
border-top: 1px solid #fffff8;
}
QHeaderView::section:vertical
{
border-left: 1px solid #fffff8;
}
I think what you did is you added additional border for section cells, and the section properties should look like that ( although I did not try this solution )
QHeaderView::section {
background-color: #646464;
padding: 4px;
border: 0px;
font-size: 14pt;
}
For more information how to style your headers, see:
http://pastebin.com/svReqHr3
HowTo draw correct CSS border in header?