Question 43903 in Html Question posted in
Some basic documentation can be found here.

Row of HTML elements. Button not staying on same row

I’m working on a project using Bootstrap as my front end framework.
I’ve got a vertical scrollable card with some items in it. Each row is composed of the following code:

<p>
 <span>
  <span style="display: inline-block; width: 100px;">
   <strong><?php echo $clientSiteDemandRow['dayOfWeek']; ?></strong>
  </span><span style="display: inline-block; width: 70px;">
  <i class="fa fa-clock"></i>&nbsp;<?php echo $clientSiteDemandRow['shiftStart']; ?>
 </span>
 <span style="display: inline-block; width: 100px;">
  <?php echo $hours; ?>&nbsp;Hours
 </span>
 <span style="display: inline-block; width: 30px;" style="white-space: nowrap;">
  <form action="" method="POST">
   <button type="submit" class="btn btn-danger btn-sm" id="deleteSiteDemand" name="deleteSiteDemand" value="<?php echo $clientSiteDemandRow['id']; ?>">Delete</button>
  </form>
 </span>
 </span>
</p>

Example

As you can see the first row renders how I want it, but on the subsequent rows the ‘Delete’ button wraps to the next line. It’s not a space issue as there is plenty of room for the button.

How can I keep that button on the same row? All my google searches result in inline forms and not necessarily my situation.

I have tried these:
How to force button and select on the same line?

I have tried using display: inline; and display: inline-block; on the outermost span to no effect.

Tags:

3

Answers


  1. 0

    Try:

    <div class="parent">
<children />...
</div>

.parent {
  display = flex;
  flex-wrap: nowrap;
  }
    Login or Signup to reply.
  2. 0

    Looks like a table

    table {
  width: 100%;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



<table>
  <tr>
    <th>
      <strong>Day Of Week</strong>
    </th>
    <th>
      Shift Start
    </th>
    <th>
      Hours
    </th>
    <th>
    </th>
  </tr>

  <tr>
    <td>
      <strong>Monday</strong>
    </td>
    <td>
      08:00
    </td>
    <td>
      8 Hours
    </td>
    <td>
      <form action="" method="POST">
        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
      </form>
    </td>
  </tr>
</table>
    Login or Signup to reply.
  3. 0

    First of all don’t wrap your elements in a p tag, use div. id should be unique. All your Delete buttons have same id

    NB: For your scenario I would just using Bootstrap grid layout.

    Looking at your code, try removing the wrapping p tag with a div

    form inside a p is not semantically correct even though it works in most cases. In some scenarios it behave weird . As per spec only phrasing contents are allowed inside a p tag.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div>
 <span>
  <span style="display: inline-block; width: 100px;">
   <strong>Monday</strong>
  </span><span style="display: inline-block; width: 70px;">
  <i class="fa fa-clock"></i>&nbsp; 8.00 
 </span>
 <span style="display: inline-block; width: 100px;">
  &nbsp;Hours
 </span>
 <span style="display: inline-block; width: 30px;" style="white-space: nowrap;">
  <form action="" method="POST">
   <button type="submit" class="btn btn-danger btn-sm" id="deleteSiteDemand" name="deleteSiteDemand" value="<?php echo $clientSiteDemandRow['id']; ?>">Delete</button>
  </form>
 </span>
 </span>
</div>

<div>
 <span>
  <span style="display: inline-block; width: 100px;">
   <strong>Monday</strong>
  </span><span style="display: inline-block; width: 70px;">
  <i class="fa fa-clock"></i>&nbsp; 8.00 
 </span>
 <span style="display: inline-block; width: 100px;">
  &nbsp;Hours
 </span>
 <span style="display: inline-block; width: 30px;" style="white-space: nowrap;">
  <form action="" method="POST">
   <button type="submit" class="btn btn-danger btn-sm" id="deleteSiteDemand" name="deleteSiteDemand" value="<?php echo $clientSiteDemandRow['id']; ?>">Delete</button>
  </form>
 </span>
 </span>
</div>
<div>
 <span>
  <span style="display: inline-block; width: 100px;">
   <strong>Monday</strong>
  </span><span style="display: inline-block; width: 70px;">
  <i class="fa fa-clock"></i>&nbsp; 8.00 
 </span>
 <span style="display: inline-block; width: 100px;">
  &nbsp;Hours
 </span>
 <span style="display: inline-block; width: 30px;" style="white-space: nowrap;">
  <form action="" method="POST">
   <button type="submit" class="btn btn-danger btn-sm" id="deleteSiteDemand" name="deleteSiteDemand" value="<?php echo $clientSiteDemandRow['id']; ?>">Delete</button>
  </form>
 </span>
 </span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search