Mix up your elements by having some inline and others block, all based on their neighboring elements

Question

Mix up your elements by having some inline and others block, all based on their neighboring elements

In my project, I am working on showcasing a list of 'input' and 'textarea' elements within a flex box arrangement. Each element needs to have a width set to 45% of the flex box. One challenging issue that arises is the following: I am seeking assistance in ensuring that if two items of the same type are present, they should be displayed next to each other on the same line; whereas if they are of different types, they should be displayed on separate lines.

For instance: Two 'input' items side by side will appear on the same line https://i.sstatic.net/vU4PQ.png

When an 'input' and 'textarea' are placed adjacent to each other, they will be displayed on separate lines

https://i.sstatic.net/UZ9H5.png

html css angular

Answer 1

Answer №1

Delve into the world of CSS selectors as they unlock the answer to your query.

Through CSS selectors, you have the power to:

Select all descendants: using a space
Select direct children: using the > symbol
Select an adjacent sibling immediately after the first: using the + symbol
Select an adjacent sibling NOT immediately after the first: using the ~ symbol

Dive deeper into this concept by visiting: Understanding ‘+’, ‘>’ and ‘~’ symbols in CSS Selector

input + input {
  display: inline;
}

 input + input + label {
   display: flex;
 }
 
 label + input {
   display: flex;
 }

<div class="container">
<input placeholder="input1" />
<input placeholder="input2" />

<label>label1</label>
<input placeholder="input3" />

</div>

Answer 2

Delve into the world of CSS selectors as they unlock the answer to your query.

Through CSS selectors, you have the power to:

Select all descendants: using a space
Select direct children: using the > symbol
Select an adjacent sibling immediately after the first: using the + symbol
Select an adjacent sibling NOT immediately after the first: using the ~ symbol

Dive deeper into this concept by visiting: Understanding ‘+’, ‘>’ and ‘~’ symbols in CSS Selector

input + input {
  display: inline;
}

 input + input + label {
   display: flex;
 }
 
 label + input {
   display: flex;
 }

<div class="container">
<input placeholder="input1" />
<input placeholder="input2" />

<label>label1</label>
<input placeholder="input3" />

</div>

Answer 3

Answer №2

Feel free to utilize the following code snippet

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <form>
      <div class="row">
        <div class="form-group col-md-6 col-sm-6 col-xs-12">
          <label for="formGroupExampleInput">EAN *</label>
          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
        </div>
        <div class="form-group col-md-6 col-sm-6 col-xs-12">
          <label for="formGroupExampleInput2">Family</label>
          <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="F&B">
        </div>
        <div class="form-group col-md-12 col-sm-12 col-xs-12">
          <label for="formGroupExampleInpu3">Standing product reference</label>
          <input type="text" class="form-control" id="formGroupExampleInput3" placeholder="">
        </div>
        <div class="form-group col-md-12 col-sm-12 col-xs-12">
          <label for="exampleFormControlTextarea1">Details</label>
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
        </div>
      </div>
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Answer 4

Feel free to utilize the following code snippet

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <form>
      <div class="row">
        <div class="form-group col-md-6 col-sm-6 col-xs-12">
          <label for="formGroupExampleInput">EAN *</label>
          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
        </div>
        <div class="form-group col-md-6 col-sm-6 col-xs-12">
          <label for="formGroupExampleInput2">Family</label>
          <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="F&B">
        </div>
        <div class="form-group col-md-12 col-sm-12 col-xs-12">
          <label for="formGroupExampleInpu3">Standing product reference</label>
          <input type="text" class="form-control" id="formGroupExampleInput3" placeholder="">
        </div>
        <div class="form-group col-md-12 col-sm-12 col-xs-12">
          <label for="exampleFormControlTextarea1">Details</label>
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
        </div>
      </div>
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Mix up your elements by having some inline and others block, all based on their neighboring elements

Answer №1

Answer №2

Similar questions

Choosing attributes-specific tags in BeautifulSoup using Python

How can I resolve the issue of "Errors detected in your package-lock.json" in NGRX?

Apply the Bootstrap container-fluid class exclusively to extra small devices

Keep the element anchored to the bottom of the page as the user scrolls

What is the process for inserting images into a vertical timeline format?

Error message: The Modelviewer is unable to load the local file, displaying the message "Unauthorized to access local resource."

Is it possible to open one collapse item and simultaneously close all the others using Bootstrap 5?

Implementing text overlays on images within a Bootstrap 4 navigation bar

Tips for centering a video vertically within a cell

Utilizing Jquery to locate the current URL for the purpose of changing or adjusting the class

What is the best method to showcase the value in HTML using either Angular or JavaScript when the return is true or false?

What could be causing this particular issue when using the Firestore get() method? The error message states: "ERROR TypeError: snaps

Can the footer be adjusted to be full width only?

Retrieving the first five rows from a table with data entries

Leverage a JSON variable within jQuery to showcase additional JSON variables

Creating an animated diagonal line using TweenMax/EaselJS can add a dynamic element to your designs

Reading data using the HTML5 FileReader in JavaScript allows for the extraction of information into a

Whenever I try to run ionic serve, an error pops up saying: "typescript: node_modules/@types/node/worker_threads.d.ts, line: 8 '=' expected."

"Looking to design a custom UI component complete with animations? Here's how to bring your

Facing a challenge with implementing cascading dropdown lists in asp.net using C#