CSS - 十分な文字が入力されたときに検索バーの問題が拡大する

Question

拡張検索バーを作成していますが、十分な文字がテキスト入力に入力されたときに検索ボタンの下に移動するという問題があります。

$('.search-submit').click(function (e) { 
 
     e.preventDefault(); 
 

 
     var searchbox = $('.search-box'); 
 

 
     if(searchbox.hasClass('expanded-search-box')) 
 
     { 
 
      // close the form 
 
      searchbox.removeClass('expanded-search-box'); 
 
     } 
 

 
     else { 
 
      // open the form 
 
      searchbox.addClass('expanded-search-box'); 
 
     } 
 

 
    });

 .form-container{ 
 
      width: 600px; 
 
      margin: 0 auto; 
 
      border: 1px solid #000; 
 
      padding: 33px 14px; 
 
     } 
 

 
     .form-container:after{ 
 
      content: ''; 
 
      display: block; 
 
      clear: both; 
 
     } 
 

 
     form{ 
 
      position: relative; 
 
      float: right; 
 
     } 
 

 
     .search-box{ 
 
      top: 0; 
 
      right: 0; 
 
      width: 90px; 
 
      transition: width 0.3s ease-out; 
 
      padding: 10px 0px; 
 
      padding-left: 10px; 
 
      outline: none; 
 
     } 
 

 
     .search-submit{ 
 
      position: absolute; 
 
      width: 110px; 
 
      top: 0; 
 
      right: 0; 
 
      padding: 10px 0px; 
 
     } 
 

 
     .expanded-search-box{ 
 
      width: 500px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-container"> 
 
    <form action="" class="form"> 
 
     <input type="text" name="search" class="search-box" placeholder="Search..."> 
 
     <input type="submit" class="search-submit"> 
 
    </form> 
 
</div>

私はボタンがクリックされたときに検索バーを表示したいです。

入力テキスト要素にpadding-rightを追加しようとしましたが、表示されます。

この問題を解決するにはどうすればよいですか？

Answer 1

$('.search-submit').click(function (e) { 
 
     e.preventDefault(); 
 

 
     var searchbox = $('.search-box'); 
 

 
     if(searchbox.hasClass('expanded-search-box')) 
 
     { 
 
      // close the form 
 
      searchbox.removeClass('expanded-search-box'); 
 
     } 
 

 
     else { 
 
      // open the form 
 
      searchbox.addClass('expanded-search-box'); 
 
     } 
 

 
    });

 .form-container{ 
 
      width: 600px; 
 
      margin: 0 auto; 
 
      border: 1px solid #000; 
 
      padding: 33px 14px; 
 
     } 
 

 
     .form-container:after{ 
 
      content: ''; 
 
      display: block; 
 
      clear: both; 
 
     } 
 

 
     form{ 
 
      position: relative; 
 
      float: right; 
 
     } 
 

 
     .search-box{ 
 
      top: 0; 
 
      margin: 0; 
 
      width: 0; 
 
      transition: width 0.3s ease-out; 
 
      padding: 10px 0; 
 
      padding-left: 10px; 
 
      outline: none; 
 
     } 
 

 
     .search-submit{ 
 
      position: absolute; 
 
      width: 110px; 
 
      top: 0; 
 
      right: 0; 
 
      padding: 10px 0px; 
 
     } 
 

 
     .expanded-search-box{ 
 
      width: 470px; 
 
      padding: 10px 10px; 
 
      margin-right: 110px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-container"> 
 
    <form action="" class="form"> 
 
     <input type="text" name="search" class="search-box" placeholder="Search..."> 
 
     <input type="submit" class="search-submit"> 
 
    </form> 
 
</div>

Answer 2

検索テキスト入力にmaxlength="20"を追加

Answer 3

$('.search-submit').click(function (e) { 
 
     e.preventDefault(); 
 

 
     var searchbox = $('.search-box'); 
 

 
     if(searchbox.hasClass('expanded-search-box')) 
 
     { 
 
      // close the form 
 
      searchbox.removeClass('expanded-search-box'); 
 
         searchbox.removeClass('padding'); 
 
      searchbox.addClass('search-width'); 
 

 

 
     } 
 

 
     else { 
 
      // open the form 
 
      searchbox.addClass('expanded-search-box '); 
 
      searchbox.addClass('padding'); 
 
      searchbox.addClass('search-width'); 
 
     } 
 

 
    });

.form-container{ 
 
       width: 600px; 
 
       margin: 0 auto; 
 
       border: 1px solid #000; 
 
       padding: 33px 14px; 
 
      } 
 
    .search-width{ 
 
     \t width: 0px; 
 
     } 
 
      .form-container:after{ 
 
       content: ''; 
 
       display: block; 
 
       clear: both; 
 
      } 
 

 
      form{ 
 
       position: relative; 
 
       float: right; 
 
      } 
 

 
      .search-box{ 
 
       top: 0; 
 
       right: 0; 
 
       width: 70px; 
 
       transition: width 0.3s ease-out; 
 
       padding: 10px 0px; 
 
       padding-left: 10px; 
 
       outline: none; 
 
       
 
      } 
 
      .padding{ 
 
      \t padding-right: 85px; 
 
      } 
 

 
      .search-submit{ 
 
       position: absolute; 
 
       width: 85px; 
 
       top: 0; 
 
       right: 0; 
 
       padding: 10px 0px; 
 
      } 
 

 
      .expanded-search-box{ 
 
       width: 500px; 
 
      }

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
    </head> 
 
    <body> 
 
    <div class="form-container"> 
 
     <form action="" class="form"> 
 
      <input type="text" name="search" class="search-box" placeholder="Search..."> 
 
      <input type="submit" class="search-submit"> 
 
     </form> 
 
    </div> 
 

 
    </body> 
 
    </html>

Use this code 

Answer 4

あなたはパディング右のみ追加することができますが展開されます。

.expanded-search-box { 
    width: 350px; 
    padding-right: 150px; 
} 

別の解決策は、入力の重複送信ボタンを持っていないことであろう。

/* Reset the box-sizing */ 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*::before, 
 
*::after { 
 
    box-sizing: inherit; 
 
} 
 

 
/* Search group */ 
 

 
.search-group { 
 
    width: 100%; 
 
    max-width: 200px; 
 
    overflow: hidden; 
 
    margin-bottom: 1em; 
 
} 
 

 
.search-group--expanded { 
 
    max-width: 500px; 
 
} 
 

 
/* Search input */ 
 

 
.search-input { 
 
    float: left; 
 
    width: 75%; 
 
    padding: .5em 1em; 
 
} 
 

 
/* Search button */ 
 

 
.search-button { 
 
    float: right; 
 
    width: 25%; 
 
    padding: .5em 1em; 
 
    border: none; 
 
}

<div class="search-group"> 
 
    <input class="search-input" type="text" placeholder="Search for..."> 
 
    <button class="search-button" type="button">Submit</button> 
 
</div> 
 

 

 
<div class="search-group--expanded"> 
 
    <input class="search-input" type="text" placeholder="Search for..."> 
 
    <input class="search-button" type="submit" value="Submit"> 
 
</div>

Answer 5

このコードを使用してください。 私はあなたのためにjsfiddleを作成しました。

<div class="form-container"> 
    <form action="" class="form"> 
     <input type="text" name="search" class="search-box" placeholder="Search..."> 
     <input type="submit" class="search-submit"> 
    </form> 
</div> 

$('.search-submit').click(function (e) { 
     e.preventDefault(); 

     var searchbox = $('.search-box'); 

     if(searchbox.hasClass('expanded-search-box')) 
     { 
      // close the form 
      searchbox.removeClass('expanded-search-box'); 
      searchbox.removeClass('dynamic-margin'); 
     } 

     else { 
      // open the form 
      searchbox.addClass('expanded-search-box'); 
      searchbox.addClass('dynamic-margin'); 
     } 

    }); 

.form-container{ 
      width: 600px; 
      margin: 0 auto; 
      border: 1px solid #000; 
      padding: 33px 14px; 
     } 

     .form-container:after{ 
      content: ''; 
      display: block; 
      clear: both; 
     } 

     form{ 
      position: relative; 
      float: right; 
     } 

     .search-box{ 
      top: 0; 
      right: 0; 
      width: 90px; 

      transition: width 0.3s ease-out; 
      padding: 10px 0px; 
      padding-left: 10px; 
      outline: none; 
     } 

     .search-submit{ 
      position: absolute; 
      width: 110px; 
      top: 0; 
      right: 0; 
      padding: 10px 0px; 
     } 

     .expanded-search-box{ 
      width: 400px; 
     } 
     .dynamic-margin{margin-right:100px;} 

https://jsfiddle.net/satyaprasanna/8x99tq0h/7/ 

おかげ サティヤ

Answer 6

は、あなたのCSSクラスまだ

.expanded-search-box { 
    width: 395px; 
    padding: 10px; 
} 
.search-box { 
    top: 0; 
    right: 0; 
    width: 0px; 
    transition: width 0.3s ease-out; 
    padding: 10px 0px; 
    outline: none; 
    margin-right: 105px; 
}