Search code examples
csssemantic-ui

Semantic-UI :: Downloadable font - bad linegap

*,

I get in my Firefox console the following error while loading the html page below (see snippet code). And in the other hand the Chrome's console says nothing... >_>

downloadable font: OS/2: bad linegap: -32 (font-family: "Dropdown" style:normal weight:normal stretch:normal src index:0)
source: data:application/x-font-ttf;charset=utf-8;base64,<<...>>
semantic.css:30715:12

But moreover the dropdown doesn't work (~doesn't display items) at all on both browsers.

Have you any idea why and how to fix it?

Thks

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css'>
    </head>
    
    <body>
        <div class="ui selection dropdown">
            <input name="gender" type="hidden">
            <i class="dropdown icon"></i>
            <div class="default text">Gender</div>
            <div class="menu">
                <div class="item" data-value="1">Male</div>
                <div class="item" data-value="0">Female</div>
            </div>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.js"></script>
    </body>
</html>

My issue is likely the same as that one: https://github.com/Semantic-Org/Semantic-UI/issues/2146

Solution

  • Even though your HTML is valid markup for the Dropdown module, you still need to initialise it with JavaScript.

    Read more: Dropdown - Initializing Existing HTML

    $('.ui.dropdown').dropdown();
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css'>
    </head>
    
    <body>
        <div class="ui selection dropdown">
            <input name="gender" type="hidden">
            <i class="dropdown icon"></i>
            <div class="default text">Gender</div>
            <div class="menu">
                <div class="item" data-value="1">Male</div>
                <div class="item" data-value="0">Female</div>
            </div>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.js"></script>
    </body>
</html>

    The 'Bad Linegap' error hasn't prevented the dropdown working for me.