0

image of the problem

the white background isn't showing when using absolute child

enter image description here

the problem

the problem is that the white background of the parent isn't visible.

so maybe the .canvas width is set to 0.

yeah, I can add a hard-coded width, but I want that it to auto-size based on the content.

the line is not placed relative so isn't in the document flow and this make it not be used as width.

how can I solve this issue?

the html code

.canvas {
  position: relative;
  background: white;
  /* where is it?? */
}

.canvas .line {
  position: absolute;
  background: blue;
  height: 0.25rem;
}

.canvas .line:hover {
  background: red;
}
<body style="background: grey;">

  <!-- generated by javascript -->

  <div class="canvas">
    <div class="line" style="width: 0px; transform: translate(0px, 0px) rotate(0deg);"></div>

    <div class="line" style="width: 22.3607px; transform: translate(10px, 20px) rotate(63.4349deg);"></div>

    <div class="line" style="width: 22.3607px; transform: translate(20px, 40px) rotate(63.4349deg);"></div>

    <div class="line" style="width: 22.3607px; transform: translate(30px, 60px) rotate(63.4349deg);"></div>

    <div class="line" style="width: 22.3607px; transform: translate(40px, 80px) rotate(63.4349deg);"></div>

    <div class="line" style="width: 22.3607px; transform: translate(50px, 100px) rotate(63.4349deg);"></div>

    <div class="line" style="width: 22.3607px; transform: translate(60px, 120px) rotate(63.4349deg);"></div>

    <div class="line" style="width: 22.3607px; transform: translate(70px, 140px) rotate(63.4349deg);"></div>

  </div>

</body>

what does the code before do?

I have some divs with a parent div relative and some childs absolute

the child won't have any content/text inside

(the style of the div is parsed from javascript but isn't important to the code js, I will add you the result HTML).

the styles are width, translateX, translateY, rotate().

what do I need?

the final result needs to be like this: enter image description here

what I tried.

manually way (but I don't like to do like this)

if I set a width then it works

<div class="canvas" style="width:100px; height:165px;">

Is it possible to automatically set the width from the first point to the last?

without absolute in lines (not working)

a possible solution, that is not adding position:absolute; to the lines

but is very important for this case

  • there is a gap between every line.

this is happening because in CSS now also the height will be considered

if you look closely, the gap is equal to the height of the previous line

  • now the white background is shown, but since the elements are rotated, this means that it will take up more space than it should be

let's say we have a div of the length of 1.4rem,
but when rotated the space occupied can be less or more

let's say we have a 1.4rem width and 45deg
is equal to 1rem of width and also height

enter image description here

as you see in the photo before, there is a square and we find the diagonal of it with the pitagora formula

but not in all cases it will be a square, but can be a rectangle

so if is 25deg

  • the width it will be less than the width,
  • but the height is will be like the double of the width of the line

is very difficult and I am wondering how I can browser automatically do this calculation for me.

enter image description here

this is the bug without absolute

so if you can I want to use absolute for accurate results, but without that bugs mentioned before.

stackdeveloper
  • 352
  • 2
  • 21
  • Maybe it's a [XY problem](https://xyproblem.info/). What does this thing is supposed to do? – Konrad Sep 20 '22 at 17:33
  • @KonradLinkowski display from a array of X and Y position the lines like we so it canvas. so css solution alternative to canvas. something like this https://i.stack.imgur.com/NvVmO.png but in css – stackdeveloper Sep 20 '22 at 17:36
  • So you probably want to set the constant size of the parent component and calculate the position of each element relative to parent coordinates. – Konrad Sep 20 '22 at 17:38
  • @KonradLinkowski then it will be very inefficient if I do in javascript. is there any formula for doing it efficiently. or css only way? – stackdeveloper Sep 20 '22 at 17:39
  • Pages usually run thousand of operations per second in JavaScript and it's not inefficient. – Konrad Sep 20 '22 at 17:40
  • You could also use svg – Konrad Sep 20 '22 at 17:41
  • ok I will try to see, I think I will try with css/js, because I don't know svgs. and do a `Math.max()` and set the value to the width – stackdeveloper Sep 20 '22 at 17:41
  • @KonradLinkowski I found the solution here https://stackoverflow.com/questions/73819800/find-maximum-number-in-array-of-objects for this problem of width. thanks for answering there – stackdeveloper Sep 22 '22 at 19:53

0 Answers0