I am using the last version 3.3.0, but since 3.2.0 I have this issue. The inferior round corners do not connect.
With 3.2.0:
With 3.1.1:
I just found if I add the following line:
background-color: #ffffff !important;
and changing the:
padding: 15px;
to
padding: 0px;
to the class:
.panel-body
it breaks the inferior round corners.
How can I force the panel-body to have a white background and 0px padding?
http://jsfiddle.net/Khrys/730sjq8n/
Add the following style:
.panel-body {
border-radius: 4px;
}
The issue was that while you gave the container a border and a border-radius, you had the content within the container a background of white with no border-radius. Therefore, you had a round box with a square block inside it, thus cutting off the border slightly.
Add a border radius to the content allowed the content to fit inside your container.
Alternatively, you can remove the background color:
.panel-body { background-color: transparent;
}
That would also be a fix.
Related
In PyQt5, I have been working on stylesheets. For my tabwidget stylesheet, I would like to use the border-right attribute to set a border between the tabs, but I would like to have a gap at the bottom and top of the border, so the border does not meet the top or bottom of the tabbar, like so:
I was wandering if there is a way to set the border height in the stylesheet, or possibly set the border style to dashed and then set the length of the dashes and gaps? Any method that achieves the border with gaps is appreciated, preferably by using stylesheets. Thanks.
EDIT:
Here is the stylesheet I currently have for the QTabWidget:
QTabBar:Tab {height: 27px; width: 220px; border-top-right-radius: 14px; border-top-left-radius: 14px; padding: 2px;}
QTabBar:Tab:Selected {background-color: white;}
QTabBar:Tab:!Selected {background-color: rgb(0,155,255); border-right: 1px solid black}
QTabBar:Tab:Hover:!Selected {background-color: rgb(240,240,240,92);}
QTabBar:Tab:First:Selected {margin-left: 0; margin-right: 0px;}
QTabBar:Tab:Last:Selected {margin-right: 0; margin-left: 0px;}
QTabBar:Tab:Only-One {margin: 0;}
QTabWidget:Tab-Bar: {left: 5px;}
QTabWidget:Pane {background-color: white; border: 1px solid white;
Yes, you can by using border-image.
This answer is CSS only related, but Qt's implementation follows the CSS specifications very well: https://stackoverflow.com/a/26858151
In short, you create a small square png image with the intended borders (in your case, you'll need to create only the right dashed part, the size depends on the dash pattern you need.
Unfortunately, when using rounded corners Qt "cuts" away half of the border width, so you'll see a small gap outside the border between two adjacent tabs.
I've created a small example of the image which will have a pattern of 6 pixels black and 5 transparent (I forgot to erase the top 2 pixels, you won't need them):
This is how it appears when zoomed in an image editor:
After that, this is what you'll need as a basis for your stylesheet:
QTabBar:Tab {
border-top-right-radius: 14px;
border-top-left-radius: 14px;
border-image: url(border.png) 2 repeat;
padding: 2px;
}
QTabBar:Tab:!Selected {
border-right: 2px;
}
The "2" in the border-image declaration is the border width within the image, the "repeat" is required to tell Qt that the border pattern has to be repeated and not stretched.
Also, remember to set the width of the border too, otherwise the image won't be shown.
And this is the result:
As you can see, the border size is only 1px, with another pixel left outside the tab. Since the issue comes from the usage of rounded corners, I'm afraid that the only solution would be to create a full border image that includes the rounded corners. I tried to play around with negative margins and css positioning, I think that it wouldn't work as expected and might even create issues against different platforms and Qt versions.
I need border radius with gradient like below image. I have tried several ways but I am not getting output as required.
Possibly this is a duplicate in 'Possible to use border-radius together with a border-image which has a gradient?' and has few use full tips there. How ever I found a simple solution from git hub for your problem,but it won't solve the issue entirely, since we can not make the background transparent with this CSS trick but only can have solid color or a gradient as you wish. The problem here is explained in one of the answer given to the above mentioned question. according to that we can not achieve the transparent backgrounds with border radius and gradients, since gradient effect applies as border-image property in CSS. Go refer to that problem and see the accepted answer. By the way here's the promised tricky solution.
body{
padding: 10%;
box-sizing: border-box;
}
.border-container{
display: flex;
width: 100%;
height: 200px; /* to set the div visible, since without height it won't display if it does not have any elements inside */
border: double 4px transparent;
border-radius: 25px;
background-image: linear-gradient(#fff,#fff ), radial-gradient(circle at top left, #ef1eef,#163ae0);
background-origin: border-box;
background-clip: content-box, border-box;
}
<body>
<div class="border-container">
<!-- your elemnts -->
</div>
</body>
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.
I'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them
This is a sample:
the vertical line ending has the same issue but it's out of the picture.
Sample:
http://jsfiddle.net/bcdQQ/
This issue happens if the width is not divisible by the border-width.
This works:
http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)
#prodpre {
border-bottom: #555 5px dotted;
height: 20px;
margin: 0px 0px 2px 0px;
padding-bottom: 10px;
width: 505px;
}
So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).
could you put it in a smaller container div with overflow hidden?
I have a bunch of linked images in a table, with some padding. When I try to add an img:hover or a:hover border attribute, when the border appears, everything moves over by the amount of pixels that the border is thick. Is there a way to stop this behavior?
img {
border: solid 10px transparent;
}
img:hover {
border-color: green;
}
img:hover {
border: solid 2px red;
margin: -2px;
}
Seems to work for me (Safari 6.0.5). No added space since the border is drawn on the 'inside' of the img.
The problem is that you're adding a border to the element that takes up space - the other elements on the page have to move to make room for it.
The solution is to add a border that matches the background, and then just change the color or styling on hover. Another possibility is to make the box larger than you originally intended, and then resize it to fit the border you're adding.