Some time ago I posted this question trying to understand how could I change the size of a QScrollBar. I was able, at the end, to do what I wanted with the stylesheet code:
setStyleSheet("QScrollBar:vertical { width: 30px; };");
The problem is that, although the width of the scroll bar do change with the code above, the height of the up and down arrow widgets continues to be the same; they don't adjust automatically with the increase in width. So what I get now are two very flat up and down buttons in a large scroll bar.
Unfortunately I wasn't able to even "grasp" the arrow widgets, nor I know what would be the stylesheet code to control just them. The closest I got was from this SO question, but they don't apply to the vertical scroll bar.
So my question is: how can I change the size (particularly the height) of a (vertical) QScrollBar's arrow buttons? (note: no the arrow itself, but the normally square button that contains it)
The Desktop theme specifies the height of these buttons. To have them scaling proportionally you have to remove the styling by setting a background color:
QScrollBar:vertical {
width: 30px;
background: red;
}
Related
I'm using Ploty with Vue wrapper Vue-Plotly and I want to dynamically change the data on the plot
I use a function that changes the value of the data that is sent to the Ploty plot (which is responsive).
methods: {
changelayout() {
this.data[1].x = [10];
},
}
It works well, the data is updated and plot is also updated.
However there is some unexpected behavior happening, when I resize the window, the plot kind of collapses and other components cover it (it seems to collapse to the top, so when there are multiple plots they all collapse into one place).
For instance if I have two plots positioned one above the other, the second one will cover the first one.
You can see this behavior in action here:
https://codesandbox.io/s/vuetify-playground-xbgcv?file=/src/layout.vue
When you click on the button, and resize window this will happen ( or resize then click i think also works to reproduce the issue)
In the options I set the responsive to true for the plot and this is what seems to be breaking the chart:
options: {
displayModeBar: false,
responsive: true,
},
Is there a way to have the plot anchored so that it wont hide behind other components on window resize and still keeps being responsive?
The SVGs have position: absolute which means they take up no space in their parent divs.
To compensate for that, their parent divs, .svg-container, have a fixed height of 90px (pixel).
After the button click .svg-container changes to height: 100% (percent), which is not fixed, so they shrink.
If you give them a fixed height (with !important) they will keep it:
.svg-container {
height: 90px !important;
}
I'm trying to use Bootstrap 4 Progress component. I need it to be between words in a sentence. As it is designed to cover the whole row, I'm trying to make it a smaller block so that I can put it between words. I minimized the size changing its width, but for some reason, it still has margin, but the developer tool shows there is no any margin.
I don't know how I can handle the margin thing. Is there anything hidden configuration from Bootstrap 4?
Weird. I didn't see the margins you mentioned on my developer tool.
Anyway, if you want the progress bar to be between words, you can set its display: inline-block;. Optionally you can assign a width to it as well:
span.progress {
display: inline-block;
width: 12rem; /* optional */
}
fiddle: http://jsfiddle.net/aq9Laaew/255749/
I found other questions that address a similar problem, but this is slightly different, as the top bar content is dynamically changed. That means I don;t know at which screen width the bar will begin overlapping content.
This CSS works at a standard resolution with the current top bar text. I know I can use #media (max-width) in CSS to adjust the padding-top, but that doesn't account for dynamically changing top bar text.
body {
min-height: 2000px;
padding-top: 70px;
}
Is there a way to check the top bar's height, and add an offset to the body without using Javascript?
Another, perhaps better, option is to switch the top bar to the mobile view whenever it gets too crowded for a single row. Any thoughts on how to do that?
Thanks
https://jsfiddle.net/waspinator/4c2yespy/7/embedded/result/
Original fixed top example.
EDIT:
updated jsfiddle with javascript fix https://jsfiddle.net/4c2yespy/8/
There is no way to do this wit css only, but you could use the javascript resize event to dynamically change the body padding top:
function adjust_body_offset() {
$('body').css('padding-top', $('.navbar-default').outerHeight(true) + 'px' );
}
$(window).resize(adjust_body_offset);
$(document).ready(adjust_body_offset);
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
I've got this peculiar bug I've been trying to fix today—-still no luck.
If you look at the example below,
http://vitaliyg.com/alpha/hire/
Here's what happens. The full-width background image loads in the correct position, centered along the y axis. Then when we hover over the image, the whole image jumps over to the middle, and slowly adjusts itself back to it's normal desired position.
What's causing this is left: 50%; margin-left: -960px;. This allows us to center the image correctly to begin with. If we didn't have this CSS, the hover wouldn't jump, but the image would load anchoring itself on the top left of the browser.
In the link above, the red box is the content div. The blue box is some text that will be parallaxing with the background-image.
Here is what I am trying to achieve:
Make the background-image appear centered.
When the user hovers over the background-image, it would not jump to the middle of the page.
And lastly, decrease the width of which the user would be able to "parallax" on the x axis. The way it is now, is that the user can see from side to side of the image if patient enough. I want the parallax to be very subtle.
Also, I'm using jParallax, found here:
http://stephband.info/jparallax/
Thank you for your help!
Once you set the position via CSS for the background image, it seems jQuery Parallax plugin alters those settings. The solution then is to apply those settings after the jQuery Parallax has dealt with that parallax layer.
First, remove the margin-left and left from your .parallax-layer#background class.
.parallax-layer#background {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-position: center bottom;
width: 1920px;
height: 620px;
}
Ideally, center the blue box using the same method (unless you want it partially off screen). I've also removed non essential CSS based on your HTML.
.parallax-layer#tagline {
background-color: blue;
width: 400px;
height: 400px;
}
Finally, add the CSS rules that were removed from the background and tagline selectors so they are applied after jQuery Parallax has manipulated those items.
jQuery(document).ready(function(){
jQuery('#parallax .parallax-layer')
.parallax({
mouseport: jQuery('body')
});
jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});
You no longer will see the large white section (body background color) to the left of the background image when the mouse enters the viewport.
This jQuery Parallax plugin aligns everything top/left by design. If the mouse enters the
viewport from the right of the blue box, that box animates to that location correctly.
However, should the mouse enter from the left side of the blue box, that box will 'jump' to the cursors location. You might consider removing the last jQuery line above so the blue box is top/left upon browser load or use a lower percentage value like 25%.
For those that landed on this Question/Answer and wanted some real markup to work with, I have set up two jsFiddles. One jsFiddle duplicated the problem and the other has the solution as shown above.
Original Problem - jsFiddle
Fixed Applied - jsFiddle
Both jsFiddles are in full screen mode so the Parallax effects can be seen.
Instructions to view Original Problem:
1. Launch the above Original Problem jsFiddle Link.
2. Press the jsFiddle Play Button, being careful not to enter the viewport. If the blue box moves in any way... you've entered the viewport so press the play button again.
3. Enter from the top/left of the viewport and you will see the problem... the HTML Body (white color) is seen as the background image readjusts itself.
4. Press the Play Button at any time to reset the webpage.
To see the Fixed Applied, either launch the link above or at the Browsers Address Bar modify the URL so you see revision 1 of that jsFiddle. (i.e., http://jsfiddle.net/UG4Sq/1/embedded/result/ )
The blue box indicates via text which jsFiddle your viewing. Cheers!