Aligning a text box horizontally with a label when they are in separate div elements

Question

Aligning a text box horizontally with a label when they are in separate div elements

I need help aligning a series of text boxes with their corresponding labels. The challenge is that they are in separate divs, preventing the use of the inherit keyword. I attempted to align them using javascript/jquery code below, but $(tb).css('left') only returns auto. Is there a way to achieve this alignment without resorting to tables and utilizing html, css, and/or javascript/jquery?

$(function() {
    $('#infoLabels label').each(function(idx,lbl) {
        var tb = $('#' + lbl.htmlFor);

        ($(tb).width() > $(this).width()) ? $(this).width($(tb).width()) : $(tb).width($(this).width());
        $(this).css('left',$(tb).css('left'));                
    });
});

http://jsfiddle.net/apandit/k5max5fw/1/

Any suggestions would be greatly appreciated.

jquery html css textbox label

Answer 1

Answer №1

JSFiddle

Using CSS for Table-Like Display

By utilizing CSS properties such as display : table, display : table-row, and display : table-cell, you can create a table-like layout without the need for actual <table></table> elements. This allows you to focus on styling your element using CSS only.

This method provides full compatibility with all devices from IE8 onwards and Android 4.1+. Please note that devices with older versions of Android may not support this technique. For more information on browser support for display table, table-row, and table-cell, visit caniuse.com.

Answer 2

JSFiddle

Using CSS for Table-Like Display

By utilizing CSS properties such as display : table, display : table-row, and display : table-cell, you can create a table-like layout without the need for actual <table></table> elements. This allows you to focus on styling your element using CSS only.

This method provides full compatibility with all devices from IE8 onwards and Android 4.1+. Please note that devices with older versions of Android may not support this technique. For more information on browser support for display table, table-row, and table-cell, visit caniuse.com.

Answer 3

Answer №2

To achieve this effect, you can use a few lines of CSS code.

.info-table{ display:table }
#infoLabels, #infoBoxes{ display:table-row }
#infoLabels > span, #infoBoxes > span{ display:table-cell; }

With these changes, the div structure will function like a table. http://jsfiddle.net/k5max5fw/3/

Answer 4

To achieve this effect, you can use a few lines of CSS code.

.info-table{ display:table }
#infoLabels, #infoBoxes{ display:table-row }
#infoLabels > span, #infoBoxes > span{ display:table-cell; }

With these changes, the div structure will function like a table. http://jsfiddle.net/k5max5fw/3/

Answer 5

Answer №3

In my opinion, using a table in this scenario would be completely acceptable. However, if you'd rather not use a table, you can achieve the same outcome with a CSS solution by defining the widths of the span elements containing the label and input elements. Here's an example:

span {
    display: inline-block;
    margin-right: 10px;
}
span:nth-child(1) {
    width: 245px;
}
span:nth-child(2),
span:nth-child(3) {
    width: 45px;
}
span input {
    width: 100%;
}

<div id="footer" class="page-footer">
    <div class="info-table">
        <div id="infoLabels"> 
            <span><label for="time">Time</label></span>
            <span><label for="value">Value</label></span>
            <span><label for="flag">Flag</label></span>
        </div>
        <div id="infoBoxes"> 
            <span><input id="time" type="text" /></span>
            <span><input id="value" type="text" /></span>
            <span><input id="flag" type="text" /></span>            
        </div>
    </div>
</div>

Answer 6

In my opinion, using a table in this scenario would be completely acceptable. However, if you'd rather not use a table, you can achieve the same outcome with a CSS solution by defining the widths of the span elements containing the label and input elements. Here's an example:

span {
    display: inline-block;
    margin-right: 10px;
}
span:nth-child(1) {
    width: 245px;
}
span:nth-child(2),
span:nth-child(3) {
    width: 45px;
}
span input {
    width: 100%;
}

<div id="footer" class="page-footer">
    <div class="info-table">
        <div id="infoLabels"> 
            <span><label for="time">Time</label></span>
            <span><label for="value">Value</label></span>
            <span><label for="flag">Flag</label></span>
        </div>
        <div id="infoBoxes"> 
            <span><input id="time" type="text" /></span>
            <span><input id="value" type="text" /></span>
            <span><input id="flag" type="text" /></span>            
        </div>
    </div>
</div>

Answer 7

Answer №4

When working on your website, consider the following:

               <div id="footer" class="page-footer">
               <div class="info-table" data-info="important">
                   <div id="infoLabels">
                       <span><label for="time">Time</label></span><br>
                       <span><label for="value">Value</label></span><br>
                       <span><label for="flag">Flag</label></span><br>
                   </div>
                   <div id="infoBoxes">
                       <span><input id="time" type="text" size="40" /></span><br>
                       <span><input id="value" type="text" size="7" /></span><br>
                       <span><input id="flag" type="text" size="7" /></span><br>
                   </div>
               </div>
           </div>

Make sure to add after each span tag.

To style the labels, you can use the following CSS code:

#infoLabels
{
    float:left;
}

Give it a try!

Answer 8

When working on your website, consider the following:

               <div id="footer" class="page-footer">
               <div class="info-table" data-info="important">
                   <div id="infoLabels">
                       <span><label for="time">Time</label></span><br>
                       <span><label for="value">Value</label></span><br>
                       <span><label for="flag">Flag</label></span><br>
                   </div>
                   <div id="infoBoxes">
                       <span><input id="time" type="text" size="40" /></span><br>
                       <span><input id="value" type="text" size="7" /></span><br>
                       <span><input id="flag" type="text" size="7" /></span><br>
                   </div>
               </div>
           </div>

Make sure to add after each span tag.

To style the labels, you can use the following CSS code:

#infoLabels
{
    float:left;
}

Give it a try!

Aligning a text box horizontally with a label when they are in separate div elements

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Looking to specifically tick the initial checkbox in Django

Expanding Overlay Width in Vuejs and CSS for Small Devices under 500px

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

Ways to verify if a web URL is contained within an HTML textbox

What does jquery's :checked return as its value?

Finding it impossible to modify select choices generated through jQuery

Unable to automate tests with file uploads

Is it possible to apply filters to data when appending it in JSON format?

Choosing an ASP.NET server control with a dynamically stored id using jQuery

Pause display as the window refreshes

The fixed div width suddenly switches to 100% without warning

Tips for placing a checkbox above a DIV element when generating checkboxes within a foreach loop

How to use jQuery to retrieve the second and third elements from a sorted list

Update the content according to the size of the screen

Conceal navigation buttons on the first and last pages of the slider

The absence of jQuery within the document.ready function is causing an issue

Guide to designing a CSS gradient with a downward arrow linked to a specific container

Error displayed inline

Utilizing AJAX in conjunction with PHP to check for duplicate users and display an image on the webpage

What is the proper method for initiating an ajax request from an EmberJs component?