How to hide QScrollBar arrows?
I need to hide in horizontal scrollbar.
I was trying to hide with setStyleSheet:
setStyleSheet(" QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal { height:0px; }" )
but it doesn't work.
If you need to hide just the arrows inside buttons then you can try to set background and border in this way:
QScrollBar::right-arrow:horizontal, QScrollBar::left-arrow:horizontal
{
border: none;
background: none;
color: none;
}
If you want to hide whole buttons then you go with code below.
QScrollBar::add-line:horizontal {
border: none;
background: none;
}
QScrollBar::sub-line:horizontal {
border: none;
background: none;
}
I know this is an old question, but I've ran into an issue with this question's approved answer, and I've found a fix for it so I'm going to leave this here in case someone runs into the same problem that I did.
While the accepted answer suggests setting border, background and color to none, this only visually hides the scrollbar arrows. What I mean by this is that you can still click them, and the scrollbar's handle, while it can move to the place they occupied, can not be clicked on if your cursor is in the area the arrow buttons occupied.
To also functionally hide them, you should set their width and height styles to 0px as well. This will make it so you can click on the handle if the scrollbar's handle is in the area the arrow-buttons occupied.
In order to hide a scroll bar you can set the scroll bar policy for that particular scroll bar (horizontal in your case). For example:
QScrollBar scrollBar;
scrollBar.setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
Create a QScrollBar and assign it this stylesheet and this should do the trick. See example below.
QScrollBar:vertical {
width: 15px;
background: #f1f1f1;
}
QScrollBar::handle:vertical {
background: #888;
}
QScrollBar::add-line:vertical {
border: 2px solid gray;
background: #f1f1f1;
}
QScrollBar::sub-line:horizontal {
border: 2px solid gray;
background: #f1f1f1;
}
QScrollBar::handle:hover:vertical {
background: #555;
}
Related
I have a grid of buttons in which it is easier for me to make some buttons invisible then not creating them. They have no function and are only placeholder. They have a styleclass attached to them called transparent. I was mostly able to hide them but there is still a line around them left that is not fully transparent. It kinda looks like the shadow of the button or something. I tried hiding them with the following CSS:
.transparent {
background: transparent;
outline-color: transparent;
border-color: transparent;
color: transparent;
}
How can I hide that last bit of the buttons? They are ToggleButtons. Not sure if that is important
Even though I am using GTK3 I looked at the documentation for GTK4 and there I found the right property. It was indeed a shadow and it can be removed with: box-shadow: none;
My solution now looks like:
.transparent {
background: transparent;
outline-color: transparent;
border-color: transparent;
color: transparent;
box-shadow: none;
}
try this:
.transparent {
opacity: 0;
}
You could use display: none or visibility: hidden.
display: none removes the element from the page, and other elements can take its place, whereas visibility: hidden leaves the element in its place and just hides it.
I need to customize only the width of the scrollbars of Chrome browser using CSS, but need rest of things (like hover effect, color on hover, scrollbar track color, scrollbar button color etc, color of scrollbar on click etc.) as it is.
How can I do it?
I know that we can change the width of the scrollbar using following css:
::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
You can do like that
::-webkit-scrollbar is for the entire scrollbar
handle is scrollbar where you can add background like that and apply also pseudo elements or the draggable scrolling handle.
track is the progress bar of the scrollbar.
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #1B242F;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #04C2C9;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
background: #04C2;
}
For more info visit this link
I'm working on something in my free time, a little selection tool for a game I play, Dota2.
I've poured the entire HTML output of the current situation in to a fiddle: http://jsfiddle.net/a8T6L/
This has a list of checkboxes and a list of items. These are figures, all set to display: table. The idea is that when I click one or more checkboxes, only items possessing the selected attributes will remain shown. That functionality isn't complete yet, so if you click a checkbox, everything will disappear. Simply uncheck everything to make it appear again.
Each item is a <figure> with and <img> and <figcaption>. Locally I'm generating the entire set with some PHP, I just copied the HTML/CSS/JavaScript so I could make the fiddle.
I was trying to add a border when you hover over an item, but this is shifting the items in some cases.
The relevant CSS code can be found on the fiddle at line 438:
figure {
text-align: center;
display: table;
width: 120px;
height: 90px;
padding: 15px auto; /* not needed unless you want centered */
margin-top: 5px;
}
figure:hover {
cursor: hand;
cursor: pointer;/*Should be good with all browsers*/
border-style: inset;
border-color: #000;
border-width: 1px;
}
I've tried playing with margins and padding(some of that left in the code), even with border-collapse, but nothing seems to work. What I'm trying to achieve here is that when I hover over the figure, an inset appears to let the user know which item is highlighted without anything moving even a pixel. Just the inset appearing.
I realize I could do this with background-color instead, if my intent is simply to let the user know which item is being hovered over, but then I wouldn't know the answer to this problem.
The reason this is happening is because it's adding pixels around the image when you hover. You should set your initial class with a border: 1px solid transparent; so that when you hover you aren't adding pixels but just changing the border color.
figure {
text-align: center;
display: table;
width: 120px;
height: 90px;
padding: 15px auto; /* not needed unless you want centered */
margin-top: 5px;
border: 1px solid transparent;
}
figure:hover {
cursor: hand;
cursor: pointer;/*Should be good with all browsers*/
border-color: #000;
}
Mathew is spot on with the reason (+1) another approach is to use outline instead of border:
figure:hover {
cursor: hand;
cursor: pointer;/*Should be good with all browsers*/
outline-style: inset;
outline-color: #000;
outline-width: 1px;
}
This should have the added benefit of working on browsers that don't support transparent for borders (i.e. IE6) if you are bothering to support such dodery old things. The down side is that the outline will caculate outside of the element, so if you run these elements up against the side of the page you may loose part of your border.
In Chrome, I can set the background-color of a text input field and all that changes is the background color. In this way I can highlight fields that need to be paid attention to (make the background light red so that the user knows there's a mistake there). In Firefox, and I suspect other browsers, the background color is changed, but the text field also looks more plain. Inset shadows disappear and when focused on the field there's no blue glow around it. It just looks different.
Is there a way to highlight a text field without changing the look and feel of it in Firefox (and other similar browsers)?
UPDATE: Example code:
<ul>
<li><input type="text" style="background-color: red"/></li>
<li><input type="text"/></li>
</ul>
You can see the difference between the 2 text fields. Hovering and focusing on the normal text field feels native to the OS. But the text field with a red background isn't as good anymore.
Here's the jsfiddle link.
I got the same issue back then, seems that if you want to change the background-color, you must change the border style for Firefox, 2px solid and the color of your choice.
No, I do not believe so. Opera has the same behavior as Firefox. The best solution I came up with was to only style the elements if they required the user's attention (the element has focus or contains invalid data).
This is what I use as part of my Sass bootstrap:
#mixin background($image, $bgcolor) { background: $bgcolor url(#{$imagedir}#{$image}) no-repeat scroll right center }
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
font: inherit;
// background-color background-image background-repeat background-attachment background-position
&:required:valid, &:required:in-range {
//border: 1px solid #0f0;
&:focus { outline: 1px solid #0f0; #include background("tick.png", transparent); }
}
&:invalid, &:out-of-range {
#include background("asterisk_orange.png", $required-bg);
border: 1px solid $required-color;
&:focus {
background-image: url("#{$imagedir}exclamation.png"); outline: 1px solid $required-color;
}
}
}
This is what the generated CSS looks like:
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
font: inherit;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:valid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:in-range:focus, textarea:required:valid:focus, textarea:required:in-range:focus, select:required:valid:focus, select:required:in-range:focus {
outline: 1px solid #0f0;
background: transparent url(icons/silk/tick.png) no-repeat scroll right center;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range, textarea:invalid, textarea:out-of-range, select:invalid, select:out-of-range {
background: #fef8b4 url(icons/silk/asterisk_orange.png) no-repeat scroll right center;
border: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range:focus, textarea:invalid:focus, textarea:out-of-range:focus, select:invalid:focus, select:out-of-range:focus {
background-image: url("icons/silk/exclamation.png");
outline: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):focus + .tip, textarea:focus + .tip, select:focus + .tip {
display: inline;
position: absolute;
border: 1px solid red;
background: #fef8b4;
margin: 0;
padding: 2px .5em;
}
It's worth noting that for Opera, outline does not cause the element to lose its default styling like border/background does.
Is there anyway to control the styling of the scrollbars of a div tag? I am experiencing some contrast issues between IE7 and FireFox 3.5.2. Any help would be greatly appreciated!
Using javascript you can style the scroll bars. Which works fine in IE as well as FF.
Check the below links
From Twinhelix
,
Example 2
,
Example 3
[or] you can find some 30 type of scroll style types by click the below link
30 scrolling techniques
No, you can't in Firefox, Safari, etc. You can in Internet Explorer. There are several scripts out there that will allow you to make a scroll bar.
This one does well its scrolling job. It's very easy to understand, just really few lines of code, well written and totally readable.
Looking at the web I find some simple way to style scrollbars.
This is THE guy!
http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task
And here my implementation!
https://dl.dropbox.com/u/1471066/cloudBI/cssScrollbars.png
/* Turn on a 13x13 scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 13px;
}
::-webkit-scrollbar-button:vertical {
background-color: silver;
border: 1px solid gray;
}
/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
}
/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:increment {
display: none;
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:horizontal:increment {
display: none;
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:horizontal:decrement {
display: none;
}
::-webkit-scrollbar-track:vertical {
background-color: blue;
border: 1px dashed pink;
}
/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
border: 0px;
}
/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
border: 0px;
}
/* Track below and above */
::-webkit-scrollbar-track-piece {
background-color: silver;
}
/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: gray;
}
/* The thumb itself */
::-webkit-scrollbar-thumb:horizontal {
height: 50px;
background-color: gray;
}
/* Corner */
::-webkit-scrollbar-corner:vertical {
background-color: black;
}
/* Resizer */
::-webkit-scrollbar-resizer:vertical {
background-color: gray;
}
There's also the iScroll project which allows you to style the scrollbars plus get it to work with touch devices. http://cubiq.org/iscroll-4