How to keep position of image when text is changing? - html

Question

Trying to position my image without changing the position. When the wind text is turned off(js not working in codepen btw. ) ie not displayed under the temperature, the weatherimage is moving up. I tried to position this 'absolute' but not helping.
I am using reactjs to display the Widget on the right:
<div className="widget">
<div className="row">
<div className="col-lg-12 title">{title}</div>
</div>
<div className="row widgettop">
<div className="col-lg-6 topicon">
<img src={'http://openweathermap.org/img/w/' + icon + '.png'}></img>
</div>
<div className="col-lg-6 topdegrees">
{location}
<div className='degrees'>{degrees}°</div>
{wind && <div>Wind{' '}<span className='wind'>{speed}</span> {unitsType === 'metric' ? <span>km/h</span> : <span>mph</span>}</div>}
</div>
</div>
</div>
Based on the state.wind I display the wind details or not.
How can I keep the image in position when the Wind text/ other content is removed/changed?
codepen here

Answer 1

You can toggle the visibility property for the wind area using JS. The image holds its place when I added visibility: hidden to say #windArea - you can toggle between visible and hidden:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-family: Lucida Grande;
}
input,
label {
display: block;
}
#tempArea input,
#tempArea label {
display: inline;
margin-bottom: 10px;
}
#windArea input,
#windArea label {
display: inline;
margin-bottom: 10px;
}
div#main {
background: #F2F2F2;
padding: 1vw 2vw;
width: 48%;
}
.spaceradio {
margin-right: 10px;
}
img {
width: 84% !important;
height: 100% !important;
margin-left: 20%;
position: relative;
}
.divider {
border-left: 1px solid lightgrey;
}
.widget {
box-shadow: 1px 2px 1px lightgray;
background-color: white;
margin-left: 10px;
height: 100%;
width: 90%;
position: absolute;
}
.title {
margin-left: 30px;
padding: 10px;
position: absolute;
}
.left {
margin-left: 20px;
padding: 10px;
vertical-align: top;
}
.text {
height: 40px;
width: 100%;
}
.top {
margin-top: 15px;
}
.widgettop {
margin-top: 15px;
}
.topdegrees {
margin-top: 40px;
}
.topicon {
margin-top: 20px;
}
.degrees {
font-size: xx-large;
font-weight: bold;
}
.wind {
font-size: small;
font-weight: bold;
}
.hline {
border-top: 4px solid blue;
padding: 0 !important;
margin-bottom: 10px;
width: 48%;
}
/* .abs
{
position: absolute;
} */
#windArea { /* ADDED */
visibility: hidden;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="left">
<hr class="container hline">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-6 top"><label for="title">Title</label><input id="title" type="text" placeholder=" Title of widget" name="title" class="text" value="">
<div class="top"><label for="radio">Temperature</label>
<div id="tempArea" class="row"><span class="col-lg-6"><input type="radio" id="one" class="spaceradio" value="metric" checked=""><label for="one">℃</label></span><span class="col-lg-6"><input type="radio" id="two" class="spaceradio" value="imperial"><label for="two">℉</label></span></div>
</div>
<div class="top"><label for="radio">Wind</label>
<div id="windArea" class="row"><span class="col-lg-6"><input type="radio" id="one" class="spaceradio" value="true"><label for="one">On</label></span><span class="col-lg-6"><input type="radio" id="two" class="spaceradio" value="false" checked=""><label for="two">Off</label></span></div>
</div>
</div>
<div class="col-lg-6 divider top">
<div class="widget">
<div class="row">
<div class="col-lg-12 title">FDSFSDFDSFDSFDS</div>
</div>
<div class="row widgettop">
<div class="col-lg-6 topicon"><img src="http://openweathermap.org/img/w/09d.png"></div>
<div class="col-lg-6 topdegrees abs">Paramatta
<div class="degrees">58.12°</div>
<div>Wind <span class="wind">23.04</span> <span>mph</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>