I am trying to build a simple webpage to display a map I built in an Observable notebook. I would like to use this website template. The problem I am running into is how to get the
viewof components to render properly, specifically the radio buttons:
The dropdown menu is just fine, but the radio buttons do not look anything like the radio buttons on the website template (which you can also see by navigating to the ‘Elements’ page in the menu at the website template):
This is my html code for the
chart and the
viewofs which I am basing on the source html of the ‘Elements’ page:
<div id="main"> <div class="inner"> <h1>BMI Classification Prevalence</h1> <div id="chart"></div> <section> <div class="row gtr-uniform"> <div class="col-4 col-12-small" id="zoomLevel"> </div> <div class="col-4 col-12-small" id="ageGroup"> </div> <div class="col-4 col-12-small" id="classification"> </div> <div class="col-4 col-12-small" id="colorScheme"> </div> </div> </section> </div> </div>
For what it is worth, the radio buttons still ‘work’: i.e., clicking
Child will switch the map being displayed.
Is what I am trying to do not possible with this template?