I have a fixed width drop down with a few option items in the list that exceed the width. I would like for these to wrap but my tests have not produced a solution. CSS targeting the option items I have tried:
white-space: normal; word-wrap: break-word; overflow: auto;
Any ideas?
Are the problem items just one long word, or a series of words? If the latter, they should just drop naturally … unless you’ve set a height on those elements (or their container). Can you post a working example, or a link?
Specifically there three different drop down fields and each has about three items which exceed the width. Unfortunately, I cannot post the code easily as I have it on my development box which is not connected to the internet. But I can tell you there is no fixed height. I assumed when I set a width that the long items would wrap but instead they just bleed out of view. Sorry.
Can you copy the drop down field to http://jsfiddle.net (just paste the drop down html in the HTML window and click save, then paste the URL here.
I copied my code in a text file and took it to a “connect” box. The first set of code is a Primefaces/Java framework which are JSF pages but the rendered code is HTML.
<div class="formFieldLabel">
<label for="idIgcPAXExportDestCityNameLabel">Destination City Name</label>
</div>
<h:inputText styleClass="classDestCityNameField"
id="idIgcPAXExportHeaderDestCityNm"
value="#{pageIgcPAXExportHeader.gpmhDestCityNm}" maxlength="60">
<p:ajax event="change" update="idIgcPAXExportHeaderDestCityNm" />
</h:inputText>
<//===================================//>
<div class="formFieldLabel">
<label for="idIgcPAXExportHeaderOrigCntryCd">
Origin Country Code</label>
</div><select id="formId:idIgcPAXExportHeaderOrigCntryCd" name="formId:idIgcPAXExportHeaderOrigCntryCd" class="classOrigStCntryDropdown" size="1" onchange="PrimeFaces.ab({source:this,event:'change',process:'formId:idIgcPAXExportHeaderOrigCntryCd',update:'formId:idIgcPAXExportHeaderOrigCntryCd'}, arguments[1]);">
<option value="">Select One</option>
<option value="0 - ">0 - GOLAN HEIGHTS</option>
<option value="1 - ">1 - AKSAI CHIN</option>
<option value="2 - ">2 - DMZ (DEMILITARIZED ZONE)</option>
<option value="3 - ">3 - US NAVAL BASE GUANTANAMO BAY</option>
<option value="4 - ">4 - NO MAN'S LAND</option>
<option value="5 - ">5 - NO MAN'S LAND AND MOUNT SCOPUS AREA</option>
<option value="6 - ">6 - UNITED KINGDOM SOVEREIGN BASE AREA</option>
<option value="7 - ">7 - UNDOF (U.N. DISENGAGEMENT OBSERVATION FORCE)</option>
<option value="AA - ">AA - ARUBA</option>
<option value="AC - ">AC - ANTIGUA AND BARBUDA</option>
<option value="AE - ">AE - UNITED ARAB EMIRATES</option>
<option value="AF - ">AF - AFGHANISTAN</option>
<option value="AG - ">AG - ALGERIA</option>
<option value="AJ - ">AJ - AZERBAIJAN</option>
<option value="AL - ">AL - ALBANIA</option>
<option value="AM - ">AM - ARMENIA</option>
<option value="AN - ">AN - ANDORRA</option>
<option value="AO - ">AO - ANGOLA</option>
<option value="AQ - ">AQ - AMERICAN SAMOA</option>
<option value="AR - ">AR - ARGENTINA</option>
<option value="AS - ">AS - AUSTRALIA</option>
<option value="AT - ">AT - ASHMORE AND CARTIER ISLANDS</option>
<option value="AU - ">AU - AUSTRIA</option>
<option value="AV - ">AV - ANGUILLA</option>
<option value="AX - ">AX - AKROTIRI</option>
<option value="AY - ">AY - ANTARCTICA</option>
<option value="BA - ">BA - BAHRAIN</option>
<option value="BB - ">BB - BARBADOS</option>
<option value="BC - ">BC - BOTSWANA</option>
<option value="BD - ">BD - BERMUDA</option>
<option value="BE - ">BE - BELGIUM</option>
<option value="BF - ">BF - THE BAHAMAS</option>
<option value="BG - ">BG - BANGLADESH</option>
<option value="BH - ">BH - BELIZE</option>
<option value="BK - ">BK - BOSNIA AND HERZEGOVINA</option>
<option value="BL - ">BL - BOLIVIA</option>
<option value="BM - ">BM - BURMA</option>
<option value="BN - ">BN - BENIN</option>
<option value="BO - ">BO - BELARUS</option>
<option value="BP - ">BP - SOLOMON ISLANDS</option>
<option value="BQ - ">BQ - NAVASSA ISLAND</option>
<option value="BR - ">BR - BRAZIL</option>
<option value="BS - ">BS - BASSAS DA INDIA</option>
<option value="BT - ">BT - BHUTAN</option>
<option value="BU - ">BU - BULGARIA</option>
<option value="BV - ">BV - BOUVET ISLAND</option>
<option value="BX - ">BX - BRUNEI</option>
<option value="BY - ">BY - BURUNDI</option>
<option value="CA - ">CA - CANADA</option>
<option value="CB - ">CB - CAMBODIA</option>
<option value="CD - ">CD - CHAD</option>
<option value="CE - ">CE - SRI LANKA</option>
<option value="CF - ">CF - CONGO</option>
<option value="CG - ">CG - CONGO (DEMOCRATIC REPUBLIC OF THE)</option>
<option value="CH - ">CH - CHINA</option>
<option value="CI - ">CI - CHILE</option>
<option value="CJ - ">CJ - CAYMAN ISLANDS</option>
<option value="CK - ">CK - COCOS (KEELING) ISLANDS</option>
<option value="CM - ">CM - CAMEROON</option>
<option value="CN - ">CN - COMOROS</option>
<option value="CO - ">CO - COLOMBIA</option>
<option value="CQ - ">CQ - NORTHERN MARIANA ISLANDS</option>
<option value="CR - ">CR - CORAL SEA ISLANDS</option>
<option value="CS - ">CS - COSTA RICA</option>
<option value="CT - ">CT - CENTRAL AFRICAN REPUBLIC</option>
<option value="CU - ">CU - CUBA</option>
<option value="CV - ">CV - CAPE VERDE</option>
<option value="CW - ">CW - COOK ISLANDS</option>
<option value="CY - ">CY - CYPRUS</option>
<option value="DA - ">DA - DENMARK</option>
<option value="DJ - ">DJ - DJIBOUTI</option>
<option value="DO - ">DO - DOMINICA</option>
<option value="DQ - ">DQ - JARVIS ISLAND</option>
<option value="DR - ">DR - DOMINICAN REPUBLIC</option>
<option value="DX - ">DX - DHEKELIA</option>
<option value="EC - ">EC - ECUADOR</option>
<option value="EG - ">EG - EGYPT</option>
<option value="EI - ">EI - IRELAND</option>
<option value="EK - ">EK - EQUATORIAL GUINEA</option>
<option value="EN - ">EN - ESTONIA</option>
<option value="ER - ">ER - ERITREA</option>
<option value="ES - ">ES - EL SALVADOR</option>
<option value="ET - ">ET - ETHIOPIA</option>
<option value="EU - ">EU - EUROPA ISLAND</option>
<option value="EZ - ">EZ - CZECH REPUBLIC</option>
<option value="FG - ">FG - FRENCH GUIANA</option>
<option value="FI - ">FI - FINLAND</option>
<option value="FJ - ">FJ - FIJI</option>
<option value="FK - ">FK - FALKLAND ISLANDS (ISLAS MALVINAS)</option>
<option value="FM - ">FM - FEDERATED STATES OF MICRONESIA</option>
<option value="FO - ">FO - FAROE ISLANDS</option>
<option value="FP - ">FP - FRENCH POLYNESIA</option>
<option value="FQ - ">FQ - BAKER ISLAND</option>
<option value="FR - ">FR - FRANCE</option>
<option value="FS - ">FS - FRENCH SOUTHERN AND ANTARCTIC LANDS</option>
<option value="GA - ">GA - GAMBIA, THE</option>
<option value="GB - ">GB - GABON</option>
<option value="GG - ">GG - GEORGIA</option>
<option value="GH - ">GH - GHANA</option>
<option value="GI - ">GI - GIBRALTAR</option>
<option value="GJ - ">GJ - GRENADA</option>
<option value="GK - ">GK - GUERNSEY</option>
<option value="GL - ">GL - GREENLAND</option>
<option value="GM - ">GM - GERMANY</option>
<option value="GO - ">GO - GLORIOSO ISLANDS</option>
<option value="GP - ">GP - GUADELOUPE</option>
<option value="GQ - ">GQ - GUAM</option>
<option value="GR - ">GR - GREECE</option>
<option value="GT - ">GT - GUATEMALA</option>
<option value="GV - ">GV - GUINEA</option>
<option value="GY - ">GY - GUYANA</option>
<option value="GZ - ">GZ - GAZA STRIP</option>
<option value="HA - ">HA - HAITI</option>
<option value="HK - ">HK - HONG KONG</option>
<option value="HM - ">HM - HEARD ISLAND AND MCDONALD ISLANDS</option>
<option value="HO - ">HO - HONDURAS</option>
<option value="HQ - ">HQ - HOWLAND ISLAND</option>
<option value="HR - ">HR - CROATIA</option>
<option value="HU - ">HU - HUNGARY</option>
<option value="IC - ">IC - ICELAND</option>
<option value="ID - ">ID - INDONESIA</option>
<option value="IM - ">IM - ISLE OF MAN</option>
<option value="IN - ">IN - INDIA</option>
<option value="IO - ">IO - BRITISH INDIAN OCEAN TERRITORY</option>
<option value="IP - ">IP - CLIPPERTON ISLAND</option>
<option value="IR - ">IR - IRAN</option>
<option value="IS - ">IS - ISRAEL</option>
<option value="IT - ">IT - ITALY</option>
<option value="IV - ">IV - COTE D'IVOIRE</option>
<option value="IZ - ">IZ - IRAQ</option>
<option value="JA - ">JA - JAPAN</option>
<option value="JE - ">JE - JERSEY</option>
<option value="JM - ">JM - JAMAICA</option>
<option value="JN - ">JN - JAN MAYEN</option>
<option value="JO - ">JO - JORDAN</option>
<option value="JQ - ">JQ - JOHNSTON ATOLL</option>
<option value="JU - ">JU - JUAN DE NOVA ISLAND</option>
<option value="KE - ">KE - KENYA</option>
<option value="KG - ">KG - KYRGYZSTAN</option>
<option value="KN - ">KN - NORTH KOREA or KOREA, DEMOCRATIC PEOPLES REPUBLIC OF</option>
<option value="KQ - ">KQ - KINGMAN REEF</option>
<option value="KR - ">KR - KIRIBATI</option>
<option value="KS - ">KS - KOREA, REPUBLIC OF</option>
<option value="KT - ">KT - CHRISTMAS ISLAND</option>
<option value="KU - ">KU - KUWAIT</option>
<option value="KV - ">KV - KOSOVO</option>
<option value="KZ - ">KZ - KAZAKHSTAN</option>
<option value="LA - ">LA - LAOS</option>
<option value="LE - ">LE - LEBANON</option>
<option value="LG - ">LG - LATVIA</option>
<option value="LH - ">LH - LITHUANIA</option>
<option value="LI - ">LI - LIBERIA</option>
<option value="LO - ">LO - SLOVAKIA</option>
<option value="LQ - ">LQ - PALMYRA ATOLL</option>
<option value="LS - ">LS - LIECHTENSTEIN</option>
<option value="LT - ">LT - LESOTHO</option>
<option value="LU - ">LU - LUXEMBOURG</option>
<option value="LY - ">LY - LIBYA</option>
<option value="MA - ">MA - MADAGASCAR</option>
<option value="MB - ">MB - MARTINIQUE</option>
<option value="MC - ">MC - MACAU</option>
<option value="MD - ">MD - MOLDOVA</option>
<option value="MF - ">MF - MAYOTTE</option>
<option value="MG - ">MG - MONGOLIA</option>
<option value="MH - ">MH - MONTSERRAT</option>
<option value="MI - ">MI - MALAWI</option>
<option value="MJ - ">MJ - MONTENEGRO</option>
<option value="MK - ">MK - MACEDONIA</option>
<option value="ML - ">ML - MALI</option>
<option value="MN - ">MN - MONACO</option>
<option value="MO - ">MO - MOROCCO</option>
<option value="MP - ">MP - MAURITIUS</option>
<option value="MQ - ">MQ - MIDWAY ISLANDS</option>
<option value="MR - ">MR - MAURITANIA</option>
<option value="MT - ">MT - MALTA</option>
<option value="MU - ">MU - OMAN</option>
<option value="MV - ">MV - MALDIVES</option>
<option value="MW - ">MW - Use Code MJ</option>
<option value="MX - ">MX - MEXICO</option>
<option value="MY - ">MY - MALAYSIA</option>
<option value="MZ - ">MZ - MOZAMBIQUE</option>
<option value="NC - ">NC - NEW CALEDONIA</option>
<option value="NE - ">NE - NIUE</option>
<option value="NF - ">NF - NORFOLK ISLAND</option>
<option value="NG - ">NG - NIGER</option>
<option value="NH - ">NH - VANUATU</option>
<option value="NI - ">NI - NIGERIA</option>
<option value="NL - ">NL - NETHERLANDS</option>
<option value="NM - ">NM - NO MAN'S LAND</option>
<option value="NN - ">NN - SINT MAARTEN</option>
<option value="NO - ">NO - NORWAY</option>
<option value="NP - ">NP - NEPAL</option>
<option value="NR - ">NR - NAURU</option>
<option value="NS - ">NS - SURINAME</option>
<option value="NT - ">NT - NETHERLANDS ANTILLES</option>
<option value="NU - ">NU - NICARAGUA</option>
<option value="NZ - ">NZ - NEW ZEALAND</option>
<option value="OS - ">OS - OCEANS</option>
<option value="PA - ">PA - PARAGUAY</option>
<option value="PC - ">PC - PITCAIRN ISLANDS</option>
<option value="PE - ">PE - PERU</option>
<option value="PF - ">PF - PARACEL ISLANDS</option>
<option value="PG - ">PG - SPRATLY ISLANDS</option>
<option value="PJ - ">PJ - SOUTHERN KURIL ISLANDS</option>
<option value="PK - ">PK - PAKISTAN</option>
<option value="PL - ">PL - POLAND</option>
<option value="PM - ">PM - PANAMA</option>
<option value="PO - ">PO - PORTUGAL</option>
<option value="PP - ">PP - PAPUA NEW GUINEA</option>
<option value="PS - ">PS - PALAU</option>
<option value="PU - ">PU - GUINEA-BISSAU</option>
<option value="QA - ">QA - QATAR</option>
<option value="RB - ">RB - Use Code RI for SERBIA</option>
<option value="RE - ">RE - REUNION</option>
<option value="RI - ">RI - SERBIA</option>
<option value="RM - ">RM - MARSHALL ISLANDS</option>
<option value="RN - ">RN - SAINT MARTIN</option>
<option value="RO - ">RO - ROMANIA</option>
<option value="RP - ">RP - PHILIPPINES</option>
<option value="RQ - ">RQ - PUERTO RICO</option>
<option value="RS - ">RS - RUSSIA</option>
<option value="RW - ">RW - RWANDA</option>
<option value="SA - ">SA - SAUDI ARABIA</option>
<option value="SB - ">SB - ST. PIERRE AND MIQUELON</option>
<option value="SC - ">SC - ST. KITTS AND NEVIS</option>
<option value="SE - ">SE - SEYCHELLES</option>
<option value="SF - ">SF - SOUTH AFRICA</option>
<option value="SG - ">SG - SENEGAL</option>
<option value="SH - ">SH - ST. HELENA</option>
<option value="SI - ">SI - SLOVENIA</option>
<option value="SL - ">SL - SIERRA LEONE</option>
<option value="SM - ">SM - SAN MARINO</option>
<option value="SN - ">SN - SINGAPORE</option>
<option value="SO - ">SO - SOMALIA</option>
<option value="SP - ">SP - SPAIN</option>
<option value="SR - ">SR - SERBIA</option>
<option value="ST - ">ST - ST. LUCIA</option>
<option value="SU - ">SU - SUDAN</option>
<option value="SV - ">SV - SVALBARD</option>
<option value="SW - ">SW - SWEDEN</option>
<option value="SX - ">SX - SOUTH GEORGIA AND THE SOUTH SANDWICH ISLANDS</option>
<option value="SY - ">SY - SYRIA</option>
<option value="SZ - ">SZ - SWITZERLAND</option>
<option value="TB - ">TB - SAINT BARTHELEMY</option>
<option value="TC - ">TC - Use Code AE</option>
<option value="TD - ">TD - TRINIDAD AND TOBAGO</option>
<option value="TE - ">TE - TROMELIN ISLAND</option>
<option value="TH - ">TH - THAILAND</option>
<option value="TI - ">TI - TAJIKISTAN</option>
<option value="TK - ">TK - TURKS AND CAICOS ISLANDS</option>
<option value="TL - ">TL - TOKELAU</option>
<option value="TN - ">TN - TONGA</option>
<option value="TO - ">TO - TOGO</option>
<option value="TP - ">TP - SAO TOME AND PRINCIPE</option>
<option value="TS - ">TS - TUNISIA</option>
<option value="TT - ">TT - EAST TIMOR</option>
<option value="TU - ">TU - TURKEY</option>
<option value="TV - ">TV - TUVALU</option>
<option value="TW - ">TW - TAIWAN</option>
<option value="TX - ">TX - TURKMENISTAN</option>
<option value="TZ - ">TZ - TANZANIA</option>
<option value="UC - ">UC - CURACAO</option>
<option value="UF - ">UF - UNDERSEA FEATURES</option>
<option value="UG - ">UG - UGANDA</option>
<option value="UK - ">UK - UNITED KINGDOM</option>
<option value="UN - ">UN - UNKNOWN LOC</option>
<option value="UP - " selected="selected">UP - UKRAINE</option>
<option value="US - ">US - UNITED STATES</option>
<option value="UV - ">UV - BURKINA FASO</option>
<option value="UY - ">UY - URUGUAY</option>
<option value="UZ - ">UZ - UZBEKISTAN</option>
<option value="VC - ">VC - ST. VINCENT AND THE GRENADINES</option>
<option value="VE - ">VE - VENEZUELA</option>
<option value="VI - ">VI - BRITISH VIRGIN ISLANDS</option>
<option value="VM - ">VM - VIETNAM</option>
<option value="VQ - ">VQ - VIRGIN ISLANDS</option>
<option value="VT - ">VT - VATICAN CITY</option>
<option value="WA - ">WA - NAMIBIA</option>
<option value="WE - ">WE - WEST BANK</option>
<option value="WF - ">WF - WALLIS AND FUTUNA</option>
<option value="WI - ">WI - WESTERN SAHARA</option>
<option value="WQ - ">WQ - WAKE ISLAND</option>
<option value="WS - ">WS - SAMOA</option>
<option value="WZ - ">WZ - SWAZILAND</option>
<option value="YI - ">YI - REPLACE WITH SERBIA(RI) OR MONTENEGRO(MJ)</option>
<option value="YM - ">YM - YEMEN</option>
<option value="ZA - ">ZA - ZAMBIA</option>
<option value="ZI - ">ZI - ZIMBABWE</option>
</select></div></fieldset>
</div>
And what’s the full CSS you have with that element? In my browser, the options just expand as wilde as needed to fit all items.
Not much for styles but I do not think the solution is relevant to the code specifically. I am asking if it even possible to wrap <option> items in a drop down. Possibly with a JavaScript which checks for multiple conditions and enters a line break? It can look for div width, white space, and word count then on meeting certain conditions enter in a line break. Thus staying within the confines of the drop down area.
[id="idIgcPaxExport"] .formFieldLabel {
padding: 10px 10px 10px 5px !important;
[id="idIgcPaxExport"] .classDestStCntryDropdown {
width: 364px;
}
[id="idIgcPaxExport"] .classDestStCntryDropdown option:hover {
width: 335px;
}