Tips for showcasing the latter portion of text within an HTML select dropdown menu

Question

Tips for showcasing the latter portion of text within an HTML select dropdown menu

I have a select drop-down list with a fixed width of 80px, as shown in the image below:

https://i.sstatic.net/pCpI9.png

<select id="dd_country_code_2" name="dd_country_code_2" style="width: 120px;  height: 23px;">
    <option value="SEL">(Country code)</option>
    <option value="AF">Afghanistan ‏(‎+93)</option>
    <option value="AL">Albania ‏(‎+355)</option>
    <option value="DO">Dominican Republic ‏(‎+1)</option>
    <option value="FK">Falkland Islands ‏(‎+500)</option>
</select>

When a user selects an option, the result looks like this:

https://i.sstatic.net/U8PQR.png

However, I want the second half of the text to be displayed within the 80px of the list so that the user can clearly see its country code.

For instance:

https://i.sstatic.net/pvTnr.png

Could you please suggest a way to achieve this?

javascript html css html-select

Answer 1

Answer №1

To change the text direction in CSS, you can apply the direction: rtl; property.

(function() {
  document.querySelector('select').addEventListener('change', function(e) {
    e.target.style.direction = 'ltr';
    if(e.target.selectedIndex > 0) {
      e.target.style.direction = 'rtl';
    };
  });
})();

#dd_country_code_2 {
  width: 120px;
}

<select id="dd_country_code_2" name="dd_country_code_2" style="height: 23px;">
    <option value="SEL">(Country code) </option>
    <option value="AF">Afghanistan (+93) </option>
    <option value="AL">Albania (+355) </option>
    <option value="DO">Dominican Republic (+1) </option>
    <option value="FK">Falkland Islands (+500)</option>
</select>

Answer 2

To change the text direction in CSS, you can apply the direction: rtl; property.

(function() {
  document.querySelector('select').addEventListener('change', function(e) {
    e.target.style.direction = 'ltr';
    if(e.target.selectedIndex > 0) {
      e.target.style.direction = 'rtl';
    };
  });
})();

#dd_country_code_2 {
  width: 120px;
}

<select id="dd_country_code_2" name="dd_country_code_2" style="height: 23px;">
    <option value="SEL">(Country code) </option>
    <option value="AF">Afghanistan (+93) </option>
    <option value="AL">Albania (+355) </option>
    <option value="DO">Dominican Republic (+1) </option>
    <option value="FK">Falkland Islands (+500)</option>
</select>

Answer 3

Answer №2

Dealing with the width constraint, here is an alternative approach that cuts off oversized list items.

An update includes using a pseudo-element to display a down arrow and allow for full customization of the input's dimensions

(function() {
  document.querySelector('select').addEventListener('change', function(e) {
    var val = e.target.options[ e.target.selectedIndex ].text.split('(');
    if (val[0].length > 12) {
      val[0] = val[0].slice(0, 10) + '...';
    }    
    e.target.nextElementSibling.value = val.join('(');
  });
})();

.selectable {
  position:relative;
  background-color:white;
  border:solid grey 1px;
  width:120px;
  height:18px;
  overflow: hidden;
  font-size: 12px;
}
.selectable:after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  width:14px;
  height:18px;
  line-height:20px;
  pointer-events: none;
  font-size: 10px;
  text-align: center
}
.selectable select {
  position:absolute;
  top:0px;
  left:0px;
  font-size: inherit;
  border:none;
  width:120px;
  margin:0;
}
.selectable input {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  padding:1px;
  font-size: inherit;
  border:none;
  pointer-events: none;
}
.selectable select:focus, .selectable input:focus {
  outline:none;
}

<div class="selectable">
  <select>
    <option value="SEL">(Country code)</option>
    <option value="AF">Afghanistan (+93)</option>
    <option value="AL">Albania (+355)</option>
    <option value="DO">Dominican Republic (+1)</option>
    <option value="FK">Falkland Islands (+500)</option>
  </select>
  <input type="text" name="countrycode" value="(Country code)" />
</div>

Answer 4

Dealing with the width constraint, here is an alternative approach that cuts off oversized list items.

An update includes using a pseudo-element to display a down arrow and allow for full customization of the input's dimensions

(function() {
  document.querySelector('select').addEventListener('change', function(e) {
    var val = e.target.options[ e.target.selectedIndex ].text.split('(');
    if (val[0].length > 12) {
      val[0] = val[0].slice(0, 10) + '...';
    }    
    e.target.nextElementSibling.value = val.join('(');
  });
})();

.selectable {
  position:relative;
  background-color:white;
  border:solid grey 1px;
  width:120px;
  height:18px;
  overflow: hidden;
  font-size: 12px;
}
.selectable:after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  width:14px;
  height:18px;
  line-height:20px;
  pointer-events: none;
  font-size: 10px;
  text-align: center
}
.selectable select {
  position:absolute;
  top:0px;
  left:0px;
  font-size: inherit;
  border:none;
  width:120px;
  margin:0;
}
.selectable input {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  padding:1px;
  font-size: inherit;
  border:none;
  pointer-events: none;
}
.selectable select:focus, .selectable input:focus {
  outline:none;
}

<div class="selectable">
  <select>
    <option value="SEL">(Country code)</option>
    <option value="AF">Afghanistan (+93)</option>
    <option value="AL">Albania (+355)</option>
    <option value="DO">Dominican Republic (+1)</option>
    <option value="FK">Falkland Islands (+500)</option>
  </select>
  <input type="text" name="countrycode" value="(Country code)" />
</div>

Tips for showcasing the latter portion of text within an HTML select dropdown menu

Answer №1

Answer №2

Similar questions

Can you show me the way to open a single card?

Transform your HTML audio player into a Vue component

Dynamically loading a JSON file in JavaScript

How do I verify response values in Postman tests when the input parameter may be empty and can have multiple possible values?

AngularJS controller encounters a scoping problem within a callback function

Managing empty props in React applications

JavaScript automatically arranges child elements within their parent container in a random distribution without any overlapping

Tips for applying CSS conditionally to content at varying nesting levels

The Ajax GIF Loader is not functioning in the latest versions of Internet Explorer and Firefox, but it is running smoothly in

Experiencing difficulty receiving a full response from an ajax-php request displayed in a div

The scale configuration for scale: x is not valid for creating a time scale chart using chart.js

What is the best way to select a clicked span element within a div using JQuery and then adjust the spans before and after it

Update the color of the div when all checkboxes in the hidden form are selected

Looking to set up an event handler for the browser's back button in next.js?

Facing an issue in React-Native where unable to navigate to the second screen

Why is my CSS causing a div with 100% width to be slightly taller than expected?

Print a table in PHP with a horizontal layout

Is it possible to create a MongoDB query that can retrieve a specific number of documents from different types within a single collection?

Activate night mode in ElementPlus using CDN

Creating Objects on the Fly with Mistic Query Builder