Flex-boxes are set inside a fixed-positioned div in this chat web application

Question

Flex-boxes are set inside a fixed-positioned div in this chat web application

I am currently working on a chat web application that has a unique bottom bar layout. The bottom bar consists of a button on the left, a text entry field in the center, and another button on the right:

<div id="bottom-bar">
      <div class="button-left">
        <img src="https://placeholdit.co//i/40x40">
      </div>
      <div class="textentry">
        <input type="text" id="chatmsg" name="chatmsg">
      </div>
      <div class="button-right">
        <img src="https://placeholdit.co//i/40x40">
      </div>
    </div>

    #bottom-bar {
        position: fixed;
        bottom: 0px;
        height: 40px;
        width: 100%;
    }

My goal is to (1) align the left button to the far left of the bottom bar, (2) align the right button to the far right of the bottom bar, and (3) have the input field expand in the middle to fill all available space.

I attempted to achieve this by using the following CSS styling:

#bottom-bar {
       ...the css above and also included...
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
       justify-content:space-between;
       align-items: center;
    }

    #chatmsg{
      width: auto;
    }

Unfortunately, my efforts did not yield the desired result. Any guidance or suggestions would be greatly appreciated.

html css flexbox

Answer 1

Answer №1

Make sure the textentry expands to fill all available space:

#bottom-bar {
    position: fixed;
    bottom: 0px;
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
    align-items: center;
}
.button-left,
.button-right {
  width: 40px;
}
.textentry{
  flex-grow: 1;
}
#chatmsg {
  width: 100%;
}

Here is an example you can reference: https://jsfiddle.net/43Lqzznt/3/

Answer 2

Make sure the textentry expands to fill all available space:

#bottom-bar {
    position: fixed;
    bottom: 0px;
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
    align-items: center;
}
.button-left,
.button-right {
  width: 40px;
}
.textentry{
  flex-grow: 1;
}
#chatmsg {
  width: 100%;
}

Here is an example you can reference: https://jsfiddle.net/43Lqzznt/3/

Answer 3

Answer №2

To ensure that the input field within .textentry takes up the full width except for the space occupied by two images, use calc(100% - 80px); as the width for .textentry. Since this causes the input to overflow its container on the right side, add padding to .textentry to adjust the spacing between elements accordingly, as illustrated in the code snippet below.

html,
body {
  margin: 0;
}

#bottom-bar {
  position: fixed;
  bottom: 0px;
  height: 40px;
  width: 100%;
}

#bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.textentry {
  width: calc(100% - 80px);
  padding: 0 10px 0 2px;
}

input#chatmsg {
  width: 100%;
}

<div id="bottom-bar">
  <div class="button-left">
    <img src="https://placeholdit.co//i/40x40">
  </div>
  <div class="textentry"><input type="text" id="chatmsg" name="chatmsg"></div>
  <div class="button-right">
    <img src="https://placeholdit.co//i/40x40">
  </div>
</div>

Answer 4

To ensure that the input field within .textentry takes up the full width except for the space occupied by two images, use calc(100% - 80px); as the width for .textentry. Since this causes the input to overflow its container on the right side, add padding to .textentry to adjust the spacing between elements accordingly, as illustrated in the code snippet below.

html,
body {
  margin: 0;
}

#bottom-bar {
  position: fixed;
  bottom: 0px;
  height: 40px;
  width: 100%;
}

#bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.textentry {
  width: calc(100% - 80px);
  padding: 0 10px 0 2px;
}

input#chatmsg {
  width: 100%;
}

<div id="bottom-bar">
  <div class="button-left">
    <img src="https://placeholdit.co//i/40x40">
  </div>
  <div class="textentry"><input type="text" id="chatmsg" name="chatmsg"></div>
  <div class="button-right">
    <img src="https://placeholdit.co//i/40x40">
  </div>
</div>

Answer 5

Answer №3

To achieve the desired layout, utilize the display:flex property on the container and adjust the input div either with flex:1 or by setting its width to 100%. Be sure to inspect the output in the console for validation.

EXPAND WITH FLEXBOX

Observe how the input box dynamically stretches between the images as the container resizes, demonstrating a fluid design approach.

#bottom-bar {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content:space-between;
   align-items: center;
}

#chatmsg{
  width: 100%;
}

.textentry {
  /* width: 100% */
  flex: 1;
}

<div id="bottom-bar">
  <div class="button-left">
    <img src="https://placeholdit.co//i/40x40">
  </div>
  <div class="textentry">
    <input type="text" id="chatmsg" name="chatmsg">
  </div>
  <div class="button-right">
    <img src="https://placeholdit.co//i/40x40">
  </div>
</div>

Answer 6

To achieve the desired layout, utilize the display:flex property on the container and adjust the input div either with flex:1 or by setting its width to 100%. Be sure to inspect the output in the console for validation.

EXPAND WITH FLEXBOX

Observe how the input box dynamically stretches between the images as the container resizes, demonstrating a fluid design approach.

#bottom-bar {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content:space-between;
   align-items: center;
}

#chatmsg{
  width: 100%;
}

.textentry {
  /* width: 100% */
  flex: 1;
}

<div id="bottom-bar">
  <div class="button-left">
    <img src="https://placeholdit.co//i/40x40">
  </div>
  <div class="textentry">
    <input type="text" id="chatmsg" name="chatmsg">
  </div>
  <div class="button-right">
    <img src="https://placeholdit.co//i/40x40">
  </div>
</div>

Flex-boxes are set inside a fixed-positioned div in this chat web application

Answer №1

Answer №2

Answer №3

Similar questions

In relation to User Interface: Analyzing target tracking and studying the flow of time

PHP - Unable to store the input content

Activate divs with Bootstrap5 modal toggle functionality

incorporating a rollover menu into the images displayed on the webpage

Video is not visible in safari browser initially, but becomes visible only after scrolling for a little while

React component state change in reverse

A step-by-step guide on initializing and setting a cookie value with expiration

Develop an onclick function with an href attribute

Can PHP retrieve data when the form submit function is overridden with AJAX?

How come the picture extends beyond the borders of its parent container when I expand the width?

floating point for a list item compared to other elements

After trying out the demonstration on the website, I am unable to get my submit button to work

Execute a separate function when clicking on certain buttons without interfering with the buttons' original onclick function (which has already been assigned) - JavaScript

Having issues with the tailwindcss transformation not functioning properly, but the problem seems to resolve when directly incorporating it into the

Utilize Javascript to generate intricate table headers based on JSON data

The implementation of subnavbars within a navigation bar using HTML and CSS

Center align `div 1` with CSS and right align `div 2`

Pinterest Style Card Layout using React-Semantic-UI

Conceal the href element within a designated UL using JavaScript

What is the best way to track down the source of a CSS rule?