Row of HTML elements. Button not staying on same row

March 17, 2023

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>

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.

>Solution :

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/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>