Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,175,983 members, 7,896,189 topics. Date: Sunday, 21 July 2024 at 08:22 AM

Please Help With This Css. - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Please Help With This Css. (1261 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)

(1) (Reply) (Go Down)

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
Iambro:
Search for sticky.js JavaScript plugin

Plugin for this small thing?!
Re: Please Help With This Css. by RemiAbdulSamad(m): 8:52pm On Apr 11, 2020
Iretii0511:
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.

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:
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.


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:


Plugin for this small thing?!


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:
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.

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:
Hi StacyO,

How have you been? It's been quite sometimes. You didn't even try to reach out.

Missed you.
Been good though,how about you??

Thought you chose to remain silent on here.
smiley
I hope you good?
Re: Please Help With This Css. by Iretii0511(m): 11:03pm On Dec 17, 2020
StacyO:


Missed you.
Been good though,how about you??

Thought you chose to remain silent on here.
smiley
I hope you good?

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:
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.

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)

Assist Us With An Android App / This Is Targeted At ALX Cohort 13 Students. / Sun Developer Days Conference Holding In Nigeria

(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. 29
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.