CODEWITHSUNDEEP
htmlcss
user3244479
user3244479

Reputation:

Rotate and place element flush to parent element's edge, regardless of content length

How can the tabs be always positioned flush to the right hand side of the container, when rotated and have child text of an unknown width?

Without rotation right: 0; on the .tab would be fine but the rotation throws it off.

body {
  margin: 0;
}

.container {
  background-color: pink;
  padding: 3rem;
  position: relative;
}

.tab {
  position: absolute;
  right: 1rem;
  transform: rotate(-90deg);
  padding: 1rem;
  background-color: green;
  margin-right: -2.45rem;
  top: 5rem;
}
<body>
  <div class="container">
    <h1>Button</h1>
    <div class="tab">
      <button class="tab-button" type="button">Button</button>
    </div>
  </div>
  <hr>
  <div class="container">
    <h1>Longer button</h1>
    <div class="tab">
      <button class="tab-button" type="button">Longer Button</button>
    </div>
  </div>
</body>

Upvotes: 0

Views: 74

Answers (2)

Temani Afif
Temani Afif

Reputation: 272590

Adjust the transform-origin and add some translation then you can use right:0.

body {
  margin: 0;
}

.container {
  background-color: pink;
  padding: 3rem;
  position: relative;
}

.tab {
  position: absolute;
  right: 0;
  transform: rotate(-90deg) translateY(-100%);
  transform-origin: top right;
  padding: 1rem;
  background-color: green;
  top: 2rem;
}
<div class="container">
  <h1>Button</h1>
  <div class="tab">
    <button class="tab-button" type="button">Button</button>
  </div>
</div>
<hr>
<div class="container">
  <h1>Longer button</h1>
  <div class="tab">
    <button class="tab-button" type="button">Longer Button</button>
  </div>
</div>

Upvotes: 1

Miller Cy Chan
Miller Cy Chan

Reputation: 947

body {
    margin: 0;
}

.container {
    background-color: pink;  
    padding: 3rem;
    position: relative;  
}

.tab {
    position: absolute;  
    right: -39px;
    transform: rotate(-90deg);
    padding: 1rem;  
    background-color: green;
    top: 5rem;
    min-width: 100px;
}
<html>

<head>
  <link rel="stylesheet" href="lib/style.css">
  <script src="lib/script.js">
  </script>
</head>

<body>
  <div class="container">
    <h1>Button</h1>
    <div class="tab">
      <button class="tab-button" style="width: 100%; white-space: nowrap" type="button">Button</button>
    </div>
  </div>
  <hr>
  <div class="container">
    <h1>Longer button</h1>
    <div class="tab">
      <button class="tab-button" style="width: 100%; white-space: nowrap" type="button">Longer Button</button>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Related Questions