CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
PK Kulhari
PK Kulhari

Reputation: 45

How make a responsive input field in navbar?

I have this navbar and an input field in the navbar. I want to set the width of input to all remaining width of the navbar. And It should be responsive. I mean to say that the input width should be changed when the device size changed. Please help me out.

li {
list-style: none;
}
.post-edit .nav-header {
    border: 1px solid #ddd;
    height: 40px;
}

.post-edit .nav-header ul li button {
    border: 1px solid #727272;
    background-color: #fff;
    color: #727272;
    font-size: 14px;
    padding: 3.5px 8px;
    border-radius: 3px;
    margin-top: 5.3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="container-fluid p-0">  
    <!-- Main Container -->
    <main class="container-wrapper">
    
      <div class="post-edit">
        <form action="" method="post">
          <div class="nav-header navbar navbar-expand-sm">
            <!-- Left -->
            <ul class="navbar-nav">
              <li class="nav-item">
                <input type="text" name="p-title" placeholder="Title">
              </li>
            </ul>

            <!-- Right -->
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <button class="nav-link">Preview</button>
              </li>
              <li class="nav-item">
                <button class="nav-link">Publish</button>
              </li>              
            </ul>
          </div>
      </div>
      </form>
  </div><!-- /.post-edit -->
  </main> <!-- /Main Container -->  
  </div>
</body>

Upvotes: 0

Views: 212

Answers (2)

Billions.A.Joel
Billions.A.Joel

Reputation: 235

I would advise that you upgrade to bootstrap 4 and above so you can get helper and utility classes to make your work easier.

here is how you can achieve it with bootstrap 4. you can just restyle it back to bootstrap 3 if you want or use legacy css3.

  • step 1: change the display of the wrapping container to flex-box
  • step 2: set all the child elements to flex grow 1, which tells the child element to stretch and take up the entire remaining space of the parent element.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
    </script>
    <style>
        body {
            padding: 4px;
            margin-top: 2rem;
        }

        li {
            list-style: none;
        }

        .post-edit .nav-header {
            border: 1px solid #ddd;
            height: 40px;
        }

        .post-edit .nav-header ul li button {
            border: 1px solid #727272;
            background-color: #fff;
            color: #727272;
            font-size: 14px;
            padding: 3.5px 8px;
            border-radius: 3px;
            margin-top: 5.3px;
        }
    </style>
</head>

<body>

    <div class="container-fluid p-0">
        <!-- Main Container -->
        <main class="container-wrapper">

            <div class="post-edit">
                <form action="" method="post">
                    <div class="nav-header navbar navbar-expand-sm d-flex">
                        <!-- Left -->
                        <ul class="navbar-nav bg-primary flex-grow-1">
                            <li class="nav-item flex-grow-1 mr-1 ">
                                <div class="bg-success d-flex flex-grow-1">
                                    <input type="text" name="p-title" placeholder="Title" class="flex-grow-1">
                                </div>
                            </li>
                        </ul>

                        <!-- Right -->
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item">
                                <button class="nav-link">Preview</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link">Publish</button>
                            </li>
                        </ul>
                    </div>
            </div>
            </form>
    </div><!-- /.post-edit -->
    </main> <!-- /Main Container -->
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
    </script>
</body>

</html>

Upvotes: 1

Ajeet Eppakayala
Ajeet Eppakayala

Reputation: 1415

You need to extend your input width. So, add this to css.

Formula: width = 100% - (nav margin) - (ul margin);

input {
 width: calc(100% - 15px - 1em); // 15px > nav-margin | 1em > ul margin
}

Check the snippet

li {
  list-style: none;
}

.post-edit .nav-header {
  border: 1px solid #ddd;
  height: 40px;
}

.post-edit .nav-header ul li button {
  border: 1px solid #727272;
  background-color: #fff;
  color: #727272;
  font-size: 14px;
  padding: 3.5px 8px;
  border-radius: 3px;
  margin-top: 5.3px;
}

input {
  width: calc(100% - 15px - 1em);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container-fluid p-0">
    <!-- Main Container -->
    <main class="container-wrapper">

      <div class="post-edit">
        <form action="" method="post">
          <div class="nav-header navbar navbar-expand-sm">
            <!-- Left -->
            <ul class="navbar-nav">
              <li class="nav-item">
                <input type="text" name="p-title" placeholder="Title">
              </li>
            </ul>

            <!-- Right -->
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <button class="nav-link">Preview</button>
              </li>
              <li class="nav-item">
                <button class="nav-link">Publish</button>
              </li>
            </ul>
          </div>
      </div>
      </form>
  </div>
  <!-- /.post-edit -->
  </main>
  <!-- /Main Container -->
  </div>
</body>

Upvotes: 0

Related Questions