For some reason when it knows the button is supposed to be disabled it shows the css for the .paginate_button and then crosses out the css for the .paginate_button_disabled. Does anyone know why?
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}
.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
Assuming you are adding .paginate_button_disabled to the element without removing .paginate_button, you will need to reorder your css.
The .paginate_button rule should come first:
.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}
The way CSS works, is it cascades down the document. So if they both have the same specificity the CSS rule lower down will win.
If you are just adding the .paginate_button_disabled class to the element, without removing the .paginate_button class, then the latter would overwrite the disabled rules as it is defined later in the CSS document - they are literally cascading styles.
The best solution is to hide any unnecessary button.
use the following :
.paginate_button_disabled {
display: none;
}
in this case previous, next, first and last buttons will be shown only when they are needed.
Related
.class-action:hover, .class-action.activeOne {
color: black;
font-weight: bold;
}
.class-action.activeOne {
margin: 3px 0px;
border-bottom: 2px solid black;
}
is there a way to stack these css code? I dont want to repeat same class again. I want all four style for ".class-action.activeOne" and only above 2 style when ".class-action:hover"
other option is below, but it repeats the css
.class-action:hover {
color: black;
font-weight: bold;
}
.class-action.activeOne {
color: black;
font-weight: bold;
margin: 3px 0px;
border-bottom: 2px solid black;
}
Simply nest your selectors:
.class-action {
&:hover,
&.activeOne {
color: black;
font-weight: bold;
}
&.activeOne {
margin: 3px 0px;
border-bottom: 2px solid black;
}
}
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;
}
On QdockWidgets part of the text is being caught off, the "tail" part or decender in typography terminology. So for example Chapters and Settings, the "p" and the "g" are cut
/******** QDockWidget - this controls the top header for widgets ********/
QDockWidget {
titlebar-close-icon: url(:/Controls/ic_close2.png);
titlebar-normal-icon: url(:/Controls/ic_undock.png);
color: white;
font-size: 12pt;
}
QDockWidget::title {
text-align: left; /* align the text to the left */
background: #2e333b;
padding-left: 27px;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid black;
}
QDockWidget::close-button, QDockWidget::float-button {
border: 1px solid transparent;
border-radius: 2px;
background: transparent;
}
QDockWidget::close-button:hover, QDockWidget::float-button:hover {
border: 1px solid grey;
}
QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
padding: 1px -1px -1px 1px;
}
/*_______QDockWidget_______*/
The problem in border and padding here:
QDockWidget::title {
<...>
padding-bottom: 15px;
border-bottom: 1px solid black;
}
For example, you can reduce padding or remove border.
When I apply a style sheet on QPushButton its dimensions change.
This is my style sheet declaration.
QPushButton {
background-color: rgb(175, 187, 199);
color: black;
border-width: 1px;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
border-style: solid;
border-radius: 5;
padding: 3px;
padding-left: 5px;
padding-right: 5px;
font: 16px;
font-weight: bold;
}
Image - Before applying style sheet
Image - After applying style sheet
How to keep the original button size?
Based on comment below question: Try add qualifier:
MyDialog QPushButton {
background-color: rgb(175, 187, 199);
color: black;
border-width: 1px;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
border-style: solid;
border-radius: 5;
padding: 3px;
padding-left: 5px;
padding-right: 5px;
font: 16px;
font-weight: bold;
}
This should be merged with default style sheet (not override the whole thing) and work only on buttons you need to alter.
See documentation.
Is there a simple way to prevent using a style when the class is 'chatInput'.
Example HTML:
<input type="button" value="hello" class="chatInput"/>
And CSS something like:
input[type=button&class!=chatInput], input[type=submit&class!=chatInput]{
border: 1px solid grey;
padding: 2px 10px 2px 10px;
margin-top: 5px;
margin-bottom: 5px;
}
Thanks
You can use the :not selector:
input[type=button]:not(.chatInput), input[type=submit]:not(.chatInput)
border: 1px solid grey;
padding: 2px 10px 2px 10px;
margin-top: 5px;
margin-bottom: 5px;
}
In CSS3, you can use the :not() selector:
input[type=button]:not(.chatInput), input[type=submit]:not(.chatInput){
border: 1px solid grey;
padding: 2px 10px 2px 10px;
margin-top: 5px;
margin-bottom: 5px;
}
In CSS2, and more specifically IE8 and lower, you cannot do this. You have to do something like:
input[type=button] {
border: 1px solid grey;
padding: 2px 10px 2px 10px;
margin-top: 5px;
margin-bottom: 5px;
}
input[type=button] .chatInput {
/* Explicit default style */
}
Mozilla works with
:not(.classname) input {background: red;}
though i try to avoid negative css. perhaps everything else (besides .chatInput) should have an additional class.