Styling Checklists

Anonymous

#64276

Thanks for the plugin. I recently purchased the PRO version and it’s very helpful. I’m having issues, however, styling my checkbox list on my website; specifically, lining the icons horizontally and removing the padding around the wrapper. Below is a link to a live example:

http://www.furthereast.com/uncategorized/sf-test/

I have checked the forums and the links you’ve previously directed people to, but they only partially help. Ideally, I want to “reset” the styling so that I can fiddle around with it myself but it’s very difficult to work out from the source code what changes what. The further I got is the following, which put the icons inline but I cannot seem to change the margin/padding. Could you kindly point me to relevant CSS selectors, in particular the ones that put the margin/padding around the checkbox wrapper.

.searchandfilter[data-sf-form-id="128"] > ul > li {
display:inline-block !important;
padding: 0px;
}

.searchandfilter[data-sf-form-id="128"] li.sf-field-post-meta-amenities {
    padding: 0px;
    margin: 0px;
    color: red;
}

.searchandfilter[data-sf-form-id="128"] li.sf-level-0{
    float: left;
}

.searchandfilter[data-sf-form-id="128"] .sf-field-submit {
	display:inline-block !important;
    padding: 0px;
    margin: 0px;
}

Trevor

#64475

OK, the left margin is removed with this:

.searchandfilter > ul {margin-left: 0 !important;}

To make them ‘inline’ and add some margin between them, this:

.searchandfilter ul li li {
  display: inline-block;
  margin-right: 20px;
}
.searchandfilter ul li li:last-child {
  margin-right: 0;
}

Is that what you wanted?

Anonymous

#65662

Yes, that’s what I was looking for. Thank you very much for the prompt response.

Trevor

#65666

Is this thread resolved and can I close it?

Anonymous

#65670

Yes, thanks for the help.

[Author]

Posts