😊 Please help with CSS formating for FORM in a DIV

HTML & CSS
, ,
1

I have the following HTML:

<footer>
	  <div class="chat-input-container">
		  <form id="chat-form">
		    <input type="text" id="user-input" required>
		    <input type="submit">
		  </form>
	  </div>
</footer>

The goal is to have to the textbox fill the horizontally until it bumps up against the submit button. There is to be no wrapping at all.

As the window size changes, only the textbox will resize and the submit button will retain its size.

I have tried all kinds of iterations with my CSS3 to try to make it happen, but the one consistent failure is that the FORM element always refuses to expand horizontally to fill the DIV.

This problem is consistent across all of my browsers, desktop and mobile.

I am sure there is a solution as we often see chatbox interfaces that are exactly as I describe them, it is just that it seems to be something fiddly.

Thanks in advance for your help. :blush:

2

I’m sure someone will have a more qualified answer, but perhaps something like this?

CSS

#chat-form {
    display: flex;
    column-gap: 5px;
}

#user-input {
    padding: 5px;
    flex-grow: 1;
}
1 Like
3

Thanks you for your prompt reply, but, sadly, that doesn’t work.
Notice how everything is bunched over to the left?

The goal is that the text box expands from the left to the right with the botton firmly pinned to the right.

Is there something that can get it closer?

Screenshot from 2025-01-24 17-08-29
Screenshot from 2025-01-24 17-08-29752×329 20.8 KB

4

Yes it does:)

If it doesn’t work for you then we’d need to see all the styles for that code that you already have in place. It may be that a parent has limited the width or you have more specific code in place :slight_smile:

1 Like
5

Fascinating! What a wonderful tool!
OK. I used your CodePen to post my source and the problem persists.
I hope that I can embed this correnctly:

1 Like
6

Delete align-items: center;

Alternatively add align-self: stretch; to the form.

1 Like
7

That helped to get the example to work. :blush:

After that, the actual page that I am working on still needs some more tweaks with regards to margins and padding, but I think that you folks have provided me with a good foundation to move on with.

If I run into something tragically difficult, I know where to return to!

Thanks!
(PS: I only just joined just before I posted and you folks set me on the right path. :hugs:)

5 Likes