CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user7474176
user7474176

Reputation:

Prevention of bootstrap inputs from moving to the left on small screens

I am working with bootstrap. I got a problem. I am using the following classes: form-control and form-inlinel. And here is my html:

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
    <div class="center">
    <div class="label label-primary">First interval</div>
    <div class="form-inline">
        <input type="text" class="form-control" placeholder="From" id="from1">

        <input type="text" class="form-control" placeholder="To" id="to1">
    </div>
    <div class="label label-primary">Second interval</div>
    <div class="form-inline">
        <input type="text" class="form-control" placeholder="From" id="from2">

        <input type="text" class="form-control" placeholder="To" id="to2">
    </div>

    <button type="button" class="btn btn-success" id="button">Show intersection</button>

    <div class="label label-primary moveDown">
        Intersection:
    </div>
    </div>
    <div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
</div>
</body>
</html>

Here is css: 

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
    max-width: 100px;
    margin:0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.container-fluid
{
    padding: 20px;
    text-align: center !important;
}
.label
{
    font-size: 15px !important;
    margin-bottom: 10px !important;
}

.center
{
    width: 200px;
    margin: 0 auto;
}

.moveDown
{
    margin-top: 5px !important;
    display: block !important;
}

.label.moveDown
{
    display: inline-block !important;
}

And now about the problem. If you start the html on medium screen it is exactly okay and exactly what I want. However, try to resize and you will notice the problem. It is input the thing that is not satisfies me, it moves to left on small enough screen. If you know how I can tackle that help me, please.

Upvotes: 1

Views: 364

Answers (3)

Hewlett
Hewlett

Reputation: 161

There are two ways you can make it stays centred.

  1. In the element input[type="text"], add the value auto in margin and it will stay centred.
  2. Or you can add the property display: inline-block; in input[type="text"].

It works both ways.

EDIT: The reason that it doesn't stay centred when reduced to mobile size is because Bootstrap has set the element input as block; pushing it to the left side.

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
  max-width: 100px;
  margin: 5px auto;
}

.container-fluid {
  padding: 20px;
  text-align: center !important;
}

.label {
  font-size: 15px !important;
  margin-bottom: 10px !important;
}

.center {
  width: 200px;
  margin: 0 auto;
}

.moveDown {
  margin-top: 5px !important;
  display: block !important;
}

.label.moveDown {
  display: inline-block !important;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/main.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
    <div class="center">
      <div class="label label-primary">First interval</div>
      <div class="form-inline">
        <input type="text" class="form-control" placeholder="From" id="from1">

        <input type="text" class="form-control" placeholder="To" id="to1">
      </div>
      <div class="label label-primary">Second interval</div>
      <div class="form-inline">
        <input type="text" class="form-control" placeholder="From" id="from2">

        <input type="text" class="form-control" placeholder="To" id="to2">
      </div>

      <button type="button" class="btn btn-success" id="button">Show intersection</button>

      <div class="label label-primary moveDown">
        Intersection:
      </div>
    </div>
    <div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
  </div>
</body>

</html>

Upvotes: 0

Barney Vaughan
Barney Vaughan

Reputation: 25

If you change this part of your CSS to read:

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
   max-width: 100px;
   margin:0 auto;
   margin-top: 5px;
   margin-bottom: 5px;
}

The Margin: 0 Auto; attribute force center the inputs for you!

It could even be shortened to:

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
   max-width: 100px;
   margin:5px auto;

}

To take into account the 5px margin you've added.

Hope this helps!

Upvotes: 1

maxshuty
maxshuty

Reputation: 10710

Here is a fiddle

I removed the form-inline and changed it to it's own custom class (I just called it inputs for the sake of this example). Then I added simply added this CSS:

.inputs {
padding-left: 3.5em;
}

You can slide the fiddle back and forth now and see that it stays in the center.

Upvotes: 0

Related Questions