Arrange dynamic elements in rows to utilize the entire available space, while ensuring that groups remain intact and are not split

Question

Arrange dynamic elements in rows to utilize the entire available space, while ensuring that groups remain intact and are not split

My form allows users to dynamically add categories, groups, and individual inputs.

I want to print the completed form so that it looks good on paper. The form can get quite complex, so I created a separate minimal page for printing purposes.

You can view my current progress in this jsFiddle or see the layout https://i.sstatic.net/mrJWt.png

The issues I'm facing are highlighted in red and purple below:

Purple: I want the last input-value field in each row to extend all the way to the right to fill up the remaining space on the row.

Red: I need to prevent the input-label and input-value from breaking across multiple lines. If there isn't enough room on the row, they should move to the next line together.

How can these two problems be resolved? I am open to using JavaScript/jQuery solutions if needed.

javascript jquery html css layout

Answer 1

Answer №1

I have created a function that performs two distinct tasks:

The function checks if the input-value and input-label are on different rows, and if so, it moves the input-value to a new row with a clear:left property.
After moving the input-value to a new row, the function expands the last input-value in the previous row to utilize the remaining width (row width - input far from the left).

You can view the demonstration on JSFiddle: http://jsfiddle.net/7tnkL9b0/5/

Here's the code snippet for your reference:

$('.category').each(function(){
    $('.input-row').each(function(){
        this_input=$('.input-value',this).offset().top
        this_label=$('.input-label',this).offset().top
        console.log(this_input,this_label)
        if(this_input!=this_label){
            console.log('here')
            $('.input-label',this).css('clear','both')
            $('.input-value',$(this).prev()).width(
                $(this).width()-$('.input-value',$(this).prev()).offset().left
            )
        }

        if($(this).next().length==0){
            $('.input-value',this).width(
               $(this).width()-$('.input-value',this).offset().left
            )
        }
    })
})

You can also refer to the image linked below for visual representation: https://i.sstatic.net/VbrxB.jpg

Answer 2

I have created a function that performs two distinct tasks:

The function checks if the input-value and input-label are on different rows, and if so, it moves the input-value to a new row with a clear:left property.
After moving the input-value to a new row, the function expands the last input-value in the previous row to utilize the remaining width (row width - input far from the left).

You can view the demonstration on JSFiddle: http://jsfiddle.net/7tnkL9b0/5/

Here's the code snippet for your reference:

$('.category').each(function(){
    $('.input-row').each(function(){
        this_input=$('.input-value',this).offset().top
        this_label=$('.input-label',this).offset().top
        console.log(this_input,this_label)
        if(this_input!=this_label){
            console.log('here')
            $('.input-label',this).css('clear','both')
            $('.input-value',$(this).prev()).width(
                $(this).width()-$('.input-value',$(this).prev()).offset().left
            )
        }

        if($(this).next().length==0){
            $('.input-value',this).width(
               $(this).width()-$('.input-value',this).offset().left
            )
        }
    })
})

You can also refer to the image linked below for visual representation: https://i.sstatic.net/VbrxB.jpg

Answer 3

Answer №2

Here is a snippet of the final code I settled on after working with @Armina's solution. The original answer was good, but it didn't behave consistently across different screen sizes.

If you'd like to see the full code in action, check out this jsFiddle

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

$.fn.extend({
    alignRows: function (options) {
        var defaults = {
            container: '#print-container', // the selector for the container element that holds all the groups
            label: '.input-label', // the selector for the elements holding the labels for the inputs
            value: '.input-value', // the selector for the elements holding the values for the inputs
            pair: '.input-pair', // the selector for the wrapper element that holds the label and value
            ignore: 'col-12' // a classname to ignore, these elements will not be evaluated or changed, style these some other way
        };
        options = $.extend(defaults, options);
        this.each(function (g, el) {
            var $group = $(el);
            var $pairs = $group.find(options.pair);
            $pairs.each(function (i, e) {
                var $this = $(e);
                var $label = $this.find(options.label);
                var $value = $this.find(options.value);
                var $nextPair = $pairs.eq(i + 1);
                if ($nextPair.length > 0) {
                    var thisTop = $this.offset().top;
                    var nextTop = $nextPair.offset().top;
                    if (thisTop != nextTop && !$this.hasClass(options.ignore)) {
                        //console.log('break to new row'); 
                        $this.stretch(options);
                    }
                } else {
                    //console.log('last in row'); 
                    $this.stretch(options);
                }
            });
        });
        return this;
    },
    stretch: function (options) {
        this.each(function (g, el) {
            var defaults = {};
            var $this = $(el);
            $this.css('margin-right', '0px').css('margin-right', '0px');
            var $value = $this.find(options.value);
            var elementWidth = $value.outerWidth(true);
            var elementLeft = $value.offset().left;
            var elementRightEdge = elementWidth + elementLeft;
            var containerWidth = $(options.container).outerWidth();
            var containerLeft = $(options.container).offset().left;
            var containerRightEdge = containerWidth + containerLeft;
            var offset = containerRightEdge - elementRightEdge;
            var newWidth = (elementWidth + offset) - 30;
            $value.css('width', newWidth + 'px');
            /*
            console.log('elementRightEdge  is ' + elementRightEdge);
            console.log('containerRightEdge  is ' + containerRightEdge);
            console.log('difference is ' + offset);
            console.log('stretching element to ' + newWidth);
            */
        });
        return this;
    }
});
$('.input-group').alignRows();

html, body {
    font-family: Arial, Helvetica, sans-serif;
}
#print-container {
    width: 210mm;
    /*height: 297mm;*/
    margin-left: auto;
    margin-right: auto;
    display: table;
    height:50px;
    position:relative;
}
.print-header {
    color: #909090 !important;
    font-size: 26px !important;
    line-height: 26px !important;
    font-weight: bold !important;
    padding-bottom:24px !important;
    margin-top: 30px;
}
.print-header-text {
    transform:scale(1.1, 1.3);
    /* W3C */
    -webkit-transform:scale(1.1, 1.3);
    /* Safari and Chrome */
    -moz-transform:scale(1.1, 1.3);
    /* Firefox */
    -ms-transform:scale(1.1, 1.3);
    /* IE 9 */
    -o-transform:scale(1.1, 1.3);
    /* Opera */
    padding-top:22px;
}

...

</script>
<div id="print-container">
    <div class="print-header row">
        <div class="col-3 text-center ">
           <img width="176.5" height="73.15019011406845" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=176%C3%9773&w=176.5&h=73.15019011406845" alt="">
        </div>
        <div class="col-9 text-center vtop print-header-text">SOME FORM TITLE HERE</div>
    </div>

    ...

    </div>
</div>

Answer 4

Here is a snippet of the final code I settled on after working with @Armina's solution. The original answer was good, but it didn't behave consistently across different screen sizes.

If you'd like to see the full code in action, check out this jsFiddle

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

$.fn.extend({
    alignRows: function (options) {
        var defaults = {
            container: '#print-container', // the selector for the container element that holds all the groups
            label: '.input-label', // the selector for the elements holding the labels for the inputs
            value: '.input-value', // the selector for the elements holding the values for the inputs
            pair: '.input-pair', // the selector for the wrapper element that holds the label and value
            ignore: 'col-12' // a classname to ignore, these elements will not be evaluated or changed, style these some other way
        };
        options = $.extend(defaults, options);
        this.each(function (g, el) {
            var $group = $(el);
            var $pairs = $group.find(options.pair);
            $pairs.each(function (i, e) {
                var $this = $(e);
                var $label = $this.find(options.label);
                var $value = $this.find(options.value);
                var $nextPair = $pairs.eq(i + 1);
                if ($nextPair.length > 0) {
                    var thisTop = $this.offset().top;
                    var nextTop = $nextPair.offset().top;
                    if (thisTop != nextTop && !$this.hasClass(options.ignore)) {
                        //console.log('break to new row'); 
                        $this.stretch(options);
                    }
                } else {
                    //console.log('last in row'); 
                    $this.stretch(options);
                }
            });
        });
        return this;
    },
    stretch: function (options) {
        this.each(function (g, el) {
            var defaults = {};
            var $this = $(el);
            $this.css('margin-right', '0px').css('margin-right', '0px');
            var $value = $this.find(options.value);
            var elementWidth = $value.outerWidth(true);
            var elementLeft = $value.offset().left;
            var elementRightEdge = elementWidth + elementLeft;
            var containerWidth = $(options.container).outerWidth();
            var containerLeft = $(options.container).offset().left;
            var containerRightEdge = containerWidth + containerLeft;
            var offset = containerRightEdge - elementRightEdge;
            var newWidth = (elementWidth + offset) - 30;
            $value.css('width', newWidth + 'px');
            /*
            console.log('elementRightEdge  is ' + elementRightEdge);
            console.log('containerRightEdge  is ' + containerRightEdge);
            console.log('difference is ' + offset);
            console.log('stretching element to ' + newWidth);
            */
        });
        return this;
    }
});
$('.input-group').alignRows();

html, body {
    font-family: Arial, Helvetica, sans-serif;
}
#print-container {
    width: 210mm;
    /*height: 297mm;*/
    margin-left: auto;
    margin-right: auto;
    display: table;
    height:50px;
    position:relative;
}
.print-header {
    color: #909090 !important;
    font-size: 26px !important;
    line-height: 26px !important;
    font-weight: bold !important;
    padding-bottom:24px !important;
    margin-top: 30px;
}
.print-header-text {
    transform:scale(1.1, 1.3);
    /* W3C */
    -webkit-transform:scale(1.1, 1.3);
    /* Safari and Chrome */
    -moz-transform:scale(1.1, 1.3);
    /* Firefox */
    -ms-transform:scale(1.1, 1.3);
    /* IE 9 */
    -o-transform:scale(1.1, 1.3);
    /* Opera */
    padding-top:22px;
}

...

</script>
<div id="print-container">
    <div class="print-header row">
        <div class="col-3 text-center ">
           <img width="176.5" height="73.15019011406845" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=176%C3%9773&w=176.5&h=73.15019011406845" alt="">
        </div>
        <div class="col-9 text-center vtop print-header-text">SOME FORM TITLE HERE</div>
    </div>

    ...

    </div>
</div>

Arrange dynamic elements in rows to utilize the entire available space, while ensuring that groups remain intact and are not split

Answer №1

Answer №2

If you'd like to see the full code in action, check out this jsFiddle

Similar questions

Toggle between fading in and out by clicking the button using a div

Ways to trigger a modal programmatically in the backend code?

Transmitting an image encoded in base64 using Ajax and form data

What is the best way to insert HTML elements in front of other HTML elements using a form and jQuery?

Is there a way I can showcase my tags such as "vegan, pasta, etc." using the map feature from Firestore?

Unique element is bound with jQuery's ajaxStart function

Move your cursor over the toggle menu to reveal the concealed image

Unable to establish the characteristic of 'undefined' to null while using React

Improving a lengthy TypeScript function through refactoring

Unable to remove Css class through code behind

The issue of AngularJS failing to bind object properties to the template or HTML element

Is it possible to access the serial port using HTML5?

What are the steps to fix the eslint error related to "Generic Object Injection Sink"?

In Javascript, you can enhance your axes on a graph by adding labels at both the

Creating dynamic input forms in PHP

Parsing through an extensive JSON array to locate a particular item

Using webkitRelativePath feature in Angular

I am attempting to implement an Express static middleware as demonstrated in this book, but I am having trouble understanding the intended purpose of the example

Tips for waiting on image loading in canvas

Visualizing Data with Recharts: Creating a Continuous Line or Area Graph in JavaScript to Display Average Values in 15-Minute Intervals