Få flera dropdowns att visas korrekt när alla har samma id

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Maj 2009

Få flera dropdowns att visas korrekt när alla har samma id

Hur får man en dropdown att använda rätt css så dom faktiskt ser likadana ut? Har inte super bra koll på hur css fungerar så kanske helt enkelt kallar fel i html koden?

<select id="demo-select2-1" class="form-control" name="company"> <option value=''>None</option> </select>

Såhär ser kodblocket ut på sidan:

Som ni ser så ser den första dropdownen fin ut, men dom andra två är inte lika fina.
Byter jag ut "demo-select2-1" till tex "demo-select2" i första dropdownen kommer sidan se ut såhär:

Känns inte som jag måste kopiera css koden 3 gånger bara för att de ska fungera utan snarare som att jag gör något fel men vet inte vad.
Detta är koden för varje vit liten låda:

<div class="col-xs-6 col-md-4"> <div class="panel panel-body text-center" data-toggle="match-height"> <h5>Select user</h5> <p> <small class="text-muted">Just random information</small> </p> <select id="demo-select2-1" class="form-control" name="namn"> <option value=''>None</option> </select> </div> </div>

Min dator: Silent Base 600 | 1700X @ 3.9Ghz | MSI Gaming X 1080TI | RM750X | 512Gb M2 | 16Gb 3200mhz Ram | S34E790C @ 3440x1440
Tjejens dator: Define r4 | i5 3570k @ 4.2ghz | GTX Titan | 750w Supernova | 240gb SSD | 32gb ram
Citera/Tagga för svar!

Trädvy Permalänk
Medlem
Plats
Borås
Registrerad
Aug 2009

ids ska vara unika och class används om man vill sätta samma css på många element.

Trädvy Permalänk
Medlem
Registrerad
Maj 2013

Du får ej använda samma ID flera gånger. Dessa ska vara unika och om du vill style:a flera element samtidigt så använder du "class" istället. Du kan använda flera olika klass-namn på ett element. Dessa separeras med mellanslag, så t.ex. class="form-control demo-select2-1"

M-ITX: Fractal Design Node 304 Gigabyte H97N i7 4790k Msi GTX980 Gaming Ballistix Sport 16GB @ 1600MHz

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Maj 2009
Skrivet av Pamudas:

Du får ej använda samma ID flera gånger. Dessa ska vara unika och om du vill style:a flera element samtidigt så använder du "class" istället. Du kan använda flera olika klass-namn på ett element. Dessa separeras med mellanslag, så t.ex. class="form-control demo-select2-1"

Okej, tack.
Eftersom personen som designat detta temat har lagt unikheten på ids så måste jag fixa det. Kan du guida mig hur jag ska göra?
Att lägga demo-select2-1 i class namnet gjorde nämligen inget.

EDIT: nevermind. jag löste de tack vare er hjälp. Behövde tydligen bara ändra numren i koden till högre tal

Min dator: Silent Base 600 | 1700X @ 3.9Ghz | MSI Gaming X 1080TI | RM750X | 512Gb M2 | 16Gb 3200mhz Ram | S34E790C @ 3440x1440
Tjejens dator: Define r4 | i5 3570k @ 4.2ghz | GTX Titan | 750w Supernova | 240gb SSD | 32gb ram
Citera/Tagga för svar!

Trädvy Permalänk
Medlem
Registrerad
Maj 2013
Skrivet av Christley:

Okej, tack.
Eftersom personen som designat detta temat har lagt unikheten på ids så måste jag fixa det. Kan du guida mig hur jag ska göra?
Att lägga demo-select2-1 i class namnet gjorde nämligen inget.

EDIT: nevermind. jag löste de tack vare er hjälp. Behövde tydligen bara ändra numren i koden till högre tal

Borde bara vara att ändra till demo-select2-1, demo-select2-2, demo-select2-3 om det nu är ett tema du följer:)

M-ITX: Fractal Design Node 304 Gigabyte H97N i7 4790k Msi GTX980 Gaming Ballistix Sport 16GB @ 1600MHz

Trädvy Permalänk
Medlem
Plats
Knivsta
Registrerad
Nov 2002

Ett id måste vara unikt för varje sida.
Det du vill göra är att sätta en gemensam class på varje select.

<select class="my-select"> ... </select>

"my-select" ändrar du naturligtvis till något bättre namn som du kommer på.

Exempel på hur css:en kan se ut.

.my-select { border: 1px solid #333; background-color: #fff; color: #000; }

Webb -och apputvecklare på Greater Than AB
Min hemsida | Frilansutvecklaren | LinkedIn profil.
Hemdator: Thinkpad T410S | Jobbdator: Microsoft Surface Pro 4 | Mobil: Samsung S7 Edge.