Demo for flipswitch should discuss custom CSS

[cfjedimaster]

If you visit the flipswitch demo here, http://demos.jquerymobile.com/1.4.5/flipswitch, you'll see this code used for custom labels:

<form>
    <label for="flip-checkbox-3">Flip toggle switch checkbox:</label>
    <input type="checkbox" data-role="flipswitch" name="flip-checkbox-3" id="flip-checkbox-3" data-on-text="Assured" data-off-text="Uncertain" data-wrapper-class="custom-size-flipswitch">
</form>

However, what isn't made clear is that you are supposed to specify CSS to make the labels fit. This is documented over on the API docs area, but it is entirely possible a person will just use the demo code and assume it will work.

[jaspermdegroot]

@cfjedimaster

When you click the "view source" button of that demo, the popup contains a HTML and CSS section. That's how we do it for all demos where custom CSS is used. The same goes for when a demo uses custom JS.
In my opinion the bright pink CSS section header is hard to miss already, but I am looking into using tabs instead of collapsibles to have all sections next to each other at the top.
The title of that flipswitch demo already mentions "custom", but of course it's a small effort to add an intro paragraph that says that custom CSS is used.
I am going to close this ticket, because we already have ticket #8245 for things we need to do with the demos. I will add a bulletpoint for the intro paragraphs there.
Thanks for bringing it to our attention.

[cfjedimaster]

My god - I never realized it was sectioned like that. I completely missed it.