Issue
My problem is that I have three sticky buttons, that should scroll with the content. From a functionality standpoint, everything works but for some reason, the three buttons seem to move the content down (see the big space above of "Prozess").
When I remove the buttons, the content moves up:
I can't figure out how I can have the buttons available but the content not moving down.
Am I doing something wrong here?
Here is an excerpt from the html & css:
.container-sticky {
position: sticky;
background-color: $swica-white;
z-index: 990;
button, a {
position: absolute;
right: 0;
width: 180px;
}
}
.container-sticky__top0 {
top: 0px;
}
.container-sticky__bottom0 {
bottom: 0px;
}
.container-sticky__move-left {
display: block;
transform: translate(-10%, 10%);
// in my real code this is transform: translate(-100.5%, 500%); but with that, the buttons disappear here on stackoverflow
height: 2.5rem;
}
.container-idx-2 {
top: 2.5rem;
}
.container-idx-3 {
top: 5.5rem;
margin-top: 0.5rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container-fluid">
<div class="container ">
<div class="form-row w-100">
<div class="col">
<h2>Projekt</h2>
<h4>Ändern</h4>
</div>
<div class="col-auto">
<div>* = zwingende Felder (zum Speichern)</div>
<div>** = fachliche Pflichtfelder</div>
</div>
</div>
<hr class="hr-margin color-dark-gray">
<div id="app">
<form action="/redacted" method="post" novalidate="novalidate">
<div class="container-sticky container-sticky__top0 container-sticky__move-left">
<a asp-action="Index" class="btn btn-secondary mb-2">Zum Portfolio</a>
</div>
<div class="container-sticky container-idx-2 container-sticky__top0 container-sticky__move-left">
<button id="btn-back" class="btn btn-primary mb-2" type="button">Zurück</button>
</div>
<div class="container-sticky container-idx-3 container-sticky__top0 container-sticky__move-left">
<button class="btn btn-primary mb-2" type="submit">Speichern</button>
</div>
<div class="row pt-3">
<div class="col-10">
<h5 class="col font-weight-bold mt-4">Prozess</h5>
</div>
<div class="col-2"></div>
</div>
<p class="col mb-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</form>
</div>
</section>
Thanks in advance for your help.
Solution
.container.only_this {
padding-left: 154px;
}
.mt-4, .my-4 {
margin-top: 0rem!important;
}
div#app form {
display: flex;
}
.sticky_div {
min-width: 140px;
position: sticky;
left: 0px;
margin-left: -154px;
height: fit-content;
top: 0;
z-index: 99;
}
div#app {
display: flex;
}
.container-sticky {
position: sticky;
background-color: $swica-white;
z-index: 990;
}
button, a {
position: absolute;
right: 0;
width: 180px;
}
.container-sticky__top0 {
top: 0px;
}
.container-sticky__bottom0 {
bottom: 0px;
}
.container-sticky__move-left {
display: block;
/*transform: translate(-10%, 10%);
transform: translate(-100.5%, 500%);*/
height: 2.5rem;
}
.container-idx-2 {
top: 2.5rem;
}
.container-idx-3 {
top: 5.5rem;
margin-top: 0.5rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container-fluid">
<div class="container only_this">
<div class="form-row w-100">
<div class="col">
<h2>Projekt</h2>
<h4>Ändern</h4>
</div>
<div class="col-auto">
<div>* = zwingende Felder (zum Speichern)</div>
<div>** = fachliche Pflichtfelder</div>
</div>
</div>
<hr class="hr-margin color-dark-gray">
<div id="app">
<form action="/redacted" method="post" novalidate="novalidate">
<div class="sticky_div">
<div class=" container-sticky__top0 container-sticky__move-left">
<a asp-action="Index" class="btn btn-secondary mb-2">Zum Portfolio</a>
</div>
<div class="container-sticky container-idx-2 container-sticky__top0 container-sticky__move-left">
<button id="btn-back" class="btn btn-primary mb-2" type="button">Zurück</button>
</div>
<div class="container-sticky container-idx-3 container-sticky__top0 container-sticky__move-left">
<button class="btn btn-primary mb-2" type="submit">Speichern</button>
</div>
</div>
<div class="Content_Side">
<div class="row pt-3">
<div class="col-10">
<h5 class="col font-weight-bold mt-4">Prozess</h5>
</div>
<div class="col-2"></div>
</div>
<p class="col mb-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p class="col mb-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p class="col mb-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p class="col mb-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p><p class="col mb-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</form>
</div>
</section>
Answered By - Jaswinder Kaur
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.