Text area and submit button positioning help

1

Hi, so using Bootstrap, I’m trying to anchor disqus and submit button to the bottom of the page and the text area to fill up the spaces accordingly. Any suggestions?

2

I encountered a similar problem a few days ago (having an element occupy the rest of the vertical space). Try making the form a flex container with flex-direction: column;.
Then give the name/email row flex: 0 1 auto;,
the textarea row flex: 1 1 100%;,
then the disqus/submit row flex: 0 1 auto;.

Related fiddle: https://jsfiddle.net/przemcio/xLhLuzf9/3/

2 Likes
3

Hi @kevcomedia,

Thanks for helping out but I tried applying to my code and it doesn’t seem to work. I created a Pen showcasing my current layout

4

How about this? I forked the pen you posted. A lot of CSS was missing in my previous post.

2 Likes
5

Nice! Thanks a lot! Though I noticed it only works in Chrome and not Safari :frowning: Any idea how to fix it?

Also what you mean by

<!-- The other col-*-6 are redundant -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

I thought the other is required for different screen sizes? Also if I remove, which one do I keep or it doesn’t matter?

6

Just col-xs-6 is enough. The others are redundant, since all of them take up the same “6 columns” anyway regardless of screen width. (I forgot to remove them in the code…).

About the Safari issue, I have no idea how to fix it

1 Like
7

Aah thanks, cause I saw the example in documentation and thought we need to add the classes for different screen sizes.

Also any particular reason why you chose classes for .row1, .row2 and .textareaWrapper instead of using ids? Cause I’ve read that IDs takes priority over classes, but a lot of tutorials I see seem to use class. Any comments?

Okay, I’ll try to look into the Safari issue and if I do find a solution, will get back to you on it.

8

You need to if you want your elements to occupy different widths in different screen widths (say, you want a <div> to occupy the screen’s width on mobile, but only half the screen width on laptops or larger)

I added them as classes out of habit. You can use ids if you want, but styles with ids are selectors are harder to override.

1 Like
9

Thanks! One more thing, did I use the offset correctly? cause they’ll be no contents for 3 columns on the left

10

I’d use it that way too (and you can remove the col-sm up to col-lg)

1 Like