CODEWITHSUNDEEP
htmlcssreactjssassfrontend
user12551649
user12551649

Reputation: 426

How to position element dynamically?

Would it be possible to pick an element from one flow and place it in a different flow and make it behave as a part of that flow?

.carousal-arrows {
  width: 150px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.carousel-bullets {
  display: flex;
  pointer-events: none;
  list-style-type: none;
  position: absolute;
  top: 0px;
  background-color: red;
  width: 100px;
}

.carousel-bullets .carousel-bullet {
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
  margin-inline: 4px;
}
<div class="carousal-arrows">
  <button>&#5176;</button>
  <button>&#5171;</button>
</div>
<ul class="carousel-bullets">
  <li class="carousel-bullet"></li>
  <li class="carousel-bullet"></li>
  <li class="carousel-bullet"></li>
  <li class="carousel-bullet"></li>
</ul>

Using the above scss I placed the carousal-bullets class element between the arrow buttons.

enter image description here

I have to manually specify the width of the container to accommodate the bullets div, would it be possible to dynamically update the width such that when the bullets in the container increase the width of the container should adjust accordingly and bullets will not layover the arrows.

Need to follow the same HTML structure as mentioned above.

Upvotes: 1

Views: 528

Answers (2)

mani-hash
mani-hash

Reputation: 784

This could be easily done if you just restructure the ul elements between the buttons and set the position as relative. However there is a limit to the number of carousel-bullet that can be fit inside the buttons due to the fixed width of carousal-arrows.

.carousal-arrows {
  width: 200px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.carousel-bullets {
  padding-right: 3px;
  padding-left: 3px;
  display: flex;
  pointer-events: none;
  list-style-type: none;
  position: relative;
  top: 0px;
  background-color: red;
  width: 100%;
  justify-content: center;
  flex-direction: row;
}

.carousel-bullets .carousel-bullet {
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
  margin-right: 4px;
  margin-left: 4px;
}
<div class="carousal-arrows">
  <button>&#5176;</button>
  <ul class="carousel-bullets">
    <li class="carousel-bullet"></li>
    <li class="carousel-bullet"></li>
    <li class="carousel-bullet"></li>
    <li class="carousel-bullet"></li>
    <li class="carousel-bullet"></li>
    <li class="carousel-bullet"></li>
    <li class="carousel-bullet"></li>
    <li class="carousel-bullet"></li>
    
    
  </ul>
  <button>&#5171;</button>
</div>

Upvotes: 1

Kishan
Kishan

Reputation: 111

may this will help you.

      .carousal-arrows {
            width: 100%;
            display: flex;
            justify-content: space-between;
            position:absolute;

        }

        .carousel-bullets {
            display: flex;
            pointer-events: none;
            list-style-type: none;
            background-color: red;
            margin: 10px 0;
        }

        .carousel-bullets .carousel-bullet {
            width: 6px;
            height: 6px;
            background-color: #000;
            border-radius: 50%;
            margin-inline: 4px;
        }

        .box {
            display: inline-block;
            width: fit-content;
            position: relative;
        }
  <div class="box">

        <div class="carousal-arrows">
            <button class="left">&#5176;</button>
            <button class="right">&#5171;</button>
        </div>

        <ul class="carousel-bullets">
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
        </ul>

    </div>

Upvotes: 1

Related Questions