Why the component from ratchet is not rendering properly

Question

This is my Fiddle. I added CSS component from Segmented Control and added relevant libraries, but doesn't work as intended, like in the web site:

<div class="segmented-control">
... Control components...
</div>
<div class="card">
... control content
 </div>

Answer 1

You are going to need to check out the Getting Started page, and read through it.

The segments don't work in the jsFiddle because they only responde to "touch" events (like on a mobile device) and not "click" events (like on a PC).

From the GitHub - Ratchet documentation.

Ratchet is designed to respond to touch events from a mobile device. In order to use mouse click events (for desktop browsing and testing), you have a few options: Enable touch event emulation in Chrome (found in the overrides tab in the web inspector preferences) Use a JavaScript library like fingerblast.js to emulate touch events (ideally only loaded from desktop devices)

Also, some of the styles are missing for a few reasons.

• The component examples have extra styling that is not in the framework.
• Your jsFiddle is missing a <div class="content"> wrapper.
• This jsFiddle is closer, but still won't fully work because of the touch event issue from above, but at least it points you in the right direction.