Добавление новой строки в уменьшенном размере экрана не воспринимает изменение класса медиазапросов - PullRequest
Новая
       10

Добавление новой строки в уменьшенном размере экрана не воспринимает изменение класса медиазапросов

0 голосов
/ 02 апреля 2020

Раздел моей формы - это строка данных, отформатированная в соответствии с медиа-запросами. Пользователь может добавить дополнительные строки. Это делается с помощью JavaScript (jQuery). Проблема в том, что когда я клонирую новую строку, не все измененное форматирование, как изложено в медиазапросах, вместо этого читается, возвращаясь к форматированию в исходной таблице стилей.

Строка (HTML с некоторыми PHP) 

    <div class="WFormSection BOLItems">
    <div class="WTableHead">
        <div class="alignleft FormCol60 WHeadText">Units</div>
        <div class="space"></div>
        <div class="alignleft FormCol20 WHeadText">Haz</div>
        <div class="space"></div>
        <div class="alignleft FormColMid WHeadText">Description of Articles</div>
        <div class="space"></div>
        <div class="alignleft FormCol60 WHeadText">NMFC</div>
        <div class="space"></div>
        <div class="alignleft FormCol60 WHeadText">Class</div>
        <div class="space"></div>
        <div class="alignleft FormColTiny WHeadText">Weight</div>
    </div>
    <div class="clear"></div>
    <!--=============================== -->
    <!--           R O W  0             -->
    <!--=============================== -->
    <div class="parent-group">
        <div class="form-group">
            <hr>
            <div class="alignleft FormCol60 TD Inline">
                <div class="ColTitle">Units: </div>
                <input type="text" id="Pieces(0)" name="Pieces[0]" maxlength="5" size="4" value="<?PHP echo($Pieces[0]); ?>" class="inputtext right FirstCell" placeholder="Units">
            </div>
            <div class="space"></div>
            <div class="alignleft FormCol20 Center TD Inline">
                <div class="ColTitle">Hazmat: </div>
                <label class="CBContainer CB">
                    <input type="checkbox" id="HM(0)" name="HM[0]" value="X" <?PHP if($HM[0]=="X"){echo('checked="Checked"');} ?>>
                    <span class="Checkmark"></span>
                </label>
            </div>
            <div class="space"></div>
            <div class="ColTitle">Description:</div>
                <div class="alignleft FormColMid TD">
                    <div class="DescriptionTextarea">
                        <textarea class="txt" id="Descr(0)" name="Descr[0]" maxlength="53" placeholder="Description"><?PHP echo($Descr[0]); ?></textarea>
                        <input class="FormCol30 ChrCt" name="Output" id="Output" size="5" value="53" readonly disabled />
                    </div>
                </div>
            </div>
            <div class="space"></div>
            <div class="alignleft FormCol60 TD Inline">
                <div class="ColTitle">NMFC: </div>
                <input type="text" id="NMFC(0)" name="NMFC[0]" maxlength="10" size="8" value="<?PHP echo($NMFC[0]); ?>" class="inputtext right" placeholder="NMFC">
            </div>
            <div class="space"></div>
            <div class="alignleft FormCol60 TD Inline">
                <div class="ColTitle">Class: </div>
                <?PHP echo PopSelect('Class[0]', $ClassArr, $Class[0], 'DropBox2',1,0,'',0,'','','Class(0)'); ?>
            </div>
            <div class="space"></div>
            <div class="alignleft FormColTiny TD Inline">
                <div class="ColTitle">Weight: </div>
                <input type="text" id="Weight(0)" name="Weight[0]" maxlength="5" size="4" value="<?PHP echo($Weight[0]); ?>" class="inputtext right EndCell" data-datarow=0 placeholder="Weight">
            </div>
            <div class="space"></div>
            <div class="alignleft form-group">
                <a class="RowDeleteButton del" id="DeleteRow" href="javascript:void(0)"> X </a>
            </div>
            <div class="Clear"></div>
        </div> <!-- child-group -->
    <div class="clearfix"></div>
</div> <!-- parent-group -->

Здесь происходит то, что исходная строка полностью горизонтальна, то есть заголовок исходного столбца (WHeadText). При меньших размерах экрана заголовок исчезает, и в игру вступают метки (ColTitle). Таким образом, при определенном размере экрана класс «WHeadText» скрыт, а класс «ColTitle» появляется. Это прекрасно работает в оригинальном ряду. В клонированных строках ни заголовок, ни метки не появляются, и другое форматирование также не изменяется.

JavaScript

    <script>
    function CreateNewRow()
    {
        var ChildCount = $('.child-group').length;
        if(ChildCount == 7)
        {
            alert("Sorry, 8 is the maximum number of rows");
        }
        else
        {
            var len = window.LastArrayValue;
            window.LastArrayValue = len + 1;
            $('.parent-group').clone(true, true).find(':input').each(function(idx, ele)
            {
                var ename = ele.name;
                var eid   = ele.id
                var ArrayValue = len+1;
                ele.name = ename.replace(/(\[\/?[^\]]*\])/g, "["+ArrayValue+"]");
                ele.id   = eid.replace(/(\(\/?[^\]]*\))/g, "("+ArrayValue+")");
                if (typeof $(this).data('datarow') !== 'undefined'){$(this).data('datarow', ArrayValue);} // Skip if there is not a datarow attribute
                if(ele.type == "checkbox"){ele.checked = false;}
                else{ele.value = '';}
            }).end().find('.form-group').toggle(true).end()
              .toggleClass('parent-group child-group').hide()
              .appendTo('#container').slideDown('slow',function()
              {
                  $("#container").find(".FirstCell").last().focus();
              });
        }
    }
</script>

Могу Конечно, инициируйте изменения класса с помощью Javascript, но форматирование меняется более одного раза, и каждый раз большая часть форматирования, которое вы видите ниже, изменяется, что создает реальную проблему, в дополнение к возможным различиям может быть обнаружение области просмотра двумя разными способами.

CSS (только для одного примера приведено одно изменение медиазапроса): 

.WFormSection.BOLItems .ColTitle {display:block; padding-top:15px; width:75px; margin-right:15px; text-align:Left; clear:left; font-weight:bold;}
.WFormSection.BOLItems .CBContainer {margin-top:15px;}
.WFormSection.BOLItems .WTableHead {display:none;}
.WFormSection.BOLItems .TD {float:left;}
.WFormSection.BOLItems .DescriptionTextarea {margin-bottom:10px;}
.WFormSection.BOLItems .DescriptionTextarea textarea {width:80%;}
.BOLItems .FormColSmall, .BOLItems .FormColMedium, .BOLItems .FormColMid, .BOLItems .FormColWide {max-width:100%; padding-right:3px;}

CSS С Оригинальная таблица стилей (поскольку она была запрошена): 

.WFormSection {border:1px solid #969696; padding:15px; background:url(../images/comment-form_bg.png) 0 0 repeat-x #e9e9e9; margin-bottom:15px; position:relative;}
.WFormSectionTitle {color:#0F61AC; font-weight:500; font-size:16px; width:100%; text-align:center; margin-bottom:15px;}
.WFormSection .one_third {width:28%;}
.WFormSection .one_fourth {width:20%;}
.WFormSection .one_fifth {width:16.800%;}
.WFormSection .one_half {width:40%;}
.WFormSection .Split, .TrackBox .Split {float:left; width:48%; padding:0 1%;}
.WFormSection .CheckBox {width:100%;}
.WFormSection .StateDrop, .WFormSection .DateDrop, .WFormSection .SmallDrop, .WFormSection .LongDrop {padding:10px 10px 19px 10px; margin-top:4px;}
.WFormSection.SubnitBox {padding:8px; margin-top:20px; text-align:center;}
.WFormSection.SubmitBox .RadioHorizontal {display:inline-block; margin-left:20px;}
.WFormSection.Table {padding-bottom:0; margin-bottom:0;}
.WFormSection .VerticalSpace20 {height:20px;}
.WFormSection .form-group .DescriptionTextarea {height: 54px;}
.WFormSection .form-group .DescriptionTextarea textarea {width:85%; height:100%; line-height:110%;}
.WFormSection .form-group .DescriptionTextarea .ChrCt {display:inline-block; border:none; background:transparent; margin-left:10px; color:#D78E21; font-size:16px; font-weight:600;}
.WFormSection em {display:inline; padding-left:12px; font-style:normal;}
.WHeadText {color:#000000; display:block; font-weight:600}
.WHeadText {font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:18px; width:100%; margin:3px 0; padding:7px 10px 7px 2px;}
.WFormSection .form-group .DescriptionTextarea {height: 54px;}
.WFormSection .form-group .DescriptionTextarea textarea {width:85%; height:100%; line-height:110%;}
.WFormSection .form-group .DescriptionTextarea .ChrCt {display:inline-block; border:none; background:transparent; margin-left:10px; color:#D78E21; font-size:16px; font-weight:600;}
.ColTitle {display:none;}
.CBContainer {display:block; position:relative; padding-left:24px; margin-bottom:8px; cursor:pointer; font-size:14px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.CBContainer.RB {display:inline-block; padding-left:30px;}
/* Hide the browser's default checkbox */
.CBContainer input {position:absolute; opacity:0; cursor:pointer; height:0; width:0;}
/* Create a custom checkbox */
.CBContainer.CB .Checkmark {position:absolute; top:0; left:0; height:20px; width:20px; background-color:#FFFFFF; border:1px solid #585858;}
.CBContainer.RB .Checkmark {position:absolute; top:0; left:0; height:22px; width:22px; background-color:#FFFFFF; border:1px solid #585858; border-radius:50%;}
/* On mouse-over, add a grey background color */
.CBContainer:hover input ~ .Checkmark {background-color:#CCCCCC;}
/* When the checkbox is checked, add a blue background */
.CBContainer input:checked ~ .Checkmark {background-color:#2196F3;}
/* Create the checkmark/indicator (hidden when not checked) */
.CBContainer.CB .Checkmark:after, .CBContainer.RB .Checkmark:after {content:""; position:absolute; display:none;}
/* Show the checkmark when checked */
.CBContainer input:checked ~ .Checkmark:after {display:block;}
/* Style the checkmark/indicator */
.CBContainer.CB .Checkmark:after {left:7px; top:3px; width:5px; height:12px; border:solid white; border-width:0 3px 3px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.CBContainer.RB .Checkmark:after {left:6px; top:6px; width:8px; height:8px; border-radius:50%; background:#FFFFFF;}
.TD {} /* Not defined in original stylesheet */
.BOLItems {} /* Not defined in original stylesheet */
/* The other FormCol settings, as well as "Space" simply define the width and padding */

1 Ответ

0 голосов
/ 02 апреля 2020

Проблема здесь заключалась в дополнительном заключительном div. Это было закомментировано.

...