search

jasny / bootstrap

The missing components for your favorite front-end framework.
https://www.jasny.net/bootstrap/
Apache License 2.0
2.68k stars 498 forks source link

Extend does not work with latest original Twitter bootstrap for File Upload #166

Closed Li-Yanzhi closed 10 years ago

Li-Yanzhi commented 10 years ago

When I use latest original Twitter bootstrap (3.0.0) and jasny bootstrap extend for File Upload control, the control will not display correctly.

HTML code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <!--jquery-->
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <link href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <!--Bootstrap-->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <!--jasny Bootstrap Extend-->
    <link href="/Content/jasny-bootstrap.min.css" rel="stylesheet" />
    <script src="/Scripts/jasny-bootstrap.min.js" type="text/javascript"></script>

</head>
<body>
    <div class="fileinput fileinput-new" data-provides="fileinput">
        <div class="input-group">
            <div class="form-control uneditable-input span3" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
            <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file"></span>
            <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
        </div>
    </div>

</body>
</html>

ducman commented 10 years ago

Try the below fix: (also remove the "span3" class in the markup)

.fileinput .btn-file,
.fileinput.fileinput-exists .btn {
    display: table-cell;
}
ducman commented 10 years ago

The above fix cause the remove button in ie8 to look weird. I decided to change the markup up a bit to fit in with bootstrap v3. You can see it here: http://jsfiddle.net/639Fm/

Note: I had to use a div for the select/change button since a button doesn't work in ie8.

ghost commented 10 years ago

ducman -- this fix works perfectly

jasny commented 10 years ago

Does this problem still exist?

ghost commented 10 years ago

the problem does not exist any more -- it works now without the fix -- awesome