CODEWITHSUNDEEP
htmlcssfirefox
Varun
Varun

Reputation: 3735

HTML code not working in Firefox correctly

I'm trying to display the following code. It's working fine in Chrome and Safari, but not working properly in Firefox. The code link: http://jsfiddle.net/nvarun123/fv4jxo4t/26/

Html code:

<div> 
    <a>
        <button (click)="decrement()" class="btn btn-primary" style="float: left;">
            <span><i class="glyphicon glyphicon-minus" ></i></span>
        </button>
    </a>
    <input type="text" style="width:45%;" [(ngModel)]="count">
   <a>
       <button (click)="increment()" class="btn btn-primary" style="float: right;">
           <span><i class="glyphicon glyphicon-plus" ></i></span>
       </button>
    </a>
</div>

CSS code:

div {
    position:relative;
    border: 1px solid #CACEDB;
    width: 162px;
    height:38px;
    overflow: hidden;
    white-space: nowrap;
    border-radius:3px;
}

input {
    text-align: center;
    height:100%;
    width:100%;
    border:none;
}

input:focus {
    outline: none;
}

button {
    height:100%; 
    border:none;    
}

button:hover {
    background-color: green;
}

button:active {
    background-color: #015191;
}

Upvotes: 2

Views: 171

Answers (3)

S.Skns
S.Skns

Reputation: 31

You can try to style the input tag to set the value at the center by using text-align: center; this worked for me with your code.

div {
   position:relative;
   width: 160px;
   height:38px;
   overflow: hidden;
   white-space: nowrap;
   border-radius:5px;
}
input{
   text-align: center;
}
input:focus {outline:none;}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>

  <body>
    <div> 
        <a>
        <button type="button" (click)="decrement()" class="btn btn-primary" style="height:100%; border:none;">
        <span class="glyphicon glyphicon-minus"></span>
        </button>
        </a>
        <input type="text" style="width:45%;border:none;">
       <a>
        <button type="button" (click)="increment()" class="btn btn-primary" style="height:100%;float: right; ">
        <span class="glyphicon glyphicon-plus"></span>
        </button>
        </a>
    </div>
  </body>

</html>

Upvotes: 0

Jung Young-min
Jung Young-min

Reputation: 111

div {
  position: relative;
  border: 1px solid #CACEDB;
  width: 500px;
  height: 500px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 5px;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
  
  <div>
    <a>
      <button type="button" (click)="decrement()" class="btn btn-primary" style="width:50px;height:50px;">
        <span class="glyphicon glyphicon-minus"></span>
      </button>
    </a>
    <span style="width:100%">1</span>
    <a>
      <button type="button" (click)="increment()" class="btn btn-primary" style="width:50px;height:50px;">
        <span class="glyphicon glyphicon-plus"></span>
      </button>
    </a>
  </div>
  
</body>
</html>

check out the snippet Is this the way you want it?

Upvotes: 1

Pato Salazar
Pato Salazar

Reputation: 1477

Here a trick to vertically center content in an html element.

Vertical aligns are always tricky with CSS, but this snippet will allow you to do it easily for a single line of text. Basically we use the line-height property to put an equidistant space at the top and bottom of the text. To make this work, the line height value needs to be the same as the height of the html element containing the text.

Check this 

p {
  border: red dotted thin;
  height: 100px;
  text-align: center;
  background: black;
  color: white;
  /* magic line */
  line-height: 100px;
}
<p>
  One Liner
</p>

Upvotes: 2

Related Questions