PD4ML v4 Forums PD4ML v3 Archived Forums (Read Only) HTML/CSS rendering issues Floating elements are reordered

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #27208

    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.
    <br /> <html><br /> <head><br /> <style><br /> .fb-selectmanycheckbox {<br /> margin-top: 0px;<br /> }<br /> .fb-selectmanycheckbox .fb-checkbox {<br /> float:left;<br /> margin-left:-35px;<br /> }<br /> .fb-checkbox-box {<br /> border: 1px solid #bdc3c7;<br /> height: 20px;<br /> width: 20px;<br /> padding: 1px 0 0 5px;<br /> line-height: 1;<br /> }<br /> .fb-check {<br /> margin-right: 25px;<br /> padding-left: 35px;<br /> padding-bottom: 10px;<br /> }<br /> .fb-check-inline {<br /> float:left;<br /> }<br /> .fb-check-label {<br /> padding-right: 15px;<br /> }<br /> </style><br /> </head><br /> <br /> <body><br /> <div><br /> <div><br /> <div><br /> <div class="fb-selectmanycheckbox"><br /> <div class="fb-check fb-check-inline"><br /> <div class="fb-checkbox"><br /> <div class="fb-checkbox-box"></div><br /> </div><br /> <span class="fb-check-label">one</span><br /> </div><br /> <div class="fb-check fb-check-inline"><br /> <div class="fb-checkbox"><br /> <div class="fb-checkbox-box"></div><br /> </div><br /> <span class="fb-check-label">two</span><br /> </div><br /> <div class="fb-check fb-check-inline"><br /> <div class="fb-checkbox"><br /> <div class="fb-checkbox-box"></div><br /> </div><br /> <span class="fb-check-label">three, (longer label, will be moved by pd4ml to the end of the option list)</span><br /> </div><br /> <div class="fb-check fb-check-inline"><br /> <div class="fb-checkbox"><br /> <div class="fb-checkbox-box"></div><br /> </div><br /> <span class="fb-check-label">four</span><br /> </div><br /> <div class="fb-check fb-check-inline"><br /> <div class="fb-checkbox"><br /> <div class="fb-checkbox-box"></div><br /> </div><br /> <span class="fb-check-label">five</span><br /> </div><br /> </div><br /> </div><br /> </div><br /> </div><br /> </body><br /> </html><br />

    #30190

    PD4ML v4 implements the float positioning logic as expected: https://github.com/zxfr/pd4ml-examples/

    #30189

    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?

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘HTML/CSS rendering issues’ is closed to new topics and replies.