I have created this interface:
My Question is: HOW TO GET RID OF THAT OBSOLETE LINE using my stylesheet.
The black frame (objectname= mainTabBarWidget(QWidget)) is laid out vertically. It has a Fixed height (38px) and contains these elements from left to right: QToolButton, QTabBar, QToolButton, and another QToolButton.
Its stylesheet is the following:
QWidget#mainTabBarWidget {
border-bottom: 1px solid black;
background-color: rgb(107, 102, 102);
}
The "+" QToolButton creates a new Tab whenever its clicked. The QTabBar (called tabBar) has this stylesheet:
QTabBar#tabBar{
left: 10px; /* move to the right by 5px */
border-bottom: none;
}
QTabBar::tab {
background-color: rgb(194, 180, 180);
border-top: 2px solid rgb(107, 102, 102);
border-left: 2px solid rgb(107, 102, 102);
border-right: 2px solid rgb(107, 102, 102);
border-bottom: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: -8px;
border-bottom-right-radius: -8px;
min-width: 100px;
max-width: 100px;
height: 35px;
padding: 2px;
}
QTabBar::tab:hover {
background-color: rgb(216, 209, 209);
}
QTabBar::tab:selected {
background-color: rgb(243, 231, 231);
border-color: rgb(0, 0, 0);
}
QTabBar::scroller { /* the width of the scroll buttons */
border: none;
width: 20px;
background-color: rgba(0,0,0,55);
}
QTabBar::tear {
border: none;
background-color: rgba(222,221,15, 45);
width: 0px;
}
QTabBar::tab:disabled {
border: none;
}
P.S.1. When 3 or 4 tabs are added, the line disappears too.
P.S.2. I tried setting the tab width to 120px and the line disappeared, but when I add other tabs and the scroll buttons show up, this line re-appears.
I had a similar problem, but it was solved below.
http://doc.qt.io/qt-5/qtabbar.html#drawBase-prop
QTabBar::setDrawBase(false);
Related
I'm trying to style a QtComboxBox and ListView but i'm not sure how to remove this annoying border when an item of the combobox is hovered. Here's what I have
QListView:
/*-----QListView-----*/
QListView
{
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(50, 61, 80, 255),stop:1 rgba(44, 49, 69, 255));
color: #fff;
font-size: 12px;
font-weight: bold;
border: 1px solid #191919;
border-radius: 10px;
show-decoration-selected: 0;
}
QListView::item
{
color: #green;
background-color: #454e5e;
padding: 5px;
border: 10px solid #191919;
border-radius: 10px;
padding-left : 10px;
height: 42px;
}
QListView::item:selected
{
color: #31cecb;
background-color: #454e5e;
border: 2px solid magenta;
border-radius: 10px;
}
QListView::item:!selected
{
color:white;
background-color: transparent;
border: none;
padding-left : 10px;
}
QListView::item:!selected:hover
{
color: #bbbcba;
background-color: #454e5e;
border: transparent;
padding-left : 10px;
border-radius: 10px;
}
QComboBox:
/*-----QComboBox-----*/
QComboBox
{
color: #fff;
font-size: 13px;
font-weight: bold;
border: 1px solid blue;
border-radius: 5px;
padding: 5px;
}
QComboBox::drop-down
{
width: 35px;
border: 1px solid blue;
border-radius: 5px;
padding: 5px;
}
Which gives me something like
What I want to do is to remove this grey rectangular selection around the item label, how do I go about this?
add border-style:none; where you don't want to see the border.
for example :
QComboBox#comboBoxName{
border-style:none;
}
I also Try this in your code and this is its result:
QComboBox::item {
width: 35px;
height:35px;
border-style:none;
}
This question already has an answer here:
Html/Css Triangle with pseudo elements
(1 answer)
Closed 1 year ago.
How to add an arrow on the CSS vertical line by using just pure CSS?
My vertical line is just using the CSS border-right only, then I want to add a two-lines arrow on this line to make it like an arrow, like this:
<div class="ve-line"></div>
.ve-line{
border-right: 1px solid rgb(232, 232, 232);
}
You can create CSS triangle by using border than add another one larger triangle to create border like style and position it absolutly with right: -1px to place it on the line.
.ve-line{
border-right: 1px solid rgb(232, 232, 232);
height: 500px;
position: relative;
}
.triangle {
position: absolute;
right: -1px;
top: 100px;
}
.triangle:before,
.triangle:after {
content: "";
display: inline-block;
width: 0;
height: 0;
}
.triangle:before {
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid rgb(232, 232, 232);
}
.triangle:after {
position: absolute;
right: 0;
top: 2px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid white;
}
<div class="ve-line">
<div class="triangle"></div>
</div>
I'm trying to make custom checkbox, like it said here
This is what I've done:
http://jsfiddle.net/216nt56y/
My css:
input[type=checkbox].css-checkbox {
visibility: hidden;
}
label.css-label
{
border-color: white;
border: white 1px solid;
border-radius: 3px;
}
input[type=checkbox].css-checkbox:checked + label:before {
content: "\2714";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}
It is not really what I want, because I want a check square to have the same size when it is unchecked.
How can I get it?
Like konrad said by giving it a width and height it will always have its shape but rather than using min-height and min-width just have height and width and then you can also move the check tick into the center of the checkbox using margin
label.css-label
{
border-color: white;
border: white 1px solid;
border-radius: 3px;
display: inline-block;
height: 18px;
width: 18px;
}
input[type=checkbox].css-checkbox:checked + label:before {
content: "\2714";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
margin-left:2px;
}
here is a JSFIDDLE showing it in action
try something like this
label.css-label {
display: inline-block;
min-height: 20px;
min-width: 20px;
}
I am trying to apply some style-sheet for scrollbars of QScrollArea and my style sheet as follows.
QScrollBar:vertical {
border-color: rgb(227, 227, 227);
border-width: 1px;
border-style: solid;
background-color: rgb(240, 240, 240);
width: 15px;
margin: 21px 0 21px 0;
}
QScrollBar::handle:vertical {
background-color: rgb(200, 200, 200);
min-height: 25px;
}
QScrollBar::add-line:vertical {
border: 1px solid grey;
background-color: rgb(241, 241, 241);
height: 20px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
border: 1px solid grey;
background-color: rgb(241, 241, 241);
height: 20px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
}
QScrollBar::up-arrow:vertical
{
image: url(:/BarIcon/Icons/uparrow.png);
}
QScrollBar::down-arrow:vertical
{
image: url(:/BarIcon/Icons/downarrow.png);
}
QScrollBar:horizontal {
border-color: rgb(227, 227, 227);
border-width: 1px;
border-style: solid;
background-color: rgb(240, 240, 240);
width: 15px;
margin: 0px 21px 0 21px;
}
QScrollBar::handle:horizontal {
background-color: rgb(200, 200, 200);
min-height: 25px;
}
QScrollBar::add-line:horizontal {
border: 1px solid grey;
background-color: rgb(241, 241, 241);
width: 20px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
border: 1px solid grey;
background-color: rgb(241, 241, 241);
width: 20px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar:left-arrow:horizontal
{
image: url(:/BarIcon/Icons/leftarrow.png);
}
QScrollBar::right-arrow:horizontal
{
image: url(:/BarIcon/Icons/rightarrow.png);
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}
This stylesheet perfectly does what it was supposed to for vertical scrollbar but with presence of any single stylesheet related to QScrollBar:horizontal, the bar just disappears.
Please can anyone point out my flaw and what should I do?
Notes:
The styleSheet have been applied on QScrollArea object by using Change styleSheet option of Qt Designer.
And please kindly acknowledge in case where the horizontal scrollbar shows up with this styleSheet on.
You are lucky, the same thing just happened to me today.
This really simple, this is because you just copy-past your vertical style for the horizontal and just change the word "vertical" to "horizontal", but actually there is a few more things to change:
The "width" parameters become "height" in horizontal.
The "height" parameters become "width".
"top" and "bottom" become "left" and "right" (that you did).
Also, if you have asymmetrical margins or such, don't forget to adapt them (you did that too).
This gives the following stylesheet for your particular case:
QScrollBar:vertical {
border-color: rgb(227, 227, 227);
border-width: 1px;
border-style: solid;
background-color: rgb(240, 240, 240);
width: 15px;
margin: 21px 0 21px 0;
}
QScrollBar::handle:vertical {
background-color: rgb(200, 200, 200);
min-height: 25px;
}
QScrollBar::add-line:vertical {
border: 1px solid grey;
background-color: rgb(241, 241, 241);
height: 20px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
border: 1px solid grey;
background-color: rgb(241, 241, 241);
height: 20px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
}
QScrollBar::up-arrow:vertical
{
image: url(:/BarIcon/Icons/uparrow.png);
}
QScrollBar::down-arrow:vertical
{
image: url(:/BarIcon/Icons/downarrow.png);
}
QScrollBar:horizontal {
border-color: rgb(227, 227, 227);
border-width: 1px;
border-style: solid;
background-color: rgb(240, 240, 240);
height: 15px;
margin: 0px 21px 0 21px;
}
QScrollBar::handle:horizontal {
background-color: rgb(200, 200, 200);
min-width: 25px;
}
QScrollBar::add-line:horizontal {
border: 1px solid grey;
background-color: rgb(241, 241, 241);
height: 20px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
border: 1px solid grey;
background-color: rgb(241, 241, 241);
height: 20px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar:left-arrow:horizontal
{
image: url(:/BarIcon/Icons/leftarrow.png);
}
QScrollBar::right-arrow:horizontal
{
image: url(:/BarIcon/Icons/rightarrow.png);
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}
I have a CSS menu on this page: http://itos3test.notexa.be/itos3test/customer-service-oplossingen/. When you hover over "rol van het contact center" or "Bedrijfs doelstellingen" you can see that the submenu has 2 rows.
When I now hover over the third submenu ("Verkoop fondsenwerving" or "Klanten-Trouw verhogen") the fourth submenu jumps to the right, the gap between the first and second row becomes smaller and the items after the fourth display on a third row.
I tried searching for the css that is causing this with firebug, and as far as I can see the containers are all of the correct size. Maybe it inherits something, or I made a horrible mistake in the css, but I just can't see it.
The CSS code:
/* style main menu */
ul.shortcode_menu.solution-finder {
display: inline;
}
ul.shortcode_menu.solution-finder li {
list-style: none;
background: linear-gradient(#00A7FF 3.8%, #27027B) repeat scroll 0 0 #00A7FF;
border-radius: 2px;
float: left;
margin: 0 0 1em 1em;
padding: 0px;
text-align: center;
max-width: 150px;
width: 100%;
height: 80px;
}
ul.shortcode_menu.solution-finder li:hover {
background: linear-gradient(#54575A, #54575A) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-left: 1px solid rgba(106, 115, 123, 0.5);
border-radius: 2px 2px 0 0;
border-right: 1px solid rgba(106, 115, 123, 0.5);
border-top: 1px solid rgba(106, 115, 123, 0.5);
margin-bottom: 0;
}
ul.shortcode_menu.solution-finder li a {
max-width: 150px;
width: 99%;
height: 65px;
margin: 0px;
float: left;
text-align: center;
padding-top: 15px;
color: #FFFFFF;
font-size: 18px;
text-decoration: none;
text-shadow: 0 1px 2px #000000;
}
ul.shortcode_menu.solution-finder li:hover a {
opacity: 0.9;
color: #FFFFFF !important;
}
/* style sub menus */
ul.shortcode_menu.solution-finder li ul.sub-menu {
width: 600px;
}
ul.shortcode_menu.solution-finder li ul.sub-menu li {
display: inline-block !important;
list-style: none;
max-width: 150px;
width: 100%;
height: 80px;
border: 1px solid #DDD;
margin-top: 0.2em;
margin-right: 0.2em;
margin-left: 0;
text-align: center;
padding: 0px 0px;
font-size: 18px;
color: #FFFFFF;
text-shadow: 2px 2px 5px #EEE;
}
ul.shortcode_menu.solution-finder li ul.sub-menu li:hover {
color: #FFFFFF;
text-shadow: none;
}
ul.shortcode_menu.solution-finder li ul.sub-menu li a {
max-width: 150px;
width: 99%;
height: 65px;
/* background: linear-gradient(#00A7FF 3.8%, #27027B) repeat scroll 0 0 #00A7FF;*/
display: block;
}
ul.shortcode_menu.solution-finder li ul.sub-menu li:hover a {
/* opacity: 0.9;
background: linear-gradient(#54575A, #54575A) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-left: 1px solid rgba(106, 115, 123, 0.5);
border-radius: 2px 2px 0 0;
border-right: 1px solid rgba(106, 115, 123, 0.5);
border-top: 1px solid rgba(106, 115, 123, 0.5);
margin-bottom: 0;*/
}
Anybody got an idea ?
Found it: margin-bottom: 0 was the problem