I have 2 inline divs inside a parent div:
.parent {
width: 200px;
height: 200px;
}
.div1 {
float: left;
width: 10px;
height: 10px;
background-color: blue;
}
.div2 {
position: relative;
height: 100%;
width: 100%;
right: 0px;
float: left;
background-color: red;
}
The problem is that div2 inherits the width of the parent div instead of the remaining width (i.e. 190px) and ultimately div2 ends up below div1.
Here is an example using jsfiddle: http://jsfiddle.net/jZBE6/
How can I make div2 have a width of 190px without setting a static width?
You could do it this way:
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:90%;
float:left;
background-color:red;
}
You could also do it without floating the right div (this is the way I would prefer):
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:100%;
margin-left:10px;
background-color:red;
}
in case you really want a dynamic width (not just 10px case), you can't use css. But you can use javascript to set width dynamically http://jsfiddle.net/jZBE6/19/
Related
How to make Vue2-leaflet map have 100% height of its parent container?
When I set its style to style="height: 100%" it is overwriting whole page on first interaction with the map and tile layer isn't showed at all.
Use calc(100% - 100px) for #map-wrapper because #some-div has a height of 100px in your example.
Then the scrollbar disappears.
#some-div {
height: 100px;
}
#map-wrapper {
background-color: red;
height: calc(100% - 100px);
margin: 0;
}
Fiddle: https://jsfiddle.net/yLe9n1uk/
Or use a flexbox for the parent div (#app):
#app {
display: flex;
flex-direction: column;
}
#some-div {
height: 100px;
}
#map-wrapper {
background-color: red;
height: 100%;
margin: 0;
}
Fiddle: https://jsfiddle.net/xo5z8r7q/
I would like to add dynamically image (check arrow) into a div which contains other div information (image + texte).
This adding means that users owned this "object" in the application. He can added or deselected this object on the fly.
The result of this action is appear or disappear arrow on the fly.
This process run perfectly in my vue.js component. But I can view appear an offset each time that arrow appears like this :
I try to use v-if or v-show vue.js directives but the result is the same.
I don't want to have a new offset appear when action to checked item is launch.
this is the HTML template :
<div id="container">
<div #click="checkedItem(key.id)" class="container-item" v-for="(key, value) in objects">
<div class="check" v-show="checked[key.id]">
<img height="35" width="35" src="../../../static/checked.png"></img>
</div>
<div class="image">
<img src="https://picsum.photos/75/75/?image=25" alt="logo"></img>
</div>
<div class="name">{{ key.name }}</div>
</div>
</div>
This is the CSS stylesheet component :
<style scoped>
#container
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container-item
{
display: flex;
flex-direction: row;
margin: 30px 30px 30px 30px;
}
.container-item div.check
{
z-index: 3;
position: relative;
left: 20px;
bottom: 15px;
}
.container-item div.check > img
{
height: 35px;
width: 35px;
}
.container-item div.image
{
z-index: 2;
border: 1px solid blue;
}
.container-item div.name
{
z-index: 1;
position: relative;
top: 12px;
right: 10px;
text-align: center;
line-height: 45px;
width: 150px;
max-height: 50px;
border: 1px solid blue;
background-color: yellow;
}
</style>
And the checkedItem method component :
checkedItem: function (id)
{
let isChecked = this.checked[id] ? true : false
isChecked ? this.checked[id] = false : this.checked[id] = true
},
How can "add" DOM node HTML into HTML template component vue.js whitout create a new offset on the fly ?
As we have discussed in the comments, this is purely a CSS thing. What you want is to take div.check out from the layout flow, so that it does not influence the positioning of other elements. This can be done by adding position: absolute to its ruleset. For that to work, remember to add position: relative to its parent, too:
.container-item {
display: flex;
flex-direction: row;
margin: 30px 30px 30px 30px;
/* Allow div.check to be positioned relative to its parent */
position: relative;
}
.container-item div.check {
z-index: 3;
left: 20px;
bottom: 15px;
/* Take the check icon out of layout flow */
position: absolute;
}
When using Vue transitions with a slide left/right animation, how can I get the Divs beside eachother?
Take a look at this pen;
https://codepen.io/anon/pen/jeBBaB
HTML
<div class="heading">
<h1>Transition demo</h1>
<h4>Why this no work?</h4>
</div>
<div class="container" id="app">
<transition :enter-active-class="enterAnimation" :leave-active-class="leaveAnimation" mode="">
<div key="one" v-if="currentStep == 1">
This is Step One
<button class="btn btn-primary" #click="currentStep = 2; previousStep=1">Next</button>
</div>
<div key="two" v-else>
This is Step Two
<button class="btn btn-primary" #click="currentStep = 1; previousStep=2">Back</button>
</div>
</transition>
</div>
CSS
$purple: #5c4084;
body {
background-color: $purple;
padding: 50px;
}
.container {
padding: 40px 80px 15px 80px;
background-color: #fff;
border-radius: 8px;
max-width: 800px;
}
.heading {
text-align: center;
h1 {
background: -webkit-linear-gradient(#fff, #999);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-align: center;
margin: 0 0 5px 0;
font-weight: 900;
font-size: 4rem;
color: #fff;
}
h4 {
color: lighten(#5c3d86,30%);
text-align: center;
margin: 0 0 35px 0;
font-weight: 400;
font-size: 24px;
}
}
.btn{
outline: none !important;
}
.btn.btn-primary {
background-color: $purple;
border-color: $purple;
outline: none;
&:hover {
background-color: darken($purple, 10%);
border-color: darken($purple, 10%);
}
&:active, &:focus {
background-color: lighten($purple, 5%);
border-color: lighten($purple, 5%);
}
& .fa {
padding-right: 4px;
}
}
.form-group {
margin-bottom: 25px;
}
JS
new Vue({
el: '#app',
data: {
currentStep: 1,
previousStep: 0
},
computed:{
enterAnimation() {
if (this.currentStep < this.previousStep) {
return "animated slower fadeInLeft";
} else {
return "animated slower fadeInRight";
}
},
leaveAnimation() {
if (this.currentStep > this.previousStep) {
return "animated slower fadeOutLeft";
} else {
return "animated slower fadeOutRight";
}
}
}
});
When using no mode, the "entering" div appears on the line below the "leaving" div until then end, then it pops upwards.
I can use mode="out-in" but then there's a noticable gap between the Divs. I'd like to just have one sliding in, right next to the one sliding out. Any way to achieve this?
You could make use of absolute positioning on the div elements, you need to adjust your css a bit though.
But as a starting point, change your .container rules to this (adding position: relative;):
.container {
padding: 40px 80px 15px 80px;
background-color: #fff;
border-radius: 8px;
max-width: 800px;
position:relative;
}
and add this as a new rule below it:
.container div {position:absolute;top:0;left:0;}
The flexbox way:
Change your container rules to this:
.container {
padding: 40px 80px 15px 80px;
background-color: #fff;
border-radius: 8px;
max-width: 800px;
display:flex;
}
After this you can use a css translate rule to position the content. You can see a working example here:
Vue transitions
I am using a number of Pseudo elements throughout a website I am building. They all look great except in IE. I am testing it in IE 10 and 11 to start off with.
For some reason the positioning is always slightly off - in the example below, about 5 px for each element.
I have tried changing the display and positions, setting the origins, but nothing seems to work.
Any help would be appreciated.
.home .welcome-row h1 {
position: relative;
margin-bottom: 0;
}
.home .welcome-row h1:before {
background-image: url('/wp-content/uploads/2017/10/welcome-line-1.png');
-webkit-transform: translateY(-23px);
-moz-transform: translateY(-23px);
-o-transform: translateY(-23px);
transform: translateY(-23px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
.home .welcome-row h1:after {
background-image: url('wp-content/uploads/2017/10/welcome-line-2.png');
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
*EDIT - I have added any additional theme styles that are applied incase they have any relevance.
*:after,
*:before {
box-sizing:border-box
}
:-webkit-any(article,aside,nav,section) h1 {
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}
user agent stylesheet
h1 {
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
h1 {
margin: 0;
padding: 0;
}
Today I have noticed a weird behavior of Safari (9.0) when I applied a transition to an element that was translating on the X axis while the width was also increasing.
I have reproduced the behavior in this JsFiddle. Here is an embed code for those who like it better. In Firefox and Chrome it looks pretty smooth but not in Safari, does anyone have a solution or a best way to achieve the same effect?
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() { container.classList.toggle('open'); });
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
transition: width 1s, transform 1s;
}
.open ul {
width: 200%;
transform: translateX(-50%);
}
li {
/* Just some style first */
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
padding: 1em 0;
display: inline-block;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
Re-posting as an answer.
Here is the jsFiddle result and snippet as below:
var button = document.getElementsByTagName('button')[0];
var container = document.getElementsByTagName('div')[0];
var timeline = new TimelineMax({ paused: true });
timeline.to('ul', 1, { width: '200%', xPercent: -50, ease: Power2.easeInOut });
button.addEventListener('click', function() {
timeline.progress() > 0 ? timeline.reverse() : timeline.play();
});
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
}
li {
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
display: inline-block;
padding: 1em 0;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
Hope this is helpful.
P.S. I have been using GSAP for quite a while now and I don't remember getting stuck on any browser-specific issues unless a browser would do something differently. A little research into GSAP and it would tell you that browser compatibility is one of their main selling points.
By animating margin-left instead of translateX the result is acceptable in Safari:
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() {
container.classList.toggle('open');
});
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
transition: width 1s, margin-left 1s;
}
.open ul {
width: 200%;
margin-left:-100%;
}
li {
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
display: inline-block;
padding: 1em 0;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
Using scaleX instead of animating width is smoother, but probably not what you want.
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() {
container.classList.toggle('open');
});
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
transition: transform 1s;
}
.open ul {
transform: translateX(-50%) scaleX(2);
}
li {
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
display: inline-block;
padding: 1em 0;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
So, I will try to sum up the two best solutions here : one with CSS transform and the other with Javascript animation (GSAP).
CSS TRANSFORM
In terms of performance, it is recommended to only animate transforms (translate, scale, rotate) and opacity. If you are interested in more optimisation details you can have a look at this article by Anna Migas.
So, as #Meiko suggested, the best solution is to only animate scale and translate properties. Here is a code sample (and the JSFiddle)
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() {
container.classList.toggle('open');
})
.container,
ul {
width: 100%;
}
ul {
overflow: hidden;
/* reset default browser styles */
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: calc(50% - 2px);
position: relative;
transition: transform 1s;
/* Just some style */
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
padding: 1em 0;
}
li::before {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: red;
z-index: -1;
transition: transform 1s;
}
li:first-child::before {
background-color: green;
}
.open li:first-child {
transform: translateX(-100%);
}
.open li:nth-of-type(2) {
transform: translateX(-50%);
}
.open li:nth-of-type(2)::before {
transform: scaleX(2);
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
PROS:
Only use a tiny bit of Javascript to toggle class,
The browser support is quite good (needs vendor-specific properties and some testing),
Really fast and light on GPU memory.
CONS:
Pretty limited in terms of usage (the actual width of the second cell stays the same),
Needs more lines of CSS.
JS ANIMATION (WITH GSAP)
This solution has been suggested by #Tahir Ahmed and use the GSAP library. As a side note, I really think that this is the best js library out there for this kind of animation. Here is a snippet of how it works (and the JSFiddle):
var button = document.getElementsByTagName('button')[0],
timeline = new TimelineMax({ paused: true });
timeline.to('ul', 1, { width: '200%', xPercent: -50 });
button.addEventListener('click', function() {
timeline.progress() > 0 ? timeline.reverse() : timeline.play();
})
.container {
width: 100%;
overflow: hidden;
}
ul {
width: 100%;
/* reset default browser styles */
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: calc(50% - 2px);
background-color: red;
/* Just some style */
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
padding: 1em 0;
}
li:first-child {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
PROS:
Really flexible, sky is the limit!
You can animate properties such as display (you can't in CSS),
Compatible with every browser out there (down to IE6).
CONS:
Require a third party library (about 30kb),
Seems a bit harder for the GPU (although it needs more testing to be sure).
In the end it really depends on the animation you need but if it get's a little bit more complex than moving a container around then I will choose GSAP.