How can I position text next to an input within a <td> element in a vertical arrangement?

Below is the HTML code:

<fieldset><legend>Callout Report</legend>
<table>
<tr><td>Start Time</td><td>
<input type="text" id="startTimeUI" autocomplete="off" />
</td></tr>

<tr><td>Callout&nbsp;ID</td><td>
<input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
<span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
</td></tr>
</table>
</fieldset>

The current output looks like this:

https://i.stack.imgur.com/NDf7U.png

I am aiming for an output similar to this:

https://i.stack.imgur.com/ajrks.png

I have considered nesting a <table> element inside <td>, but I am exploring CSS solutions. Additionally, I'm having difficulty applying vertical-align:middle; to the input field.

Link to JSFiddle: https://jsfiddle.net/Wernfried/3ph32L7a/8/

The page is dynamically generated using jQuery, so utilizing $("#id").width() could be a viable option if needed.

htmlcsshtml-tablemultiple-columns

Answer №1

To enhance the layout, you have the option to modify the default display property of span to inline-block. This adjustment can make a significant difference by aligning the input and span elements separately as illustrated below:

body { 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#765452;
margin:0px; 
font-size:16px; 
}

fieldset { margin:0.4em 0.5em; }
fieldset legend { font-weight: bold; }
fieldset table { width:auto; border-collapse:collapse; }
fieldset table td { padding:0.4em 0.75em 0.4em 0.5em; border:1px solid ActiveBorder; }
fieldset table th { padding:0.2em 1em; border-style:solid; border-color:ActiveBorder; border-width:1px 1px 2px; } 
#id{
  margin-top:5px;
}
.calloutTitle {
  width:60%;
  display:inline-block;
  vertical-align:top;
  margin-left:10px;
}
<fieldset><legend>Callout Report</legend>
<table>
<tr><td>Start Time</td><td>
<input type="text" id="startTimeUI" autocomplete="off" />
</td></tr>

<tr><td>Callout&nbsp;ID</td><td>
<input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
<span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
</td></tr>
</table>
</fieldset>

Update -

The same effect is achieved by utilizing display inline-block for aligning the text within the span element separately, along with adjusting the default vertical-align property of the td tag.

body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #765452;
  margin: 0px;
  font-size: 16px;
}

fieldset {
  margin: 0.4em 0.5em;
}

fieldset legend {
  font-weight: bold;
}

fieldset table {
  width: auto;
  border-collapse: collapse;
}

fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}

fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}

table tr:nth-of-type(2) td{
  vertical-align:middle;
}

table tr:nth-of-type(2) td > input{
  width:150px;
}
table tr:nth-of-type(2) td > span{
  width:calc(90% - 150px);
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>

    <tr>
      <td>Callout&nbsp;ID</td>
      <td>
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
      </td>
    </tr>
  </table>
</fieldset>

Answer №2

Check out this design:

body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #765452;
  margin: 0px;
  font-size: 16px;
}
fieldset {
  margin: 0.4em 0.5em;
}
fieldset legend {
  font-weight: bold;
}
fieldset table {
  width: auto;
  border-collapse: collapse;
}
fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}
fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}
.call-out {
  display: flex;
  align-items: center;
}
.calloutTitle {
  margin-left: 1%;
}
<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>
    <tr>
      <td class="callout">Callout&nbsp;ID</td>
      <td class="call-out">
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This text can span multiple lines and still fit perfectly.</span>
      </td>
    </tr>
  </table>
</fieldset>

Answer №3

Utilize the css property flex

body { 
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#765452;
  margin:0px; 
  font-size:16px; 
}
fieldset {
  margin: 0.4em 0.5em;
}
fieldset legend {
  font-weight: bold;
}
fieldset table {
  width: auto;
  border-collapse: collapse;
}
fieldset table td {
  padding: 0.4em 0.75em 0.4em 0.5em;
  border: 1px solid ActiveBorder;
}
fieldset table th {
  padding: 0.2em 1em;
  border-style: solid;
  border-color: ActiveBorder;
  border-width: 1px 1px 2px;
}
.calloutTitle {
  margin-left:10px;
}
.custom-class{
  display: flex;
  align-items: center;
}
<fieldset>
  <legend>Callout Report</legend>
  <table>
    <tr>
      <td>Start Time</td>
      <td>
        <input type="text" id="startTimeUI" autocomplete="off" />
      </td>
    </tr>
    <tr>
      <td>Callout&nbsp;ID</td>
      <td class="custom-class">
        <input type="text" id="id" name="id" size="10" autocomplete="off" maxlength="10" />
        <span class="calloutTitle">This can be a longer text which takes more than just one single line.</span>
      </td>
    </tr>
  </table>
</fieldset>

Answer №4

To achieve the desired outcome without altering the current code, simply include the following CSS. Utilize the flex property to attain consistent results.

`fieldset table td {
    padding: 0.4em 0.75em 0.4em 0.5em;
    border: 1px solid ActiveBorder;
    display: flex;
}`

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

Issue with AngularJS in Internet Explorer 7: "querySelector" property or method not supported by object

Incorporating angularjs into an existing asp.net project has presented a challenge due to the project's dependency on IE 7 compatibility mode. Upon running the project, an error from the angularjs file was encountered: Object doesn't support pro ...

javascripthtmlasp.netangularjsinternet-explorer-7

what is the process for creating a dynamic display slide in bxslider?

I am trying to create a flexible length display using bxSlider. Here is the code I have so far. JS var duration = $('ul > li > img').data("bekleme"); $(document).ready(function () { $('.bxslider').bxSlider({ ...

javascripthtmlvariablessliderbxslider

Tips for getting a sticky table header and including a limited number of columns, each with checkboxes or input fields

Encountering issues while trying to implement functionality with a jQuery library. One specific problem is the inability to interact with checkboxes on sticky columns, as well as difficulties clicking and typing in text fields. I am utilizing the jQuery S ...

javascriptjqueryhtmlcss

AngularJS chatbox widget for interactive communication

Currently, I am in the process of developing the back-end for a web application utilizing angularJS. One of the key features is allowing users to communicate with each other through a pop-up chat box similar to those found in Gmail or Facebook. My goal is ...

javascripthtmlnode.jsangularjsangular-bootstrap

Tips on automatically changing the background image every few seconds

As a newcomer to Angular and programming in general, I am facing an issue with changing the background image of my Page using the setInterval method. The intended behavior is for it to change every second, but for some reason, it changes much faster than t ...

htmlangulartypescriptsetinterval

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

The goal is to set the height of the first row to 70% of the screen. To prevent the scrollbar from appearing on the entire webpage, overflow has been set to auto within the div of the first row. This solution functions correctly on Chrome and IE, however, ...

htmlcssfirefox

Missing ng-required fields not displaying the has-error validation in AngularJS forms

While editing any part of their address, the user should see a red invalid border around each field to indicate that the full form is required. However, for some reason I can't seem to get the 'Address' field to display this border. The set ...

javascriptcssangularjshtmltwitter-bootstrap

Understanding and processing HTML strings in typescript

I am currently utilizing TypeScript. Within my code, there is an object named "Reason" where all variables are defined as strings: value, display, dataType, and label. Reason = { value: '<ul><li>list item 1</li><li&g ...

htmlreactjstypescriptparsing

Error in HTML5 video: Unable to access property '0' as it is undefined

I am trying to create a simple block displaying an HTML5 video tag. I want the ability to play different videos along with their titles from a JSON file by using previous and next buttons. Clicking the next button should play the next video, and the same g ...

javascriptjquerycsshtml

Is it feasible to add to an ID using ngx-bootstrap's dropdown feature?

In the documentation for ngx dropdown, there is a feature called "append to body." I recently tried changing this to append to a table element instead and it worked successfully. Now, on another page, I have two tables displayed. If I were to assign each ...

cssangularngx-bootstrap

CSS resetting can lead to tables appearing misaligned

After applying a CSS reset to my website's stylesheet (which is valid as CSS 2.0 and used with XHTML 1.0 transitional webpage), I noticed that a table on my website no longer looks correct. Specifically, the table is now positioned incorrectly and the ...

htmlcssxhtmlcss-tables

Navigate to the adjacent IDs

I have multiple sections with varying content and links (previous and next) to navigate to the next section. Initially, everything functions properly. However, when adding a new section in between existing ones, I am required to update all the ids to ensu ...

javascriptjqueryhtml

Utilizing the position relative property with Firefox browser

Similar Question: Is Firefox compatible with position: relative on table elements? Check out this example: a full-width menu formatted as a table with ul dropdown menus. Everything works as expected in IE and Opera, but in Firefox the dropdown uls ex ...

cssfirefoxcss-position

Presenting a data table in Angular

I'm new to using Angular and need help creating a table to organize my data, which is being fetched from a JSON file on the server. Here's the content of data.component.html: <div class="container"> <h1>Search history</h1> ...

htmlangularangular-material

"Exploring the best locations for storing CSS, JS, and image files in Spring

Having trouble figuring out where to place my public files. I attempted the solution mentioned in this thread on Stack Overflow but it didn't work for me. I've tried putting my public folder in various locations within the WEB-INF directory, but ...

cssspring-mvc

Tips for adding a solid background color to a div element

I am struggling with trying to make a full width background-color for a div in my ruby on rails app. Despite setting the background color and margin to 0, I still end up with unwanted margins on the left, right, and top. Below is the code snippet: <!D ...

ruby-on-railsrubyhtmlcolorsbackground

Determining in Angular 8 whether a value has been altered by a user or by a method call

Within my select element, the value is currently being assigned through an ngOnInit call. Here is an example of the HTML code: <select name="duration" [(ngModel)]="exercisePlan.duration" (ngModelChange)="onChange($event)"> <option *ngFor="l ...

htmlangulartypescript

Unable to choose anything beyond the initial <td> tag containing dynamic content

Struggling to implement an onclick delete function on dynamically selected elements, but consistently encountering the issue of only selecting the first element each time. // Function for deleting entries $("#timesheet").on('click', &ap ...

javascripthtmljqueryajax

How to Target HTML Tags Locally using CSS Modules in Next.js?

I am looking to implement smooth scrolling specifically on one page in my Next.js application, such as my blog. Instead of applying it to the entire site through the globals.css file, I need a way to inject scroll-behavior: smooth; into the html tag only f ...

javascriptcssnext.jscss-modulesreact-css-modules

Select a specific element to apply a CSS selector for a button

One of the challenges I am facing involves a webpage with multiple submit buttons. My goal is to iterate through each button and click on them one by one. While I am aware that this can be achieved using xpath like this (//button[@class='submit' ...

javahtmlcssseleniumcss-selectors