I have a problem with the CSS function calc in Safari.
I have following code: https://jsfiddle.net/0Lugw0zq/1/
#parent {
position: absolute;
height: 32px;
width: 120.77px;
background-color: red;
border: 5px solid black;
}
#child {
position: absolute;
height: 32px;
left: 12px;
width: calc(100% - 12px);
background-color: black;
}
<div id="parent">
<div id="child"></div>
</div>
In Chrome / Firefox you will see a black box and smaller red box in its left, while in Safari there will be an additional thin red line in the right part of the box.
Notice how the parent container's width has a float value (120.77px). The child container's width is calculated with calc(100% - 12px) what results in 108px instead of 108.77px in Safari - obviously due to integer parsing.
How can I prevent Safari from showing this thin line?
Related
What is the idiomatic way to position an element (X) to the left of an other element (inline-box 2), independent of its size, using standard CSS & HTML?
It is okay if it appears over other elements.
I have found a solution: to position an element to the left of another one, no matter their sizes, make it its child, and then absolute-position it right: 100%.
100% means the width of its parent, so 100% from the right will put it just left of it!
Using left: -100% wouldn't work, because it means: offset the left of the element left of the parent by the parent's width, however we want to offset by the width of the child element, itself.
CSS-only demo:
/* The important parts */
#box2 {
position: relative;
}
#x {
position: absolute;
right: calc(100% + 5px);
top: -1px;
}
/* Just styling */
#box1, #box2 {
border: 1px solid blue;
width: 200px;
margin-right: 10px;
display: inline-block;
}
#x {
border: 1px solid orangered;
width: 100px;
height: 150px;
}
<div id="container">
<div id="box1">box1</div>
<div id="box2">box2
<div id="x">X</div>
</div>
</div>
I'd like to set a margin all around a <div> with a position:absolute inside a scrollable <div> to let some free space between the inside div and the scrollable area boundaries (right and bottom).
I tried something like this but with no luck:
<div style="overflow:scroll">
<div style="position:absolute; margin-right:100px; margin-bottom:100px">DRAG ME</div>
</div>
Demo here: https://jsfiddle.net/ayft01x0/
Only the margin-bottom works, and only in Chrome.
You can also imagine that there are other elements inside the scollable div and that they should stay clickable even if they are masked by the margin of the "drag me" element (which should be the case when using CSS margins).
I'm looking preferably for a CSS-only solution that works in Webkit browsers.
Any ideas?
Absolute positioning changes the way margins work, but you can get the effect you're after with borders:
We add a border to the left and the right. This interferes with the border you already had on the draggable element, so we add a pseudoelement to take care of the design. The pseudoelement covers up the "drag me" text, so we add a wrapper around that content and fix the z indices
Here's an update to your fiddle, and here's a snippet of the essential css
#container {
position: relative;
width: 200px;
height: 200px;
border: solid 1px black;
background-color: white;
}
#box {
position: absolute;
border-right: 100px solid transparent; /* changed this */
border-bottom: 100px solid transparent; /* changed this */
outline: 1px solid red; /* just for demo purposes */
width: 80px;
height: 80px;
left: 50px;
top: 50px;
/* dropped the border and background styles */
}
#box span { /* added this element */
position: relative;
z-index: 1;
}
#box:before { /* added this element */
content: '';
position: absolute;
z-index: 0;
width: 80px;
height: 80px;
/* placement adjusted to take the border into account */
left: -2px;
top: -2px;
/* border and background styles moved from #box to here */
border: solid 2px #666;
border-radius: 10px;
background: #ccc; /* shaved off a couple bytes by dropping the -color */
}
<div id="container" style="overflow:scroll">
<div id="box">
<span>DRAG ME</span><!-- added this wrapping element so that it can get a z-index -->
</div>
</div>
Note that I've kept your initial positions for the draggable box, but I would probably actually do it like this. The negative margins are just half the element's dimensions. This way if you tweak the size of #container you don't have to recalculate #box's starting position
#box {
...
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
}
There is a workaround by using an encapsulating div with inner padding and make it transparent to the mouse interactions using the pointer-events property.
<div style="overflow:scroll">
<div style="position:absolute; padding-right:100px; padding-bottom:100px; pointer-events:none">
<div style="pointer-events:all">DRAG ME</div>
</div>
</div>
Demo here: https://jsfiddle.net/1axtonez/
The easiest way to achieve this is to create an invisible CSS ::before pseudo-element that covers the box plus a padding, and to make it transparent to the mouse interactions using the pointer-events property:
div.box::before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-right: 100px;
padding-bottom: 100px;
pointer-events: none;
/* background-color: rgba(255,0,0,0.2); // to understand what is going on */
}
Demo here: https://jsfiddle.net/rmxwwyno/
Be warned that it's not working when the box has an overflow property that is not set to visible.
Is it possible to create gradient borders combined with a border radius?
I created a button with an ::after element
button{
background: -webkit-gradient ...
}
button::after{
content: '';
position: absolute;
height: calc(100% - 2px);
width: calc(100% - 2px);
left: 1px;
top: 1px;
background: rgba(16,20,28,1);
border-radius: 40px;
z-index: -1;
}
Which looks like:
The problem is that the inner element should be transparent. If the background-color property of button is set to transparent, the button takes on the color (gardiet) of the ::after element:
I have found the following picture on the internet where the inner body is transparent and the border is a gradient.
There are multiple tricks to get such a border but these don't support the border-radius.
A posibility, limited in support to modern browsers (all major browser except IE) and also limited to the colors that you can achieve, is to use mix-blend-mode, that can make gray look like transparent.
Also, some special properties to get the border, to begin with
.container {
width: 300px;
height: 100px;
background-color: lightgreen;
}
.test {
position: absolute;
margin: 20px;
font-size: 30px;
border-radius: 1em;
border: solid 12px transparent;
width: 200px;
background: linear-gradient(gray,gray), linear-gradient(to right, red, blue);
background-clip: content-box, border-box;
background-origin: border-box;
mix-blend-mode: hard-light;
}
<div class="container">
<div class="test">TEST</div>
</div>
Does anyone know a workaround for this?
I'm trying to calculate width of a div :
#container {
position: fixed;
top: 0;
left: 0;
z-index: 9;
display: none;
background: #fff;
width: calc(100% - 1em);
padding: .5em;
}
EDIT 2:
This is the version for Webkit browsers (as asked in comments), tested with the latest release of Chrome, and fully working for me: http://jsfiddle.net/HvVst/1/
used -webkit-calc() instead of calc().
EDIT: Then you have to subtract the 1px borders to the 0.5em padding, like this:
http://jsfiddle.net/HvVst/
HTML:
<div id="banner">
FIXED HEADER
</div>
<div id="main">
normal div
<br/>
Sample Text 1
<br/>
Sample Text 2
<br/>
Sample Text 3
<br/>
Sample Text 4
<br/>
Sample Text 5
<br/>
Sample Text 6
<br/>
Sample Text 7
<br/>
Sample Text 8
</div>
CSS:
#banner{
position: fixed;
top: 0;
left: 0;
z-index: 9;
background: #fff;
width: calc(100% - 1em);
padding: calc(0.5em - 1px); /* <-- THIS ONE !!*/
border: 1px solid red;
height: 50px;
}
#main{
margin-top: calc(50px + 1em);
border: 1px solid blue;
height: 500px;
}
It works with position fixed/absolute, but (if no relative parents specified for absolute, and always for fixed) it refers to the window width, not to the container width.
(100% - 1em) = 100% of the window excluding the scrollbar...
what are you trying to achieve ?
If you want position absolute in the parent's boundaries, set the parent to position:relative...
I'm trying to create a div with 3 divs inside.
.outter
{
right: 100px;
border: 10px solid white;
}
.main
{
overflow: hidden;
width: 100%;
height: 150px;
}
.left
{
float: left;
width: 40%;
height: 100%;
background-color: green;
border-right: 5px solid white;
}
.center
{
float: left;
width: 40%;
height: 100%;
background-color: red;
border-left: 5px solid white;
border-right: 5px solid white;
}
.right
{
float: right;
width: 20%;
height: 100%;
background-color: orange;
border-left: 5px solid white;
}
<div class="outter">
<div class="main">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
</div>
This is what I got so far.
-The parent div should have a right distance fixed of 100px, a border of 10px white and the widht is the 100% - 100px;
-The inside divs have 40% + 40% + 20% with a distance between them of 10 px (thats why I putted the border-left 5 and border-right 5.
I'm having problems setting this. What I need is to have fixed sized borders and margin to the right. the other divs should be dynamic to fullfill the 100% width.
Can anyone help me?
Regards,
You can use box-sizing for this. write like this:
.main,
.main >*{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this:
http://jsfiddle.net/ubtdT/
You have a problem with the box-model. An element cannot have 100% width and then a 10px border, because the border is added outside the 100% width, which is causing your problem.
Depending on what browsers you intend to support, you can make use of CSS3's box-sizing property. By setting box-sizing: border-box;, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box. Which should solve your problem. Note the limited support in older browsers.
If you want to go even more experimental you can use the new CSS3 calc() to actually calculate a dynamic width:
/* Firefox */
width: -moz-calc(75% - 100px);
/* WebKit */
width: -webkit-calc(75% - 100px);
/* Opera */
width: -o-calc(75% - 100px);
/* Standard */
width: calc(75% - 100px);