QScrollArea remove space between area content and scroll bar. - css

I am facing a problem with QScrollArea.
In particular I can not find the right QSS rule for removing the 3px space between QSrollArea QFrame and QScroll.
The space I'd like to remove is the one pointed by the red arrow in the picture. I also added a blue border to the internal QFrame of the QSrollArea, but it seems to end correctly.
The image can be found here: http://i58.tinypic.com/2h71a2c.png
I am using QT 4.8.5 on a SLED 11 SP2 (under GNOME).
My QSS looks like this:
QScrollArea {
background: transparent;
}
QScrollArea > QWidget > QWidget
{
background: transparent;
border: 1px solid black;
margin: 0px 0px 0px 0px;
}
QScrollBar:horizontal
{
border: 1px solid #999999;
background:white;
height:7px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
QScrollBar::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130), stop:1 rgb(32, 47, 130));
min-width: 20px;
}
QScrollBar::add-line:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130), stop:1 rgb(32, 47, 130));
height: 0px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130), stop:1 rgb(32, 47, 130));
height: 0px;
subcontrol-position: left;
subcontrol-origin: margin;
}
Any Ideas?
Thanks.

Is it imperatively necessary to do it from QSS and QSS only? I think changing the layoutBottomMargin of the scrollAreaWidgetContents(i.e. the widget inside the QScrollArea) will solve the problem.

Related

HR gradient is not taking effect

I can't tell my HR gradient is not taking effect or even displaying.
hr.green {
margin-top: 20px;
margin-bottom: 20px;
border: 1px dashed;
border-left: 0;
border-bottom: 0;
border-right: 0;
border-image: linear-gradient(90deg, rgba(48, 183, 149, 1) 10%, rgba(130, 195, 65, 1) 100%) !important;
border-image-slice: 1;
}
body {
background-color:black;
}
<h1>
TEST
</h1>
<hr class="green">
Did I have a typo somewhere?
I was hoping to see something like this.
add the slice inside the border-image because it will also set the border-image-width which is missing here:
hr.green {
margin-top: 20px;
margin-bottom: 20px;
border: 1px dashed;
border-left: 0;
border-bottom: 0;
border-right: 0;
border-image: linear-gradient(90deg, rgba(48, 183, 149, 1) 10%, rgba(130, 195, 65, 1) 100%) 1;
}
body {
background-color: black;
}
<h1>
TEST
</h1>
<hr class="green">

CSS absolute property

Fiddle link I want two div with 100% height.
1 div with background image and one color.
both should equally in height in any resolution.
please help me.
.loginImage { width: 100%; }
.loginBox {
background-color: #ffffff;
background: rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
-moz-box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
height: 100%;
position: absolute;
}
<div class="wrapper-login">
<div class="col-xs-6"><img src="images/loginImage.jpg" alt="Cargo CRM" class="loginImage"></div>
<div class="col-xs-3 loginBox"></div>
</div>
Fiddle
.col-xs-6 {
width: 47.66666667%;
display:table-cell;
text-align:left;
}
.col-xs-3 {
width: 25%;
display:table-cell;
text-align:left;
}
.loginImage {
width: 100%;
}
.loginBox {
background-color: #ffffff;
background: rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
-moz-box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
box-shadow: 1px 0px 9px 0px rgba(50, 50, 50, 0.55);
}
.wrapper-login {
margin: 0 auto;
width: 100%;
display:table;
}
Is it what you are looking for?

How do you fade horizontal text into a vertical gradient?

the text fade should appear with solid text on the left and faded text on the right. in this example i made how would you fade jupiter to look like earth and mars using only css?
.hello-jupiter {
display:inline-block;
background: rgba(215, 215, 215, 1);
color:white;
box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75);
}
jsfiddle <-- actually uses box-shaodw and not a gradient
I find this website is handy for CSS...
http://www.css3maker.com/css-gradient.html
CSS generated from the css3maker website:
.hello-jupiter {
display:inline-block;
background: rgba(215, 215, 215, 1);
color:white;
background:-webkit-gradient(linear, 100% 0%, 37% 0%, from(#FFFFFF), to(#000000))
}
This will only work in Chrome and Safari versions 4.0+
Here is an answer. I just floated a div to the right faded it from 0 to 100% opacity.
.hello-jupiter {
display:inline-block;
background: rgba(215, 215, 215, 1);
color:white;
box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75);
position:relative;
}
.fader {
position:absolute;
top:0px;
right:0px;
display:block;
width:75px;
background: -webkit-linear-gradient(left,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 75%)
}
http://jsfiddle.net/w92xv/45/

CSS - Mozilla bug? box-shadow:inset not working properly

Basically the below code should simply be a white page with a shadow around the edge. This works fine in Chrome but I can't seem to get it to work in Firefox!
<html>
<head>
<style type=text/css>
body {
background:#ffffff;
font-family:arial;
margin:auto;
box-shadow:inset 0px 0px 100px #333333;
-moz-box-shadow:inset 0px 0px 100px #333333;
-webkit-box-shadow:inset 0px 0px 100px #333333;
}
</style>
</head>
<body>
</body>
</html>
View the page here:
http://pastehtml.com/view/bagevr6ke.html
Look at it in Chrome then Firefox, and tell me if you see a difference : )
Cheers
EDIT: So the post below explained how to fix the above code, a CSS reset worked and also i learned about quirk mode and doctypes :)
However the CSS page i am working on is still suffering from this bug no matter what reset i use. I am not currently using a Doctype as i am not sure what i should put, or whether it would fix the bug.
Here is the complete site:
http://middle.dyndns-server.com/results.html
And the stylesheet:
body {
background:url('bg.png');
font-family:arial;
margin:auto;
box-shadow:inset 0px 0px 100px #333333;
-moz-box-shadow: inset 0px 0px 100px #333333;
-webkit-box-shadow:inset 0px 0px 100px #333333;
}
#footer {
padding-bottom:10px;
margin-top:30px;
}
#page {
width:960px;
height:auto;
background-color:#ffffff;
#background:url('bg2.png');
/*Space*/
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
margin-top:-10px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
/*Shadow*/
-moz-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;
-webkit-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;
box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;
/*Border Radius*/
border-radius:0px 0px 20px 20px;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-radius:0px 0px 20px 20px;
-o-border-radius:0px 0px 20px 20px;
}
input[type=text] {
background: -webkit-gradient(linear,left top,right bottom,from(#333333),to(#666666));
background: -moz-linear-gradient(top, #333333, #666666);
filter: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#666666');
border-width:1px;
border-style:solid;
border-color:#777777;
color:ffffff;
}
.line1 {
float:left;
align:center;
padding-bottom:0px;
}
hr {
clear:left;
color:#111111;
}
/* The *normal* state styling */
.btn{
background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000')";
background-color:rgb(51, 51, 51);
border:1px solid rgb(0, 0, 0);
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:5px 10px;
box-shadow:0px 0px 6px rgb(130, 130, 130);
-moz-box-shadow:0px 0px 6px rgb(130, 130, 130);
-webkit-box-shadow:0px 0px 6px rgb(130, 130, 130);
font-size:12px;
font-weight:normal;
color:rgb(255, 255, 255);
text-shadow:0px 0px 1px rgb(255, 255, 255);
}
/* The *hover* state styling */
.btn:hover{
background-image:linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
background-image:-webkit-gradient(linear, left top, left bottom,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
background-image:-moz-linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
box-shadow:0px 0px 6px rgb(0, 0, 0);
-moz-box-shadow:0px 0px 6px rgb(0, 0, 0);
-webkit-box-shadow:0px 0px 6px rgb(0, 0, 0);
}
/* The *active* state styling */
.btn:active,.btn:focus{
background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
}
a {
font-family:arial;
outline:none;
text-decoration:none;
color:333333;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:active {
text-decoration:none;
color:ffffff;
}
a:hover {
text-decoration:none;
}
I am sure its not all great but i am learning and this issue is my main focus right now : )
Thanks a lot.
Add this:
html, body {
height: 100%
}
http://jsbin.com/oyuzug
There is nothing in body, so it has no height.
The only reason it worked without this in Chrome is because you did not include a doctype as the very first line to enable Standards Mode.
Test these in Chrome:
Your original code: http://jsbin.com/urimah
Your original code with doctype: http://jsbin.com/urimah/2
Conclusion: Always include a doctype as the very first line to avoid Quirks Mode and the inconsistencies it brings between different browsers.
Firefox shows you the right thing because right now body has no height. So you have to define the height of your body.
Write this in your CSS:
html, body {
height: 100%
}
So the answer marked as correct CSS - Mozilla bug? box-shadow:inset not working properly does not work for me. Why? Because the example includes no content. When you style the <body> and <html> elements with height: 100% it creates a strange bug where the 100% is technically registering as 100% of the viewport rather than 100% of the window height.
This is a great example of how to do this properly: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html. Styling the body and html elements at height: 100% is correct, however, your inner-shadow needs to be attached to another element (can't be body or html) and then min-height: 100% as well as box-shadow: 0 0 100px #000 attached to the shim, e.g.
html, body { height: 100% }
#styled-div {
min-height: 100%;
box-shadow: 0 0 100px #000;
}

QTabWidget tabPosition when using stylesheets

I'm currently using stylesheets to theme an application.
Here is the stylesheet I use for QTabWidget:
/*QTabBar et QTabWidget*/
QTabBar::tab {
background: qlineargradient(spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, stop:0 rgba(73, 73, 74, 255), stop:1 rgba(40, 40, 40, 255));
border: 1px solid rgb(190, 190, 190);
max-height: 0.6em;
min-width: 0.6em;
padding: 5px;
margin-left: -1px;
margin-right: -1px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(spread:pad, x1:0.5, y1:1, x2:0.5, y2:0, stop:0 rgba(39, 117, 219, 255), stop:1 rgba(107, 171, 249, 255));
}
QTabBar::tab:last {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-right: 0px;
}
QTabBar::tab:first {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
margin-left: 0px;
}
QTabBar::tab:only-one {
border-radius: 3px;
margin: 0px;
}
With this, when tabPosition is set to North or South, no problem. But with East or West, the TabBar's border is not properly styled.
Do someone know how to style a TabBar with tabPosition set to east/west?
From the Qt stylesheet reference page:
The :top, :left, :right, :bottom pseudo states depending on the
orientation of the tabs.
So, for example, to apply your first css rule to the horizontal QTabBars:
QTabBar::tab:top, QTabBar::tab:bottom {
background: qlineargradient(spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, stop:0 rgba(73, 73, 74, 255), stop:1 rgba(40, 40, 40, 255));
border: 1px solid rgb(190, 190, 190);
max-height: 0.6em;
min-width: 0.6em;
padding: 5px;
margin-left: -1px;
margin-right: -1px;
}

Resources