Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-71638

CodeMirror breaks CSS if used inside jelly repeatable object.

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Major Major
    • core
    • Jenkins 2.414
      Jenkins 2.401.2 LTS

      When CodeMirror is used for textarea inside repeatable objects it breaks CSS/HTML of field.
      Here is my Repeatable object's jelly:

      <?xml version="1.0" encoding="UTF-8"?>
      <?jelly escape-by-default='true'?>
      <j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form">
          <f:entry title="${%ConfigName}" field="name">
              <f:textbox/>
          </f:entry>
          <f:entry title="${%YamlConfig}" field="yamlConfig">
              <f:textarea codemirror-mode="yaml" codemirror-config="mode: 'text/x-yaml', lineNumbers: true"/>
          </f:entry>
          <f:entry title="${%Category}" field="category">
              <f:textbox/>
          </f:entry>
      </j:jelly> 

      And here is global jelly that includes repeatable objects:

      <?xml version="1.0" encoding="UTF-8"?>
      <?jelly escape-by-default='true'?>
      <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:f="/lib/form">
          <f:section title="${%section.title}">
              <f:repeatable field="configs" header="${%field.header}" minimum="0" add="${%field.add}">
                  <table width="100%">
                      <st:include page="config.jelly" class="io.jenkins.plugins.globalyamlproperties.Config"/>
                      <f:entry title="">
                          <div align="right"><f:repeatableDeleteButton/></div>
                      </f:entry>
                  </table>
              </f:repeatable>
          </f:section>
      </j:jelly>
       

      I this case CSS or HTML breaks (please look at the attached screenshots). I tried to scale browser and see what will change.
      Seems like separate grey boxes has been created for line number and actual text on line. Boxes with text has been moved too much right and also overlapped by textarea.
      I expected normal input field like here:

      If you need any additional information I will gladly provide it.

        1. 1.png
          1.png
          35 kB
        2. 2.png
          2.png
          40 kB
        3. 3.png
          3.png
          32 kB
        4. console.png
          console.png
          96 kB
        5. NormalFieldExample.png
          NormalFieldExample.png
          18 kB

            Unassigned Unassigned
            vladislav_kovalov Vladislav
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated: