在行上调整动态元素，占用所有可用空间，而不会跨多行划分组

时间：2015-11-15 15:19:42

标签： javascript jquery html css layout

我有一个动态表单，因为我的用户可以动态地向表单添加类别，组和单个输入。

我需要能够打印完成的表格，并使其布局在打印页面上看起来不错。

实际形式可能非常复杂，为了尽可能简单，我们制作了一个单独的页面进行打印，显示的内容非常少

这是我目前所拥有的jsFiddle enter image description here

我的问题区域标有红色和紫色

紫色：我希望每行的最后一个input-value字段向右走，以占用该行的所有剩余空间。

红色：我想将input-label和input-value设置为永远不会像这样突破多行。如果两者都没有足够的空间，则应将它们都移动到下一行。

＆＃13;
＆＃13; 
html,body{
    font-family: Arial, Helvetica, sans-serif;
}
.print-container {
    width: 210mm;
    /*height: 297mm;*/
    margin-left: auto;
    margin-right: auto;
    display: table;
    height:50px;
}

.vtop {
    vertical-align: top;
}

.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;
}

.print-category-header{
    text-align:center !important;
    text-transform: uppercase !important;
    color: #606269 !important;
    background-color: #f2f2f2 !important;
    padding-top:5px;
    padding-bottom:5px;
}
legend{
    background-color: #ffffff;
    padding-right: 7px;
    padding-left: 7px;
    font-size: 16px;
    text-transform: uppercase;
    color: #606269 !important;
}
.print-category-header{
    margin-top:20px;
}
.left{
    float:left;
}
.print-header{
    width: 100%;
    height:auto;
}
.print-header>div{
}
.col-3{
    width:25%;
}
.col-6{
    width:50%;
}
.col-9{
    width:75%;
}
.col-12{
    width: 100%;
}
.row:after,.clearfix:after,fieldset:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
.row>div,.input-label,.input-value{
    float: left;
}
.input-value {
    margin-left: 10px;
    color:#999999;
    min-width: 118px;
    border-bottom: 1px solid #999999;
    height: auto;
    margin-top: 10px;
    display: inline-block;
    margin-right:15px;
}
.input-row{
    white-space: nowrap;
}
.input-label{
    height: auto;
    margin-top: 10px;
}
.text-center{
    text-align: center;
}
.category{
    width:100%;
}
fieldset {
    border: 1px solid #CCCCCC;
    margin-top:10px;
}
@media print and (color) {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
＆＃13; 
<div class="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">PREPLAN DATA COLLECTION</div>
    </div>
    <div id="saved-form-info" class="beginsHidden" data-saved-form-id="" data-inputs-to-remove=""></div>
    <div id="category-tab-container">
        <div class="category">
            <div class="print-category-header">First Category</div>
            <div class="input-group">
                <fieldset>
                    <legend><div class="group">Grup Name</div></legend>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">Some content</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">Some longer content</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">Small</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">Some even longer longer content</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="category">
            <div class="print-category-header">Second Category</div>
            <div class="input-group">
                <fieldset>
                    <legend><div class="group">Grup Name</div></legend>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">Input Label</div>
                        <div class="input-value">&nbsp;</div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>

</div>
＆＃13;
＆＃13;
＆＃13;

如何解决这两个问题？

如果有必要，我愿意接受Javascript / jQuery解决方案

2 个答案:

答案 0 :(得分：1)

我写了一个做两件事的函数：

  1. 搜索输入值和输入标签不在同一行的位置，如果是，则将输入值移动到新原始（清除：左）

  2. 移动到新原始后，id在上一个raw中创建最后一个输入值，以展开（行宽 - 远离左侧输入）

    3. 的jsfiddle： http://jsfiddle.net/7tnkL9b0/5/

    守则：

    $('.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
            )
        }
    })
})

    Screenshot

答案 1 :(得分：0)

以下是基于@Armina答案的最终结果摘要，该答案虽然不错但在不同尺寸的屏幕上表现不同。

这是jsFiddle

enter image description here 

$.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;
}
.print-category-header {
    text-align:center !important;
    text-transform: uppercase !important;
    color: #606269 !important;
    background-color: #f2f2f2 !important;
    padding-top:10px;
    padding-bottom:8px;
    margin-bottom:-12px;
}
fieldset {
    border: 1px solid #CCCCCC;
}
legend {
    padding-top:5px;
    padding-right: 7px;
    padding-left: 7px;
    font-size: 16px;
    text-transform: uppercase;
    color: #606269 !important;
    /*border-top-right-radius:50%;
    background-color: #ffffff;
    border-top-left-radius:50%;*/
}
.print-category-header {
    margin-top:20px;
}
.print-header {
    width: 100%;
    height:auto;
}
.print-header>div {
}
.col-3 {
    width:25%;
}
.col-6 {
    width:50%;
}
.col-9 {
    width:75%;
}
.col-12 {
    width: 100%;
}
.col-12 .input-value{
    text-align:left;
}
.row:after, .clearfix:after, fieldset:after {
    content:" ";
    display: block;
    height: 0;
    clear: both;
}
.row>div, .input-label, .input-value {
    float: left;
}
.input-value {
    margin-left: 10px;
    color:#999999;
    min-width: 118px;
    border-bottom: 1px solid #999999;
    height: auto;
    margin-top: 10px;
    display: inline-block;
    margin-right:15px;
    font-size:14px;
    text-align:center;
}
.input-label {
    height: auto;
    margin-top: 10px;
}
.input-group {
    width:100%
}
.input-pair {
    display:inline-block;
}
.text-center {
    text-align: center;
}
.category {
    width:100%;
}
.next-on-new-line {
    float:none;
}
.on-new-line {
    float:none;
    margin-left:0px;
    width:98%
}
.vtop {
    vertical-align: top;
}
@media print and (color) {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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 id="category-tab-container">
        <div class="category">
            <div class="print-category-header">Test Category</div>
            <div class="input-group">
                <fieldset class="m-t-15">
                    <legend>
                        <div class="group">test</div>
                    </legend>
                    <div class="input-pair">
                        <div class="input-label">Client</div>
                        <div class="form-input input-value">Some company name here</div>
                    </div>
                    <div class="input-pair">
                        <div class="input-label">Account Number</div>
                        <div class="form-input input-value">24554558954-54</div>
                    </div>
                    <div class="input-pair">
                        <div class="input-label">Date</div>
                        <div class="form-input input-value">12/22/1983</div>
                    </div>
                    <div class="input-pair">
                        <div class="input-label">Some Input</div>
                        <div class="form-input input-value">Min-118px </div>
                    </div>
                    <div class="input-pair">
                        <div class="input-label">Text Input</div>
                        <div class="form-input input-value">Expanded to fit space that is left</div>
                    </div>
                    <div class="input-pair col-12">
                        <div class=" input-label next-on-new-line">Some Long Content</div>
                        <div class="form-input input-value on-new-line">This line is for much larger text that should always take up a full row, like the contents of a textarea. This line makes use of the option `ignore` to tell the plugin to ignore the element so you can sytle it as you see fit elsewhere </div>
                    </div>
                    <div class="input-pair">
                        <div class="input-label">Selectbox</div>
                        <div class="form-input input-value">&nbsp;</div>
                    </div>
                    <div class="input-pair">
                        <div class="input-label">Multiple Selectbox</div>
                        <div class="form-input input-value">&nbsp;</div>
                    </div>
                    <div class="input-pair">
                        <div class="input-label">Number</div>
                        <div class="form-input input-value">12</div>
                    </div>
                    <div class="input-pair">
                        <div class="input-label">Date</div>
                        <div class="form-input input-value">&nbsp;</div>
                    </div>
                    <div class="input-pair">
                        <div class="input-label">Image Upload</div>
                        <div class="form-input input-value">&nbsp;</div>
                    </div>
                    <div class="input-pair">
                        <div class="input-label">File Upload</div>
                        <div class="form-input input-value">&nbsp;</div>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="category">
            <div class="print-category-header">Second Category</div>
            <div class="input-group">
                <fieldset class="m-t-15">
                    <legend>
                        <div class="group">Group One</div>
                    </legend>
                    <div class="input-pair">
                        <div class="input-label">Text 1</div>
                        <div class="form-input input-value">&nbsp;</div>
                    </div>
                    <div class="input-pair">
                        <div class="input-label">Text 2</div>
                        <div class="form-input input-value">&nbsp;</div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

相关问题
最新问题