skip to Main Content

I am having trouble in aligning text in textbox. I want to know how to align text like in the picture below.

<div class="textbox-container" class="form-inline">
  <div class="image">
    <img src="wwwroot/image/{{ data.Icon }}" alt="{{data.Id}}" />
  </div>
  <input id="item" type="text" value="CornFlower">
  <input id="variety" type="text" value="Floral ">
  <div>
    <input id="botanical" type="text" value="Centaurea ">
  </div>
</div>

code link

expected output

2

Answers


  1. Make the textbox flex and use the flexbox justify-content to align the children horizontally. You can nest the flexbox containers to reach the multiline structure you would like to create.

    Set on the parent (container) element:

    display: flex;
    justify-content: flex-start; // experiment with the value here
    

    Check that one for more information:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-justify-content

    Login or Signup to reply.
  2. You can achieve that using display:flex and flex-direction either column or row as below. (I added padding and background color to better show each wrapping div). Lastely if you want the #botanical input to fill the whole line just uncomment the commented line.

    .textbox-container{
      padding: 5px;
      display: flex;
      flex-direction: row;
      background-color: blue;
    }
    
    .inputs-right-column{
      padding: 5px;
      display: flex;
      flex-direction: column;
      background-color: red !important;
    }
    
    .inputs-right-rows{
      padding: 5px;
      display: flex;
      flex-direction: row;
      background-color: yellow;
    }
    
    .bota{
      display: flex;
      /* flex-direction: column; */
      padding: 5px;
      background-color: blueviolet;
    }
      <div class="textbox-container" class="form-inline">
        <div class="image-left">
          <img src="https://fastly.picsum.photos/id/25/5000/3333.jpg?hmac=yCz9LeSs-i72Ru0YvvpsoECnCTxZjzGde805gWrAHkM" width="60px" />
        </div>
        <div class="inputs-right-column">
          <div class="inputs-right-rows">
            <input id="item" type="text" value="CornFlower">
            <input id="variety" type="text" value="Floral ">
          </div>
          <div class="bota">
            <input id="botanical" type="text" value="Centaurea ">
          </div>
        </div>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search