Make custom form Tickbox List bullet disappear

Squiz Matrix Support
1

How would you make Tickbox lists in a custom form not display the list item bullet? having a list is fine, but each tickbox item having a bullet is annoying - I could probably do it with a custom design or bodycopy but is there a simpler way around this?


Thanks

2

[quote]How would you make Tickbox lists in a custom form not display the list item bullet? having a list is fine, but each tickbox item having a bullet is annoying - I could probably do it with a custom design or bodycopy but is there a simpler way around this?


Thanks[/quote]



This is all CSS. Since the tickbox list uses list item tags, you will need to control that using CSS in your document.

3

[quote]How would you make Tickbox lists in a custom form not display the list item bullet? having a list is fine, but each tickbox item having a bullet is annoying - I could probably do it with a custom design or bodycopy but is there a simpler way around this?


Thanks[/quote]



It's can be done by CSS, like

     ul.no-bullet li {
     list-style-type: none;
     }

Then apply this class "no-bullet" to the question's "Extras" option



Robin

4

Nic, yep I understand that.


Thanks Robin,

I had tried that but had no luck, I think I could be applying the class in the wrong place, or am missing something?



The html I end up with is:
  •  Associate


When I really want it to be
  •  Associate


Please let me know where I'm going wrong
5

I just always wrap the entire keyword in a div with an ID or class, so then I just do something like:

    #noWrap ul li {
    list-style-type: none;
    }
6

[quote]Nic, yep I understand that.


Thanks Robin,

I had tried that but had no luck, I think I could be applying the class in the wrong place, or am missing something?



The html I end up with is:
  •  Associate


When I really want it to be
  •  Associate


Please let me know where I'm going wrong[/quote]
The class is actually applied to each <li> tag, so the CSS needs to be updated like
    li.no-bullet {
     list-style-type: none;
     }

Hope it works.
7

[quote]I just always wrap the entire keyword in a div with an ID or class, so then I just do something like:

    #noWrap ul li {
    list-style-type: none;
    }
[/quote]

Worked great, thanks for that.


Robin, thanks for your help, I was trying similar things to that and they don't work because the class is applied to the input and not the list - asking around it doesn't seem to be at all possible to do. (I could do it with jquery though)
8

[quote]
Worked great, thanks for that.





Robin, thanks for your help, I was trying similar things to that and they don't work because the class is applied to the input and not the list - asking around it doesn't seem to be at all possible to do. (I could do it with jquery though)

[/quote]





why can't we just have access to the basic elements themselves and decide if we want to use a <li> or whatever?



it's madness to have to use jquery and even CSS to remove default markup from around basic form elements when you really just want to customise the bodycopy.



hmm time for another feature request…

9

[quote]
it's madness to have to use jquery and even CSS to remove default markup from around basic form elements when you really just want to customise the bodycopy.

[/quote]



I really don't think that having to use CSS to style elements, or remove a bullet is something to get frustrated over. Matrix leaves it that way so that you can style things on your own. Squiz gave the tickbox list the most accessible and valid structure (using a list), which, I think is the best way to display input elements like this. I would have done the same if I was hard coding it.

10

[quote]
I really don't think that having to use CSS to style elements, or remove a bullet is something to get frustrated over. Matrix leaves it that way so that you can style things on your own. Squiz gave the tickbox list the most accessible and valid structure (using a list), which, I think is the best way to display input elements like this. I would have done the same if I was hard coding it.

[/quote]



My frustration stems from the fact that each checkbox is put inside an <li></li> by default and you can't avoid it!

granted it makes sense when you don't want to use a custom body copy.



Basically it limits your ability to customise the layout of form controls I WANT MORE CONTROOOOOOOOL



Ok I'll quit me moanin now!

11

[quote]
Basically it limits your ability to customise the layout of form controls I WANT MORE CONTROOOOOOOOL

[/quote]



If you are comfortable with php, it is very easy to remove the printing of list item elements. You could even create a new asset attribute that could be used to wrap code around each item, using what ever container code you wanted to, or none at all. But, this sort of thing is out of the scope of this posting. :slight_smile: