Stats: 3,190,171 members, 7,939,735 topics. Date: Wednesday, 04 September 2024 at 11:04 AM |
Nairaland Forum / Science/Technology / Programming / Please Help With This Css. (1275 Views)
I Need Help With This Css Issue / Free Online Training For Html/css, Javascript, Jquery, Mysql, Php, Java, Android / After 10days Of Coding With Html, Css And Javascript Forum4africa Is Ready (2) (3) (4)
Please Help With This Css. by Iretii0511(m): 2:33pm On Apr 11, 2020 |
Good afternoon bosses, I am working with flexbox, I want one of it's item to be fixed while the right on scrolls. Let's say I have this markup <div class="parent"> <div class="child1">1</div> <div class="child2">2</div> </div> .parent{ display: flex; } I want .child1 to be fixed while .child2 scrolls it's contents. I learnt position fixed or absolute takes an item away from it's flexbox. I have tried few polyfills all to no avail. |
Re: Please Help With This Css. by Iambro(m): 6:29pm On Apr 11, 2020 |
Search for sticky.js JavaScript plugin |
Re: Please Help With This Css. by arejibadz(m): 6:58pm On Apr 11, 2020 |
Child 2 fixed how...for it to be responsive ass d browser shrink or wat |
Re: Please Help With This Css. by kabeerhabe(m): 7:49pm On Apr 11, 2020 |
Your question is not cleared to me though. Can u explain better or better with screenshot? meanwhile, i will be training people on software development and web designing on 15th of this month(April) via an audiovisual screen record format uploaded in google classroom, to join just whatsapp me on 08093921440 |
Re: Please Help With This Css. by Karleb(m): 8:16pm On Apr 11, 2020 |
Re: Please Help With This Css. by RemiAbdulSamad(m): 8:52pm On Apr 11, 2020 |
Iretii0511:Hey bro. Let me try and help you out. If you want to make the child 1 fixed and the other to scroll. Here are what you need to do. Firstly give the body a height. E.g body {height: 200vh;} The reason why you need to give the body a height is so that you will be able to see that your child 1 is fixed and the child 2 content scroll as you scroll down. After doing that, give the parent of the two children a display of flex. After you've done that, give the child 1 a position of fixed and the child 2 shouldn't have any positioning value. This should work. Once you scroll up the child 1 will stay fixed because we gave it a position of fixed and other will move up out of your view as you scroll down. Hope you get it. 1 Like |
Re: Please Help With This Css. by Iretii0511(m): 1:09pm On Apr 12, 2020 |
RemiAbdulSamad: No it won't work. Position absolute and fixed takes anything out of it's space. I solved it by deepening the relationship and using position sticky on the grandchild then defined it's top value. Thanks for your input. |
Re: Please Help With This Css. by Iretii0511(m): 1:13pm On Apr 12, 2020 |
Karleb: I actually used a js plugin cos i was worried about browser compatibility for position sticky. But I guess I have to return back to plain css and the plugin couldn't give me what I wanted. I wanted to create a polyfill but the js polyfill is having problem with jumpiness, same issue I had with the plugin. |
Re: Please Help With This Css. by Nobody: 2:17pm On Apr 13, 2020 |
Iretii0511:Screenshots would have been better. Do you want it to scroll vertically or horizontally? If you want to scroll veritically here's what you should do: => set height and width for the parent container => position child1 at the top of the container(using position:relative property) relative to the parent container. => fix child2 relative to child1 => scroll the contents of child2 using overflow property Method 2 This is another way you can go about it. Here, we are using HTML Table. Using this method you do not need the parent container, the table itself is the parent container. => create a table and set the desired height and width => create two rows for child1 and child2 respectively and adjust the dimensions using colspan and rowspan table properties. => insert your containers into the rows and set their properties => scroll the second row(using overflow property) Something like this: <table> <tr> <td> <div class="child1"> element </div> </td> </tr> <tr> <td> <div class="child2"> element </div> </td> </tr> </table> The second method is way more simple. You can use bootstrap flex methods to scroll the rows. Goodluck. |
Re: Please Help With This Css. by Iretii0511(m): 1:09pm On Dec 17, 2020 |
Hi StacyO, How have you been? It's been quite sometimes. You didn't even try to reach out. |
Re: Please Help With This Css. by Nobody: 10:16pm On Dec 17, 2020 |
Iretii0511: Missed you. Been good though,how about you?? Thought you chose to remain silent on here. ![]() I hope you good? |
Re: Please Help With This Css. by Iretii0511(m): 11:03pm On Dec 17, 2020 |
StacyO: I missed you too dear. I come online, just don't comment much. How is Christmas gonna be now? Will you be travelling? |
Re: Please Help With This Css. by nurain150(m): 12:45am On Dec 18, 2020 |
Iretii0511:I forgot css.use a framework bro. Because I remember same thing I did it using a jQuery code during building my blog |
Re: Please Help With This Css. by gistray: 12:43am On Dec 19, 2020 |
Tie the first child a rope to be fixed... Use second law of motion according to Newton on the second child for Free fall. Thank me after
|
(1) (Reply)
CS Holders Can't Do Jack Shit And ST Developers Are Delusional(my Opinion) / Basics Of Auto Cad / Need C/c++ Compiler :
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 103 |