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?
Related
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..
In my app I have several places that use a QWebView and load the content from the server. In addition the app allows the user to select a default or a dark theme. When the content-type of the document to display is text/plain and the application theme is set to dark, the text is displayed as black text on a black background. I can only see the text if I highlight it. text/html documents work well with either theme.
Ideally when the dark theme is selected I want to display white text on a black (or dark gray) background. I have not been able to figured out how to do this.
Here is the code I currently use to set up the theme:
if(Theme == "dark")
{
app.setStyle(QStyleFactory::create("Fusion"));
QPalette darkPalette;
darkPalette.setColor(QPalette::Window, QColor(88,88,88));
darkPalette.setColor(QPalette::WindowText, Qt::white);
darkPalette.setColor(QPalette::Base, QColor(25,25,25));
darkPalette.setColor(QPalette::AlternateBase, QColor(88,88,88));
darkPalette.setColor(QPalette::ToolTipBase, Qt::white);
darkPalette.setColor(QPalette::ToolTipText, Qt::white);
darkPalette.setColor(QPalette::Text, Qt::white);
darkPalette.setColor(QPalette::Button, QColor(53,53,53));
darkPalette.setColor(QPalette::ButtonText, Qt::white);
darkPalette.setColor(QPalette::BrightText, Qt::red);
darkPalette.setColor(QPalette::Link, QColor(42, 130, 218));
darkPalette.setColor(QPalette::Highlight, QColor(150, 200, 255));
darkPalette.setColor(QPalette::HighlightedText, Qt::black);
app.setPalette(darkPalette);
} else {
Theme = "default";
app.setStyle(QStyleFactory::create("Fusion"));
app.setPalette(DefaultPalette);
}
// load the style sheet
QFile file(":/themes/" + Theme + "theme.css");
file.open(QIODevice::ReadOnly);
const QByteArray theme = file.readAll();
app.setStyleSheet(theme);
The default theme style sheet is blank and the dark style sheet is:
QToolTip {
color: #ffffff;
background-color: #2a82da;
border: 1px solid white;
}
QScrollBar:horizontal {
border: 1px solid grey;
background: #606060;
height: 20px;
margin: 0px 20px 0px 20px;
}
QScrollBar::handle:horizontal {
border: 1px solid #909090;
background: #303030;
min-width: 20px;
}
QScrollBar::add-line:horizontal {
border: 1px solid #909090;
background: #303030;
image: url(:/themes/themes/dark/sbright.png);
width: 20px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
border: 1px solid grey;
background: #303030;
image: url(:/themes/themes/dark/sbleft.png);
width: 20px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar:vertical {
border: 1px solid grey;
background: #606060;
width: 20px;
margin: 20px 0 20px 0;
}
QScrollBar::handle:vertical {
border: 1px solid #909090;
background: #303030;
min-height: 20px;
}
QScrollBar::add-line:vertical {
border: 1px solid #909090;
background: #303030;
image: url(:/themes/themes/dark/sbdown.png);
height: 20px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
border: 1px solid grey;
background: #303030;
image: url(:/themes/themes/dark/sbup.png);
height: 20px;
subcontrol-position: top;
subcontrol-origin: margin;
}
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%;