Positioning elements (like an app), with minimal scrolling.

Bootstrap Studio Help
1

Hello.

I'm working on a web based chat app. With rooms on the left sidebar, middle has a little introduction and right side shows members with access to it. In the lower middle part there is the chat itself, where I've applied a scroll onto a div, with some text inside it. At the bottom of the page there is a textarea inside a div. I want all of these elements to show without any page scrolling. Only the 'chat' will have scrolling. Which I've purposely applied.

I've made a sketch to show you what i want it to look like. http://prntscr.com/ptctvw. And this is what I've got so far in Bootstrap Studio. http://prntscr.com/ptcu6i Its hard to explain, but im trying to align the 'div with textbox' under the chat. Here's what i want http://prntscr.com/ptcust.

Could anyone help me out with this? That'd save me so much time! Thanks in advance.

2

Set the scrollable chat div to relative position and then nest the text div inside and set to absolute posititon with bottom set to 0.

3

Hard to give advice without seeing the file or code, but basically you just need to position the div absolutely relative to the parent div (with the scroll bar.) Are you using Bootstrap rows and columns to make these different areas, because that would make this incredibly simple.

4

Set the scrollable chat div to relative position and then nest the text div inside and set to absolute posititon with bottom set to 0.

I will give this a try. Thank you.

Are you using Bootstrap rows and columns to make these different areas, because that would make this incredibly simple.

Yeah. One row with 3 columns.

I wouldn't even mind to share the code for this. I'll give the first reply a try first.

5

Here's a download to the file. https://drive.google.com/file/d/1Tw5fuYjbPJB2GO-C9aA1_S6HjwyxcZDw/view?usp=sharing

EDIT: The methods you both referred to didn't work. I probably did it wrong.

6

Yes, I see what you are trying to do now. Forget absolute positioning as you are not overlaying the text area. I would look at setting your 2nd column divs as pecentages adding to 100% and set the row also to v-100 or vh-100. You need to add in overflow hidden to your scroll area also. Quite some work there to do....

7

I tried, but no luck. I'm going off for now but will keep trying tomorrow. I got the div with a textbox in it to get sticky to the bottom no matter what. I used:

position: absolute; bottom: 0; align-self: flex-end;

Is this an alright way to do it? All i need to do now is for the text-div to fill the rest of the empty area http://prntscr.com/ptgc6t .

8

I'll try and post a solution for you tonight. Been a crazy busy day. I took a quick look at your .bss file, and from what I can tell, the simplest way to do this is to just add a new row inside your center column (where your text chat takes place.) If you want the text chat area to be a fixed height you'll have to add a max-height to that column. Is this site going to used on smaller devices like mobile phones?

9

Woa thanks! It will mainly be used on computers. But computers will have different screensizes. So id hope for a responsive design. But sounds like adding a row in there should do the job.

I'll more into this tomorrow, thanks everyone for taking your time helping me out!

10

Looks easy... complete no-brainer for CSS Grid.

11

Hi.

I figured it out! https://prnt.sc/ptm130 I wrapped all the elements inside the 2nd column inside a div. and applied these settings:

height: 100%
height: 100vh
display: grid.

Makes a lot of sense now, thanks!

12

You probably could even use all bootstrap classes.....no extra css

https://chat-bar-friday.bss.design/

13

You probably could even use all bootstrap classes…..no extra css

Nice that works really well. Which classes were used? There's one problem left on my project. If there is no text in the center div, the bottom div (with textbox) is floating. http://prntscr.com/ptto1m

Looks like I've got a lot to learn..