PDF Generating Tool Support Forum

HOME   Login   Register    Search




  Subject: Floating elements are reordered
   PostPosted: 07 Jan 2019, 09:28 
We are using floating for showing several options. If one option is to long and causes a break, following short options are moved in front of the long options.
But we need to keep the order.
Code:
<html>
  <head>
    <style>
        .fb-selectmanycheckbox {
           margin-top: 0px;
        }
        .fb-selectmanycheckbox .fb-checkbox {
            float:left;
            margin-left:-35px;
        }
        .fb-checkbox-box {
            border: 1px solid #bdc3c7;
            height: 20px;
            width: 20px;
            padding: 1px 0 0 5px;
            line-height: 1;
        }
        .fb-check {
            margin-right: 25px;
            padding-left: 35px;
            padding-bottom: 10px;
        }
        .fb-check-inline {
            float:left;
        }
        .fb-check-label {
            padding-right: 15px;
        }   
    </style>
  </head>
 
  <body>
    <div>
      <div>
        <div>
          <div class="fb-selectmanycheckbox">
            <div class="fb-check fb-check-inline">
              <div class="fb-checkbox">
                <div class="fb-checkbox-box"></div>
              </div>
              <span class="fb-check-label">one</span>
            </div>
            <div class="fb-check fb-check-inline">
              <div class="fb-checkbox">
                <div class="fb-checkbox-box"></div>
              </div>
              <span class="fb-check-label">two</span>
            </div>
            <div class="fb-check fb-check-inline">
              <div class="fb-checkbox">
                <div class="fb-checkbox-box"></div>
              </div>
              <span class="fb-check-label">three, (longer label, will be moved by pd4ml to the end of the option list)</span>
            </div>
            <div class="fb-check fb-check-inline">
              <div class="fb-checkbox">
                <div class="fb-checkbox-box"></div>
              </div>
              <span class="fb-check-label">four</span>
            </div>
            <div class="fb-check fb-check-inline">
              <div class="fb-checkbox">
                <div class="fb-checkbox-box"></div>
              </div>
              <span class="fb-check-label">five</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>


Image


  Subject: Re: Floating elements are reordered
   PostPosted: 30 Jan 2019, 14:16 
PD4ML v4 implements the float positioning logic as expected: https://github.com/zxfr/pd4ml-examples/


  Subject: Re: Floating elements are reordered
   PostPosted: 21 Feb 2019, 09:43 
That's great. The ordering is correct now.
Unfortunately, soft hypen (shy) are always rendered, not only on line breaks.
Is there an overview of supported feature for the 4.0 release?



[Reply]     [ 3 posts ] 

Copyright ©2004-10 zefer|org. All rights reserved. Bookmark and Share