Custom Field Template
How to make the checkbox list display horizontally? (6 posts)

  1. TC.K
    Posted 4 years ago #

    I wonder is there any way to make the checkbox list display horizontally ?

    I had look into the manual, but I could not understand how is "Adds the break type. Set CSS of '#cft div'. (type = break)" work.

    Any advised will be appreciated.


  2. TC.K
    Posted 4 years ago #

    no reply??

  3. Zeb
    Posted 4 years ago #

    If you try it in the Admin CSS of the plugins page, one of the last lines say "checkbox".
    If you just add {float:left} you will nearly get it.
    Unfortunately, when I tried it, text and titles overlapped. If you make it work, please let me know.

  4. TC.K
    Posted 4 years ago #


    yes, I also had this situation.
    Still not able to get the right solution..they are using html tag td dl dr and dd tags instead of ul or li. Thus, I think it is hard to make it right since it is using table form, not the list style.

    Any other advise?

  5. melbouy
    Posted 4 years ago #

    Hi there,

    Try play with min-width.

    i.e: #cft .dl_checkbox { margin:0; float: left; min-width: 250px;}

    Hope that helps

  6. difreo
    Posted 4 years ago #

    Try this

    #cft .dl_checkbox { margin:0; float:left; width:auto;}
    #cft dl:after { content:" "; clear:both; height:0; display:block; visibility:hidden; }
    #cft dt { width:30%; clear:both; float:left; display:inline; font-weight:bold; text-align:right; }
    #cft dt .hideKey { visibility:hidden; }
    #cft dd { margin:0 0 0 31%; }
    #cft dd p.label { font-weight:bold; margin:0; }
    #cft_instruction { margin:10px; }
    #cft fieldset { border:1px solid #CCC; margin:5px; padding:5px; }
    #cft .mceStatusbar { padding-bottom:22px; }
    #cft .dl_checkbox dt {clear:both; width:150px; margin-right:5px;}
    #cft .dl_checkbox dd { clear:none; margin:auto; width:200px; white-space:nowrap;}
    #cft>div { margin:0 0 20px 0; padding:20px 0; border-top:1px dotted #ccc; border-bottom:1px dotted #ccc; background-color:#F9F9F9; float:left; width:100%;}

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Custom Field Template
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic