CODEWITHSUNDEEP
csstwitter-bootstrap
stellarossa
stellarossa

Reputation: 1800

Why is the close button (X) not rendering correctly in my modal?

This is what I'm getting:

enter image description here

I'd like the close button in the top right corner to be an X, which I believe it should be by default anyway. Keep in mind the modal works perfectly, and when I click on the close button (A~-) it works as intended. I've tried running it on IE, Chrome and Firefox, and in all the cases the problem persists.

Any ideas?

<div id="group" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="groupLabel"
     aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="groupLabel">Add group</h3>
    </div>
    <div ng-controller="Ctrl">
        <form ng-submit="addGroup(newGroup, newColor); newGroup='';">
            <div class="modal-body">
                <div class="row-fluid">
                    <div class="span3 offset3">
                        Group name
                    </div>
                    <div class="span6">
                        <input class="input-block-level" type="text" ng-model="newGroup">
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span3 offset3">
                        Group color
                    </div>
                    <div class="span6">
                        <select ng-model="newColor" class="input-block-level">
                            <option value="">None</option>
                            <option value="red">Red</option>
                            <option value="blue">Blue</option>
                            <option value="green">Green</option>
                            <option value="orange">Orange</option>
                            <option value="cyan">Cyan</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <input class="btn btn-primary" type="submit" value="Save changes">
            </div>
        </form>
    </div>
</div>

This is the line of interest:

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

These are my includes:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap.js"></script>
<script type="text/javascript" src="js/angular-ui-if.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.css">

Upvotes: 4

Views: 5262

Answers (3)

Ennui
Ennui

Reputation: 10190

The x you are using is not a real x, it's some other unicode character. The simple solution is to replace it with a correctly encoded x (hint: use your keyboard).

It may also be due to a missing icon font in which that special × character is a close button icon, which means you'd need to double check and ensure you're including the font dependency in your CSS. Or perhaps the default Bootstrap font for that element is one in which it renders as an × and not that A character you see, and you changed the font after the fact.

Upvotes: 1

Arthur Halma
Arthur Halma

Reputation: 4001

Because your button text isn't "x". This can be seen even on this page, just press [ctrl]+[f] fill the search fild with "x" and press few times [f3]. Will be found all "x" on the page except your.

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 77966

This is the x in your code:

× U+00D7 MULTIPLICATION SIGN

When it should be

x U+0058 LATIN CAPITAL LETTER X.

Use the one on the keyboard.

Upvotes: 4

Related Questions