Mrk Fldig Mrk Fldig - 4 months ago 16
AngularJS Question

bootstrap.css and IE11 issues

I'm working on an AngularJS app using bootstrap.css. Everything looks great in chrome but I get formatting issues in both firefox and IE11.

HEAD

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Application</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">


<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-resource.js"></script>
<script src="js/dirPagination.js"></script>
<script src="app/myAppAccounts.js"></script>
<base href="/">
</head>


What it looks like:
enter image description here
Any tips on fixing this?

EDIT

As requested HTML for buttons. These are in a partial.

<div class="col-md-2">
<input ng-model="dateFrom" type="date" class="form-control">
</div>
<div class="col-md-2">
<input ng-model="dateTo" type="date" class="form-control">
</div>
<div class="col-md-1">
<button class="form-control" type="button" ng-click="searchByDate(dateFrom, dateTo)" > Search </button>
</div>
<div class="col-md-2"></div>
<div class="col-md-3" >
<input ng-model="orderID" class="form-control" type="text" placeholder="Search by order ID">

</div>
<div class="col-md-1">
<button class="form-control" type="button" ng-click="searchByID()"> Search </button>
</div>

Answer

I've mainly seen this occur when trying to use things within a col-md-1 div. The contents traditionally exceed the width of the container and as such the buttons are the correct size, but the text is not truncated, and the overflow is shown.

I have modified a little bit of your html to maybe work a little better:

Plnkr Here

enter image description here

<div class="col-md-12 ">
  <div class="col-md-6 text-left">
     <div class="col-md-4">
       <input ng-model="dateFrom" type="date" class="form-control"  placeholder="Start Date">  
     </div>
     <div class="col-md-4">
       <input ng-model="dateTo" type="date" class="form-control" placeholder="End Date">
     </div>
     <div class="col-md-4">
       <button class="form-control" type="button" ng-click="searchByDate(dateFrom, dateTo)" > Search </button>
     </div>
   </div>

   <div class="col-md-6 text-right">
     <div class="col-md-8" >
       <input ng-model="orderID" class="form-control" type="text" placeholder="Search by order ID">
     </div>
     <div class="col-md-4">
      <button class="form-control" type="button" ng-click="searchByID()"> Search </button>
     </div>
   </div>
</div>
Comments