Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-3708

splitlayout splitter uses inline style makes CSS customization harder

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 8.5.0
    • Fix Version/s: 8.5.0
    • Component/s: None
    • Security Level: Jimmy
    • Labels:
      None

      Description

      Steps to Reproduce

      1. create a splitlayout with the code below
        <div width="600px" height="200px" >
        	<splitlayout  vflex="1" hflex="1" >
        		<div class="area" vflex="1">
        			<label value="Area 1"  />
        		</div>
        		<div class="area" vflex="1">
        			<label value="Area 2 />
        		</div>
        	</splitlayout>
        </div>
        
      2. check splitter's css

      Current Result

      <div id="oEmX3-splitter" class="z-splitlayout-splitter z-splitlayout-splitter-vertical" style="display: block; cursor: s-resize; width: 600px;">...</div>
      

      it contains inline style like width:600px

      Expected Result

      css rules are specified in its zclass

      Debug Info

      • if users want to customize the splitter's width like the screenshot below, they have to use !important; which is usually not suggested and make application developers harder to customize its style.

        Attachments

          Activity

            People

            Assignee:
            DevChu DevChu
            Reporter:
            hawk hawk
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour
                1h