- This topic has 2 replies, 2 voices, and was last updated Feb 21, 2019
07:43:16 by.
-
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 />
#30190PD4ML v4 implements the float positioning logic as expected: https://github.com/zxfr/pd4ml-examples/
The forum ‘HTML/CSS rendering issues’ is closed to new topics and replies.
