[Vuejs]-Having trouble adjusting height of the div items when overlaying a grid on an image

by

0👍

I decided for the sake of time just to not use an grid overlay at all and just adjust the components over the image using relative positions. There was no real advantage to using a grid overlay in this case.

From a technical standpoint, I wasn’t able to find the exact problem, but it likely wasn’t any framework magic, just lack of time in finding the correct CSS selector to adjust.

Thanks for any help. Much appreciated. 

img {
    width: 100%;
}
.image-container {
    position: relative;
    width: 95%;
    height: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 10px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100px;
}
#loadControlDevices {
  position: relative;
  margin-top: 10.5%;
  margin-left: 1.15%;
}
  <div class="image-container" >
      <div style="height: 100%;">
        <img src="scope.ami.png" />
      </div>
      <div class="after">
        <div id="loadControlDevices">
          <v-checkbox id="loadControlCB" name="loadControlCB" label="" filled></v-checkbox>
        </div>
        ... other divs following this ...
      </div>
    </div>
👤tavak

Leave a comment