input element wil geen 100% breedte krijgen na extra divje

Status
Niet open voor verdere reacties.
Aar

Aar

Inventaris
Lid geworden
3 aug 2014
Berichten
10.107
Besturingssysteem
Windows 11 en diverse Linux-soorten
Office versie
Office 365
Ik heb deze CSS:
Code: 
#search .btn-group  {
	width: 100%;
	padding-top: 1rem;
}
@media (min-width: 992px) {
	#search {
		padding-top: 0;
	}
}
#search .form-control {
	width: 100%;
}

En deze code:
Code: 
<form id="search" class="form-inline" action="/search">
		    <div class="btn-group">
			<input class="form-control" type="search" name="q" placeholder="Zoek in de site" aria-label="Search">
			<span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
		    </div>
		</form>

Echter wil de inputbox geen 100% breedte meer aannemen als ik de div met btn-group toevoeg.
Iemand een idee? Of zie ik even iets over het hoofd op deze avond?
 
De snippet is voor Bootstrap 3. Gebruik je dit in BS 3 of BS 4 ?
In BS4 zal je Glyphicon font apart moeten laden maar dan adviseer ik Font-Awesome te gebruiken.
 
Opgelost met #search, .btn-group , komma vergeten. :p

Ik gebruik inderdaad BS4. Ik wil namelijk een knopje in mijn textbox hebben om deze leeg te maken als deze ingevuld is.
Maar dat wilt dus niet echt vlotten.

Wel kwam ik dit tegen:
https://www.bootply.com/130682#

Wel lijkt er inderdaad met FA een symbool te verschijnen, maar niet IN het element?
Terwijl dat wel gebeurt in het voorbeeld?

Code: 
<form id="search" class="form-inline" action="/search">
		    <div class="form-group has-feedback">
			<input id="searchinput" class="form-control hasclear" type="text" name="q" placeholder="Zoek in de site" aria-label="Search">
			<span class="clearer fa fa-caret-down form-control-feedback"></span>
		    </div>
		</form>

Een CSS oplossing lijkt mij niet nodig met de methode?
 
Laatst bewerkt:
Ja, de meeste tijd zit in de kleinste dingetjes, ik weet 't.
Die bootply link is ook voor BS3. Ik kwam op dit stukje terecht.
Code: 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#search .btn {
  padding-right: 1rem;
  padding-left: 1rem;
  border: 1px solid #ced4da;
}
/* als je de span gebruikt ook deze css: */
#search span.btn {
  cursor: auto;
}
</style>
<form id="search" action="/search">
<div class="input-group">
  <input type="search" class="form-control" name="q" placeholder="Zoek in de site" aria-label="Search">
  <div class="input-group-append">
  <button class="btn" type="button"><i class="fa fa-search"></i></button>
  </div>
</div>
</form>
In plaats van de button kan je ook dit gebruiken.
Code: 
<span class="btn"><i class="fa fa-search"></i></span>
 
Het gaat erom dat ik met een knop in de inputbox de inhoud kan legen. In dit voorbeeld zie ik alleen een zoek-afbeelding onder de input:
https://jsfiddle.net/n05rsdez/

Ik zit al een aantal uur te klooien, maar nog geen goed resultaat. Beetje jammer dat die BS versie niet backward compatible zijn. Dat maakt het wel lastig. :p
 
Laatst bewerkt:
Zet in de fiddle url bootstrap.min.css erbij :D dat gaat beter.
 
Juist ja! Vermoeidheid begint toe te slaan! :p
Ik denk dat ik morgen wel verder kan komen.
 
In de website waar ik mee bezig ben heb ik dit gebruikt
Code: 
<!-- fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,400i,700">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- bootstrap css -->
<link rel="stylesheet" href="/..../bootstrap-4.3.1/bootstrap.min.css">

<!-- jquery incl ajax -->
<script src="/..../jquery-3.4.0.min.js"></script>
<!-- bootstrap js incl popper -->
<script src="/..../bootstrap-4.3.1/bootstrap.bundle.min.js"></script>
popper.js zit in bootstrap.bundle en is 1 kB kleiner dan 2 losse bestanden.
jquery is 16 kB groter dan jquery.slim maar dan zit o.a. ajax erin die ik nodig heb.

Beetje jammer dat die BS versie niet backward compatible zijn. Dat maakt het wel lastig.
Klik om te vergroten...
Dat was ook het probleem bij BS 2 naar BS 3.

BS 3 moet rekening houden met browsers die CSS3 niet- of deels begrijpen.
BS 4 is daarentegen volledig CSS3.
Ooit zal BS weer aangepast gaan worden als alle browsers CSS4 ondersteunen maar dat duurt nog wel even :)

Omdat grote instanties, bedrijven en overheden BS hebben omarmd zal het niet worden gewaardeerd als zij door BS 5 hun websites moeten ombouwen. Ik vermoed dat BS 5 wel backwards compatible zal zijn met BS 4.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan