Radio button problems

Questions
1

I’m using F7 5.7.x and when I display the following page there’s two issues:

  1. The checkmark is displayed to the right of the text and not the left as “item-radio-icon-start” instructs
  2. There is no empty circle at the beginning of each line (or anywhere else). How do I fix these two issues?
<div class="page" data-name="test">
  <div class="page-content">
    <div class="block-title">Test Page</div>
    <div class="list">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Books" checked />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Books</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Movies" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Movies</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Food" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Food</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Drinks" />
            <i class="icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Drinks</div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>  <!-- end of content area -->
</div>  <!-- end of page -->
2

I have a similar problem displaying radios and checkbox.
I added this to index.html font-src ‘self’ data:; to the CSP.
This is my complete CSP.

<meta http-equiv="Content-Security-Policy" content="default-src *;
                                                        font-src 'self' data:;
                                                        style-src 'self' 'unsafe-inline'; 
                                                        script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Hope this helps.

3

Thanks for that Fernando but that wasn’t the issue. My CSP is already pretty defined and looks like this:

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self' 'unsafe-inline' 'unsafe-eval' 
      filesystem: gap: https://*.appdomain.com; 
      style-src 'self' 'unsafe-inline'; 
      font-src 'self' data: https://*.appdomain.com; 
      script-src 'self' 'unsafe-eval' 'unsafe-inline'; 
      img-src 'self' data: https://*.appdomain.com; 
      connect-src 'self' https://*.appdomain.com ws://localhost:*; 
      media-src 'self';">
4

WOW thats a big CSP.
Sorry i can’t help with your problem.

5

Make sure you have really latest F7 files (including JS and CSS)

iOS theme doesn’t have “empty circle” on radios

6

Is there a way to override the ios theme? This is a very specific use case.

7

Yes, just inspect elements/styles you want to change and change it in your custom CSS