Series of HTML components. Button drifting to a different row

I am currently developing a project utilizing Bootstrap as the front end framework. Within this project, I have implemented a vertical scrollable card containing various items. Each row within the card consists 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>

https://i.sstatic.net/XN1z9.jpg

The first row displays correctly, however, on subsequent rows, the 'Delete' button wraps to the next line even though there is enough space for it to remain on the same line.

How can I ensure that the button stays on the same row? My searches thus far have provided solutions related to inline forms but not specific to my issue.

I have attempted using display: inline; and display: inline-block; on the outermost span without success.

htmlcssbootstrap-4

Answer №1

It is advisable not to enclose your elements in a p tag; instead, use a div. Every id should be unique. Currently, all your Delete buttons share the same id.

Note: In your situation, it might be beneficial to utilize the Bootstrap grid layout.

Upon reviewing your code, consider replacing the enclosing p tag with a div.

Placing a form within a p tag is not semantically correct, even though it may function as intended in most cases. It can exhibit unusual behavior in certain situations. According to the specifications, only phrasing contents are permitted inside a p tag.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131455f475f43">[email protected]</a>/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>

Answer №2

Give it a shot:

<div class="container">
<content />...
</div>

.container {
  display = flex;
  flex-wrap: nowrap;
  }

Answer №3

This appears to be a table

table {
  width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a4845455e595e584b5a6a1e0419041b">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The white background of the .jpg image is conflicting with the white background of the HTML

My website has a top-of-page .jpg image that was created with a white background. However, when using the img src="topOfEveryPageImage.jpg" tag, the white background of the image appears visually different from the rest of the solid white background on the ...

htmljpeg

Repeatedly view the identical file on HTML

I'm currently working with the following HTML code: <input type="file" style="display: none" #file(change)="processImage($event)" /> <button type="button" class="btn" (click)="file.click()" Browse </button> When I select image1 fr ...

htmlangulartypescript

What about those ready-made HTML components that have not been revealed yet?

If I have a form with property elements that need to be duplicated, and each property element is a div containing input elements. When the user clicks on an "Add Properties" button, I want another instance of this properties element to be created. The que ...

javascriptjqueryhtml

Anomalies observed in label transition while in active state for input field

Can you explain why there is a gap in the label when it's positioned at left:0? I'm aiming to achieve a UI similar to Material design but struggling with label positioning. I've experimented with using translateY(-6px), however, this method ...

htmlcsstransition

Preserve the current page status for future visits

Currently, I am in the process of creating a website that will complement a presentation. One of the requests I received is to customize the site content based on what is being presented, meaning certain elements may need to be hidden from the page. To add ...

jquerycsshtmlbrowser-cache

Setting a custom background image in a Bootstrap modal

When users visit my website, I want to enhance their experience by using a background image in my bootstrap modal. Despite several attempts, I have been unable to successfully set a background image in the modal. Can anyone provide guidance on this matter? ...

javascripthtmlcsstwitter-bootstrap

Using jQuery to alter the background color when a div reaches a specific height

Is there a way to make my sidebar change color gradually as the user scrolls below a certain point on the page? I want the background to transition from transparent to black, giving it a fading effect. I attempted to modify some existing code without succe ...

jqueryhtmlcss

Use VueJS v-on:click and Vanilla JS to collapse various divs when clicked

Can VueJS and vanilla JS be used to collapse specific divs among many? I have information contained in separate card elements that include a title and a body. My goal is to make the body of each card expand or collapse when the respective title is clicked ...

javascripthtmlcssvue.js

Avoid refreshing the page when clicking on an anchor tag in Vue.js

I have the code below in my Vue file. The problem I am encountering is that the page reloads whenever I click on the link. I have tried using event.preventDefault() but it did not solve the issue. Can someone please help me identify what I am doing wrong ...

javascripthtmlvue.jsvuejs2vue-component

Is it possible to achieve a seamless interaction by employing two buttons that trigger onclick events to alternately

I have a specific goal in mind: I want to create two buttons (left and right) with interactive cursors. The left button should initially have a cursor of "not-allowed" on hover, indicating that it cannot be clicked at the beginning. When the right button ...

javascripthtmlbuttononclickevent-listener

trouble displaying Google AdSense ads

I'm having trouble getting the ad to display on my website despite trying many different solutions. Any advice you can offer would be greatly appreciated. Thanks in advance! <!doctype html> <html lang="en"> <head> < ...

javascripthtmlcssadsense

Tips for generating a WhatsApp share link for a specific webpage

Is there a way to generate a share link through WhatsApp using the current URL? Hello, I have a website with multiple social media share buttons like Facebook, Twitter, Pinterest, and email. However, I am looking to replace Pinterest with WhatsApp and Ins ...

phphtmlsharewhatsapp

Reveal covert web data table

I am encountering difficulties while attempting to extract information from a table that does not seem to be visible. The specific table can be found on this page, within the 'Code History' section highlighted in light purple. Login credentials ...

pythonhtmlselenium

What could potentially occur if the sourcemap is configured to false within an Angular application?

Recently, I began learning Angular. While exploring my project files, I came across the sourcemap option in the tsconfig.json file, which is set to "sourceMap": true by default. I stumbled upon a helpful link on Stack Overflow that clarified some of my dou ...

htmlnode.jsangulartypescriptangular-cli

Concerns with combining key value pairs in Typescript Enums

Could you help me figure out how to properly implement an enum in my drop-down so that I can only display one value at a time? Currently, I am seeing both the key and the value in the list. This is my enum: export enum VMRole { "Kubemaster" = 0, "Kub ...

htmlangulartypescript

"Enhance your web design workflow with Dreamweaver's ability to edit files

While coding in Dreamweaver CS5, I prefer using the code view exclusively. Recently, I came across the "dual screen" workspace feature which allowed me to eliminate distractions and focus solely on the main workspace with a secondary workspace in the corne ...

javascripthtmlcsseditordreamweaver

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

javascripthtmlcssfirebasevue.js

Although the xpath simulates a click on the button, it does not actually perform any action

I've been diligently working on an automation test suite for a web application that can be quite temperamental. Following a recent UI update, I decided to run some tests to ensure the GUI, buttons, and xpaths were functioning as expected. The night b ...

javascriptjavahtmlseleniumxpath

Explore the interactive feature of hovering over a component within a div that is enhanced with a transformative translate3d effect upon hover. Discover the seamless event queuing

Within a div, there is a modal component that includes a transform: translate3d effect with hover transition. The div is created using vue.js list rendering method. Upon opening the modal and hovering over it, it jerks between the parent div and its intend ...

cssvue.jsvuejs2css-transitionstranslate-animation

Steps for creating a border around a container Div:1. Set the width and

Seeking assistance in bordering a div with 4 fa-icons inside. The parent div is named Container, and as a result, the border is creating excessive padding on the left and right sides horizontally. Attempted nesting bootstrap grids without success. Can anyo ...

htmlcssangularbootstrap-4border