0

I'm trying to use this snippet (link with original code) : https://codepen.io/starkxx/pen/NdemEv

here is the snippet edited with some content (a container for the POC, removed some code) :

https://codepen.io/Demky/pen/EzNLVB

I don't find a solution to contain the stem-wrapper inside his new parent's height; I think the problem is from this block of code but I can't find the solution

<div class="stem-wrapper">
    <div class="stem"></div>
    <div class="stem-background"></div>
</div>

the fixed stem-wrapper alway take the full windows height or disapear if I try to give him a position:absolute/relative/...

.stem-wrapper {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 50%;
}

I'm not allowed to put a static value for 'top' as I don't know how far from the top the snippet will be

what I tried :

  • I tried to build a parent so I could use position:relative on the parent and add position:absolute on the child as I have seen here : https://stackoverflow.com/a/20994123/9552861 but I failled to make it works
  • tried to play with position/container, in vain
  • I also tried to play with the javascript but I made no progress

Can you people give me tips on how to find the solution ?

Is it sure the problem is from the CSS ?

Should I keep trying to translate this fixed element to a parent(position:relative) / Child(position:absolute) relation; or am I not looking in the right direction ?

Please let me know if I need to add more informations on my question. I let the css/html code on codepen for better visibility but I can paste it here if it's better for readers.

Screenshot of the problem: Screenshot of the problem

Screenshot of the problem when I export the snippet to another website (the stem- take the whole page) Screenshot of the problem

Edit : Tried to make the problem easier to understand;

In the modified snippet (this link from top ) :

  • I added a container (#timelineContainer with background-color:yellow );

  • I expect the ".steam-wrapper" and his childs (.stem, .stem-background) to not go outside of the yellow area (updated the screenshot with the right color).

The goal is to contain this POC/Snippet to a container so it can works outside of this sandbox without taking the full page's height

Boris BELLOC
  • 196
  • 1
  • 4
  • 15
  • Maybe you could gave us a mockup of what you want to achieve. Maybe there is a better way to achieve it. – Daniel Abril May 14 '19 at 13:18
  • I wanted to make a timeline to write my resume (CV) and I really loved the animation on this snippet; so I was just trying to make it work outside of this snippet (aIso I thought it was an interesting code that could make me learn things). Do you think this code is too grubby to use ? – Boris BELLOC May 14 '19 at 13:58
  • I don't think so. Have you realised that you upload twice the same image? – Daniel Abril May 14 '19 at 14:21
  • the second picture is the "expected result" as asked in stackoverflow "guided mode"; I edited the top of the picture so that the child don't go outside of his parent's height. I tought it could help reader as my english isn't perfect (the picture aren't exactly the same) – Boris BELLOC May 14 '19 at 14:31
  • can you provide a demo! That way the community can help you easily and provide a concise answer! – Divneet May 15 '19 at 04:26
  • isn't the 2 snippets in the original message (![screen](https://i.imgur.com/jBpudPG.png)) a demo ? (sorry i'm new to stackoverflow) link from op : https://codepen.io/Demky/pen/EzNLVB – Boris BELLOC May 15 '19 at 05:51

1 Answers1

0

If I understand what you want, what you need to do is this:

body {
    background: @body-background;
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #B9CFD0;
    font-family: 'Roboto Slab', serif;
    /*overflow-x: hidden;
    overflow-y: scroll;*/
    overflow: hidden;
}
#timelineContainer {
    overflow: auto;
    height: 60%; /*any height you want the snippet to have*/
}
.container {
    height: 40%;
}

Then you have to adjust a bit the stem:

.stem-wrapper {
    position: fixed;
    top: 40%;
    bottom: 0px;
    left: calc(50% - 8px);
    max-height: 60%;
}

After that you'll have to adjust the JS to fit the new layout. Because the scrolling function was related to the body and now should be related to #timelineContainer

Daniel Abril
  • 418
  • 3
  • 11
  • isn't this fix a cheat ? If I remove the _overflow: hidden_ it look nice on _this_ snippet but what if the rest of the website is dynamic and have a dynamic height (with collapsed section for exemple) ? I added a screenshot in original post; my goal is to use this snippet at the middle of a page and as I said, I don't know the height of the page so I don't think using a _top / bottom_ parameter is good idea; that why I tried to fix the height of this module inside the dimension of his parent (so the snippet could be ready to use anywhere); – Boris BELLOC May 15 '19 at 10:16
  • But you know the height of `.container`, don't you? You just have to subtract that from the height of the stem and the #timelineContainer. Something like `calc(100% - $yourContainerHeight)`. And use that same height in the `top` parameter. And remember we are here to help with concrete problems not to write code for free. You have to concrete as much as possible. That includes a proper demo and/or a mockup of what you want to achieve. – Daniel Abril May 15 '19 at 10:58
  • i never asked code for free, i tried to link 2 snippets and explained what I did try and where I failled; i just asked if someone could give me tips about what direction to search; How is my demo not "proper" ? I tought the codepen was considered a "demo", i don't know what you call a demo; In school they teached us not to use "static" stuff and alway use "generic" code, that why I told you that your code is not working on _generic usecase_, I didnt know I wasn't supposed to tell that; I just wanted to know if this code is supposed to be considered as correct or just as a temporary fix – Boris BELLOC May 15 '19 at 11:24
  • You are using someone else's code, not yours. That code was developed to do something concrete. If one code could work everywhere, lots of coders would be begging in the street and nobody would share their snippets for free because their value would be huge. You can't expect that we code and test a code to fit and work in every possible case. That's not the finality of SO. Try the code I gave to you, if it doesn't work, explain in which case, and show exactly the unexpected behaviour. – Daniel Abril May 15 '19 at 15:36
  • ok i don't even know what you want from me; i didnt expect you to do any of what you said that "I expect peoples to do", i just asked if someone could give me information or knowledge about what could be wrong with what I tried. As I asked in the OP, i wanted to know if it's possible to transform an element with _position:fixed_ to a relation _parent/child_ with _position:absolute_ / _position:relative_ because I tought it was the thing to do it in my case; i'm learning, i never said that what I asked was good or wrong, i asked if it was the good direction to search. – Boris BELLOC May 15 '19 at 15:50
  • I thought I explained why I thought your code were wrong in my case; maybe my english is that bad, sorry, i'm trying to learn how to make a _position:fixed_ into a parent container to contrain his dimension and as I said, i failled it. Since you used fixed position _top:xx%_ I said that it wasn't what I tried to achieve since I wanted to make it work on any dynamic page's height. Maybe it's impossible, I don't know, i'm learning and I just asked if it was possible to do stuff like that, if it's not possible then it's ok I will just go to another direction with something else. – Boris BELLOC May 15 '19 at 15:54