What is the solution for positioning an input or select element at the end of a tr element?

Within a table, I have a form where each <td> tag contains either a <select> or an <input>. However, due to the varying lengths of the labels within the <td> tags, the <input> or <select> fields are not aligned in the same line as shown in the image.

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

<tr>        
    <td>
        <div class="form-group select optional personal_conflict_victim">
            <label class="control-label select optional" for="personal_conflict_victim">¿USTED ES VÍCTIMA DEL CONFLICTO ARMADO Y SE ENCUENTRA INCLUIDO EN EL REGISTRO ÚNICO DE VÍCTIMAS?</label>
            <select class="form-control select optional" name="personal[conflict_victim]" id="personal_conflict_victim"><option value="">SELECCIONE</option>
                <option value="true">Si</option>
                <option value="false">No</option>
            </select>
        </div>
    </td>
    <td>
        <div class="form-group select optional personal_victimizing_fact">
            <label class="control-label select optional" for="personal_victimizing_fact">¿CUÁL ES EL HECHO VICTIMIZANTE?</label>
            <select class="form-control select optional" name="personal[victimizing_fact]" id="personal_victimizing_fact">
                <option value="">SELECCIONE</option>
                <option value="Desaparición forzada">Desaparición forzada</option>
                <option value="Secuestro">Secuestro</option>
                ...
            </select>
        </div>
    </td>           
</tr>

How can I ensure that both fields stick to the bottom of the parent element and remain on the same line regardless of label sizes?

Thank you for your help.

htmlcss

Answer №1

To easily align content vertically, you can utilize the vertical-align CSS property and specify either baseline or bottom.

table {
  width: 100%;
}

td {
  vertical-align: bottom;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<table>
  <tr>
    <td>
      <div class="form-group select optional personal_conflict_victim">
        <label class="control-label select optional" for="personal_conflict_victim">Are you a victim of armed conflict and included in the unique victims registry?</label>
        <select class="form-control select optional" name="personal[conflict_victim]" id="personal_conflict_victim"><option value="">SELECT</option>
                <option value="true">Yes</option>
                <option value="false">No</option>
            </select>
      </div>
    </td>
    <td>
      <div class="form-group select optional personal_victimizing_fact">
        <label class="control-label select optional" for="personal_victimizing_fact">What is the victimizing fact?</label>
        <select class="form-control select optional" name="personal[victimizing_fact]" id="personal_victimizing_fact">
                <option value="">SELECT</option>
                <option value="Forced Disappearance">Forced Disappearance</option>
                <option value="Kidnapping">Kidnapping</option>
                <option value="Forced Recruitment and Use">Forced Recruitment and Use</option>
                <option value="Displacement">Displacement</option>
                <option value="Homicide">Homicide</option>
                <option value="Massacre">Massacre</option>
                <option value="Landmines - Unexploded Ordnance MAP-MUSE">Landmines - Unexploded Ordnance MAP-MUSE</option>
                <option value="Torture or Cruel, Inhuman, or Degrading Treatment">Torture or Cruel, Inhuman, or Degrading Treatment</option>
                <option value="Personal Injuries (Permanent or Temporary)">Personal Injuries (Permanent or Temporary)</option>
                <option value="Crimes against Sexual Integrity and Freedom">Crimes against Sexual Integrity and Freedom</option>
                <option value="Dispossession">Dispossession</option>
                <option value="Damage to Movable or Immovable Property (terrorism) - Threat to Life, Integrity, and Personal Security">Damage to Movable or Immovable Property (terrorism) - Threat to Life, Integrity, and Personal Security</option>
            </select>
      </div>
    </td>
  </tr>
</table>

OR

If you also want to align the labels, consider this alternative approach:

table {
  width: 100%;
}
td {
  vertical-align: top;
  position: relative;
  width: 50%;
}
label {
  padding-bottom: 30px;
}
select {
  position: absolute;
  bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <table>
      <tr>
        <td>
          <div class="form-group select optional personal_conflict_victim">
            <label class="control-label select optional" for="personal_conflict_victim">Are you a victim of armed conflict and included in the unique victims registry?</label>
            <select class="form-control select optional" name="personal[conflict_victim]" id="personal_conflict_victim"><option value="">SELECT</option>
                    <option value="true">Yes</option>
                    <option value="false">No</option>
                </select>
          </div>
        </td>
        <td>
          <div class="form-group select optional personal_victimizing_fact">
            <label class="control-label select optional" for="personal_victimizing_fact">What is the victimizing fact?</label>
            <select class="form-control select optional" name="personal[victimizing_fact]" id="personal_victimizing_fact">
                    <option value="">SELECT</option>
                    <option value="Forced Disappearance">Forced Disappearance</option>
                    <option value="Kidnapping">Kidnapping</option>
                    <option value="Forced Recruitment and Use">Forced Recruitment and Use</option>
                    <option value="Displacement">Displacement</option>
                    <option value="Homicide">Homicide</option>
                    <option value="Massacre">Massacre</option>
                    <option value="Landmines - Unexploded Ordnance MAP-MUSE">Landmines - Unexploded Ordnance MAP-MUSE</option>
                    <option value="Torture or Cruel, Inhuman, or Degrading Treatment">Torture or Cruel, Inhuman, or Degrading Treatment</option>
                    <option value="Personal Injuries (Permanent or Temporary)">Personal Injuries (Permanent or Temporary)</option>
                    <option value="Crimes against Sexual Integrity and Freedom">Crimes against Sexual Integrity and Freedom</option>
                    <option value="Dispossession">Dispossession</option>
                    <option value="Damage to Movable or Immovable Property (terrorism) - Threat to Life, Integrity, and Personal Security">Damage to Movable or Immovable Property (terrorism) - Threat to Life, Integrity, and Personal Security</option>
                </select>
          </div>
        </td>
      </tr>
    </table>

Answer №2

To position the <select> element at the bottom of the cell, you need to specify a minimum height for the table cell's content.

td {
  position: relative;
}

td div.select {
  min-height: 150px;
}

td select {
  position: absolute;
  bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<table>
  <tr>
    <td>
      <div class="form-group select optional personal_conflict_victim">
        <label class="control-label select optional" for="personal_conflict_victim">Are you a victim of armed conflict and registered in the Unique Victims Registry?</label>
        <select class="form-control select optional" name="personal[conflict_victim]" id="personal_conflict_victim"><option value="">SELECT</option>
                <option value="true">Yes</option>
                <option value="false">No</option>
            </select>
      </div>
    </td>
    <td>
      <div class="form-group select optional personal_victimizing_fact">
        <label class="control-label select optional" for="personal_victimizing_fact">What is the victimizing fact?</label>
        <select class="form-control select optional" name="personal[victimizing_fact]" id="personal_victimizing_fact">
                <option value="">SELECT</option>
                <option value="Forced Disappearance">Forced Disappearance</option>
                <option value="Kidnapping">Kidnapping</option>
                <option value="Forced Recruitment and Use">Forced Recruitment and Use</option>
                <option value="Displacement">Displacement</option>
                <option value="Homicide">Homicide</option>
                <option value="Massacre">Massacre</option>
                <option value="Antipersonnel Mines - Unexploded Ordnance MAP-MUSE">Antipersonnel Mines - Unexploded Ordnance MAP-MUSE</option>
                <option value="Torture or Cruel, Inhuman, or Degrading Treatment">Torture or Cruel, Inhuman, or Degrading Treatment</option>
                <option value="Personal Injuries (Permanent or Temporary)">Personal Injuries (Permanent or Temporary)</option>
                <option value="Crimes against Sexual Integrity and Freedom">Crimes against Sexual Integrity and Freedom</option>
                <option value="Land Grabbing">Land Grabbing</option>
                <option value="Damage to movable or immovable property (terrorism) - Threat to life, integrity, and personal security">Damage to movable or immovable property (terrorism) - Threat to life, integrity, and personal security</option>
            </select>
      </div>
    </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

How to show table cell value in Angular 4 using condition-based logic

I am a beginner in Angular development. Here is the HTML code I am working with: <tr *ngFor="let item of calendarTableSelected; let idx = index"> <span *ngIf="idx === 0"> <td style="width:15%;" *ngFor="let name of item.results" ...

javascripthtmlangulartypescript

The function designed to create in-line TailwindCSS classNames may work inconsistently in React and NextJS environments

Currently, I am utilizing TailwindCSS to style a web application. One frustrating aspect is that when attempting to add before: and after: pseudo-elements, it must be done individually. For instance, take the navigation drop-down button styling: <span ...

javascriptcssreactjsnext.jstailwind-css

Having difficulty positioning content inside a div element

I am working with a set of three divs, each containing a .header class and a .content class. While I have managed to align the .header class correctly, I am facing an issue with aligning the .content class below the header with 10-15px padding on all sides ...

htmlcss

Is there a way to stop users from altering form values on a webpage by using the "inspect" tool in their browser?

Currently, I am developing an application using node.js and handlebars as the view engine. One issue I am facing is that when a form is submitted, it inserts data into the database. The problem arises because the form passes values that are hidden from the ...

javascripthtmlnode.js

What could be causing the bullet not to appear in Internet Explorer 6

It is visible in Firefox, but not in IE (specifically IE6). <style type="text/css"> li { list-style-type:disc; } </style> <div style="margin: 2px auto 15px; padding: 5px 0px; width: 480px; text-align: center;"> <ul style="margin: 0; ...

cssinternet-explorerhtml-lists

Tips for retaining a chosen selection in a dropdown box using AngularJS

How can I store the selected color value from a dropdown box into the $scope.color variable? Index.html: <label class="item item-select" name="selectName"> <span class="input-label">Choose your favorite color:</span> <select id="colo ...

javascriptangularjshtmlselectionic-framework

What is the best way to minify and concatenate multiple CSS files only after converting SCSS to CSS with Gulp?

When attempting to convert my scss files to css files using gulp, I encountered an issue. After writing the scss code, it is easily converted to css. However, I wanted to minify this css and save it in a different folder called 'min'. Within the ...

javascripthtmlcsssassgulp

Issue with Foundation 6 not triggering the change.zf.slider event

Hey there, this is my first time posting and I could really use some help... I'm struggling to make the $("[data-slider]").on('change.zf.slider', function(){}); event trigger. I've attempted using the id of the element like so $(" ...

javascriptjqueryhtmlzurb-foundation

Add a background image to the parent element while preserving the existing background color

Can you help me figure out how to apply a background image to the menu while still keeping the background color? HTML: <div class="top"> <div class="menu"> Nop. </div> Nam hendrerit erat eget tellus mollis facilisis. ...

htmlcss

Adding several <div> elements with the correct indices

I need help with a dynamic form that requires users to select a state before revealing the corresponding cities within that state. <form method="post"> <div class="summary"> <div class="trip"> <select name="State" class="s ...

javascriptjqueryhtml

Tips on ensuring the first column of an HTML table remains fixed in responsive design

I am trying to create a responsive HTML table where the first column remains fixed. I have a select box on my PHP page and I am using AJAX to display data from a database in the HTML table. However, when selecting a value in the select box in a responsiv ...

phphtml

What is the method for creating a background similar to that found on the Bootstrap homepage?

body>div { background-color: red; } <div>Additional content here</div> Looking for assistance in achieving a similar background to the one on the bootstrap main page. I attempted using a gradient, but was unable to achieve the desired re ...

cssbootstrap-5gradient

Image pop-ups that overlay text on the homepage

I'm facing an issue and I'm looking for a solution... Upon entering my homepage, I would like to display a popup image showcasing a new event so visitors can see it before accessing the website. I attempted to achieve this using JavaScript but w ...

javascripthtmlcss

The I am facing an issue with Material-ui Grid where the width of the Grid item is too large and extending beyond the boundaries

I'm in the process of setting up a basic layout for a single-page application using Material-ui and React. My plan is to have a sidebar on the left-hand side and a main area on the right-hand side to display information. However, I am facing two issue ...

cssreact-nativeflexboxmaterial-ui

Utilize Ajax, jQuery, and HTML select elements to showcase customized information

Hey everyone, I could really use some assistance with this. What I'm trying to accomplish is selecting data from a database using the onchange() function in Ajax and then returning the result to the client. I have successfully used Ajax to send inform ...

phpjqueryhtmlajax

Are you familiar with PowerShell and its innovative modular GUI capabilities?

One challenge I face is assisting clients who constantly monitor the performance of their servers, services, and network. Utilizing PowerShell, I envisioned creating a unified GUI interface for all these tasks, including remote log tailing capabilities. B ...

c#htmlpowershelluser-interface

What are the advantages of importing CSS files from JS source code with webpack, rather than building CSS in isolation as traditionally done?

If you're looking for information on how to load CSS with webpack, check out the documentation here: https://webpack.js.org/guides/asset-management/#loading-css1 The webpack documentation suggests importing CSS files from JavaScript code and using ex ...

csswebpack

Subclass Pseudoclass in JavaFX is a powerful feature that

I wanted to create two different styles of buttons in one css file. To achieve this, I added a class to the second button using: close.getStyleClass().add("close-button"); Now, I can reference this button in the css by: .button.close-button However, I ...

cssjavafx

Deactivated dropdown menu options with the help of Twitter's bootstrap framework

Using markup, I have created a dropdown menu utilizing Twitter Bootstrap. <ul class="nav pull-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b>< ...

csstwitter-bootstrap

Navigating to a parent URL where the Angular configuration is set can be achieved by following these steps

My application revolves around a webpage created with the use of node and angular. On the root URL (/), I have incorporated a signup and login form without the use of Angular. Upon successful login, Angular scripts and configuration files are loaded on the ...

javascripthtmlnode.jsangularjsangular-routing