当文本长度大于字段宽度时,字段中的文本将消失

时间:2017-10-06 15:49:20

标签: html css svg input

消失的文字

问题:当长度太长时,我的某个字段中的文字会消失。

2个文本字段,1个文本长于字段宽度,文本字段较短,文本较短。顶部字段在较长文本时表现正确,底部不表现。

text field with short text

下部文本字段现在添加了2个额外字符,以便将文本的长度推过字段宽度(但看起来不像)。所有的文字都消失了。

enter image description here

只有在底部字段中看到此问题时,输入较长文本时页面上的所有其他字段才能正常工作。

可能很重要:这些字段位于SVG

行为正常的字段。

enter image description here

<g transform="translate(0,5)rotate(0)skewX(0)scale(1,1)" data-fieldid="a66cbb44-4c62-5036-9af7-d42d2d54ea1a" data-fieldname="Customer Contact" class="field" id="field-4d0c86b9-ba1a-6887-33d6-4831b91675b4" data-name="customerContact" data-columnname="customerContact" data-altcolumnname="customerContact" data-cssclass="k-textbox" data-datarole="" data-editable="true" data-fieldgroup="Header" data-label="Customer Contact" data-placeholder="" data-size="128" data-sort="1" data-style="" data-type="text" data-value="" data-jsonobject="" data-validationsize="0" data-businesslogic="[]" percentage="0.0014492753623188406" percentagewidth="0.7101449275362319"><path d="M0 0 L 245 0 245 50 0 50Z" stroke="#808080" stroke-width="0" fill="transparent"></path><text style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: sans-serif; display: none;" x="0" y="14" stroke="none" transform="matrix(1,0,0,1,62.5,17)" fill="#2e2e2e">Customer Contact</text><foreignObject x="0" y="0" width="211.0434782608696" height="50" style="position: relative;"><div style="position: static;"><div xmlns="http://www.w3.org/1999/xhtml" class="fieldLabel" style="white-space: nowrap; display: inline-block; font-size: 14px;">Customer Contact </div><br><span class="inputWrapper" data-inputtype="text" style="width: 211.043px;">
    <input name="customerContact" maxlength="128" type="text" class="svgInput k-textbox" data-bind="value: formData.customerContact, disabled: isEventDisabled">
</span><span class="k-invalid-msg" data-for="customerContact"></span></div></foreignObject></g>

文字消失的字段。

enter image description here

<g transform="translate(0,65)rotate(0)skewX(0)scale(1,1)" data-fieldid="674ec495-c094-543a-a2e5-eb8582d4be82" data-fieldname="SalesOrderNotes" class="field" id="field-74a59816-f070-46d3-5239-c2033be30de7" data-name="salesOrderNotes" data-columnname="salesOrderNotes" data-altcolumnname="salesOrderNotes" data-cssclass="k-textbox" data-datarole="" data-editable="true" data-fieldgroup="Header" data-label="SalesOrderNotes" data-placeholder="" data-size="2000" data-sort="1" data-style="{&quot;style&quot;:{&quot;color&quot;:&quot;#000000&quot;},&quot;options&quot;:{&quot;fieldType&quot;:&quot;no&quot;}}" data-type="text" data-value="" data-jsonobject="" data-validationsize="0" data-businesslogic="[]" percentage="0.0014492753623188406" percentagewidth="1"><path d="M0 0 L 345 0 345 45 0 45Z" stroke="#808080" stroke-width="0" fill="transparent"></path><text style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: sans-serif; display: none;" x="0" y="14" stroke="none" transform="matrix(1,0,0,1,115.5,14.5)" fill="#2e2e2e">SalesOrderNotes</text><foreignObject x="0" y="0" width="298" height="45" style="position: relative;"><div style="position: static;"><div xmlns="http://www.w3.org/1999/xhtml" class="fieldLabel" style="white-space: nowrap; display: inline-block; font-size: 14px;">SalesOrderNotes </div><br><span class="inputWrapper" data-inputtype="text" style="width: 298px;">
    <input name="salesOrderNotes" maxlength="2000" type="text" class="svgInput k-textbox" data-bind="value: formData.salesOrderNotes, disabled: isEventDisabled">
</span><span class="k-invalid-msg" data-for="salesOrderNotes"></span></div></foreignObject></g>

据我所知,它们在CSS和HTML标记中匹配。任何其他屏幕截图或信息的请求,我都可以发布更多信息。

编辑:

我注意到字段中的文字不符合g元素设置的翻译时间过长。

翻译成5。

enter image description here

向下翻译15.文字不在此处。

enter image description here

因此,当应用65的原始翻译时,没有文字可见。

0 个答案:

没有答案