[Bootstrap 3] Standaard <form> breedte?

[AvWijk]

Ik heb een simpele inputbox die er goed uit ziet en de hele breedte van de kolom inneemt zoals ik het wil. Echter als ik er een <form> tag omheen gooi maakt hij er een vaste breedte van, ik heb geen idee waar dit vandaan komt! Met Chrome Web Developer tools kon ik niet zo snel vinden waar hij die vaste breedte precies neerzet.



Boven:

PHP:

      <div class="input-group ttf-search-box">
                    
                            
                    <form>
                          <input type="text" placeholder="Ik ben op zoek naar.." class="form-control">
                          <span class="input-group-btn">
                          <button class="btn btn-danger" type="button">
                          <i class="fa fa-search"></i> 
                         </button>
                         </span>
                         <p></p>
                         
</form>
                      
                         </div><!-- /input-group -->

Onder:

PHP:

      <div class="input-group ttf-search-box">
                    
                            
                    
                          <input type="text" placeholder="Ik ben op zoek naar.." class="form-control">
                          <span class="input-group-btn">
                          <button class="btn btn-danger" type="button">
                          <i class="fa fa-search"></i> 
                         </button>
                         </span>
                         <p></p>
                         
                      
                         </div><!-- /input-group -->

CSS

Cascading Stylesheet:

.ttf-search-box {padding: 20px; background: url(assets/img/woodgrain.jpg); background-size: cover; background-position: center;  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 7px 7px 16px 0px rgba(50, 50, 50, 0.47);
-moz-box-shadow:    7px 7px 16px 0px rgba(50, 50, 50, 0.47);
box-shadow:         7px 7px 16px 0px rgba(50, 50, 50, 0.47);}

Ik gebruik bootstrap 3.11.

[ Voor 10% gewijzigd door AvWijk op 05-08-2014 19:28 ]

[NMe]

Hoezo, je weet niet waar het vandaan komt? Je kan toch rechtsklikken op het element in je browser en het inspecteren? Dan zie je toch precies waar de (min-)width vandaan komt? Het kan alleen op de input of op het form zelf zitten...

[ Voor 14% gewijzigd door NMe op 05-08-2014 19:28 ]

[AvWijk]

Ja, dat had ik al door Maar nee, was het maar zo'n feest. Het gaat echt bij <form> mis. Heb geprobeerd er een class aan toe te voegen, 100% width werkt wel, maar dan valt de button erbuiten.



http://getbootstrap.com/css/#forms

[_Erikje_]

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

is dat niet wat je wilt?

[AvWijk]

Heeft geen invloed helaas..

[Xozium]

Zet de form tag rond de input-group in plaats van erin.

Zo dus:

code:

<form>
      <div class="input-group ttf-search-box">
                          <input type="text" placeholder="Ik ben op zoek naar.." class="form-control">
                          <span class="input-group-btn">
                          <button class="btn btn-danger" type="button">
                          <i class="fa fa-search"></i> 
                         </button>
                         </span>
                         <p></p>
      </div><!-- /input-group -->
</form>

[AvWijk]

Top! Dat was het probleem thnx Retiger..

[Xozium]

Dit komt omdat bootstrap .input-group > input gebruikt als CSS selector voor de input. Van zodra je er een form tussen zetten zal deze css niet van toepassing zijn.

[MoietyMe]

Of liever, zet de classes van de div op het form. Die div is nu een beetje overbodig..