Displaying a dropdown selection that showcases two object properties lined up side by side

Question

Displaying a dropdown selection that showcases two object properties lined up side by side

I need the select option dropdown values to display employee names along with their titles in a lined up format. For instance, if my values are:

Bob Smith Director  
Mike Kawazki HR
Jane Doe Manager

I want them to be shown as:

Bob Smith      Director  
Mike Kawazki   HR
Jane Doe       Manager

The solution I currently have is similar to the one provided in this post. However, that solution relies on font styling to align the text correctly, and I need to maintain the specific font I am already using.

javascript html css

Answer 1

Answer №1

This example is compatible with the specified font:

var spacesToAdd = 5;
var maxcharacters = 0;
var toadd = ""; //ensure it remains empty!! Alternatively, you can use a hyphen (-)
const array = [];
function addv(num){
array[array.length] = num;
}
$("#timezones option").each(function(){
var parts = $(this).text().split('|');
var len = parts[0].length;
addv(len);
});
var largest = Math.max.apply(Math, array);
$("#timezones option").each(function(){
    var parts = $(this).text().split('|');
    var strLength = parts[0].length;
    var strLength2 = parts[1].length;
    var larg = largest + spacesToAdd;
    var numm2;
    if(strLength == largest){
    numm2 = spacesToAdd;
    }else if(strLength < largest){
    numm2 = larg - strLength;
    }
    if(toadd == ''){
    toadd = '\u{A0}';
    }
    for(var x=0; x<(numm2); x++){
        parts[0] = parts[0]+'⇴'; 
    }
    $(this).text(parts[0].replaceAll("⇴", toadd)+parts[1]).text;
});

#timezones{
    font-family:"Lora", monospace
}
option {
  background-color: #ffffff;
  font-family:"Courier New", Courier, monospace
}
option .l{
float: left;
}

option:before {
  content: ">";
  font-size: 20px;
  display: none;
  padding-right: 10px;
  padding-left: 5px;
  color: #fff;
}

option:hover:before {
  display: inline;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="timezones" id="timezones">
    <option value="1">Bob Smith | Director</option>
    <option value="2">Mike Kawazki | HR</option>
    <option value="3">Jane Doe | Manager</option>
</select>

Do you think this solution will meet your needs? Simply remove the Lora font and opt for the alternative font.

Adjust toadd to "-" if desired! Remember to include spaces around your | for proper formatting from left to right.

Answer 2

This example is compatible with the specified font:

var spacesToAdd = 5;
var maxcharacters = 0;
var toadd = ""; //ensure it remains empty!! Alternatively, you can use a hyphen (-)
const array = [];
function addv(num){
array[array.length] = num;
}
$("#timezones option").each(function(){
var parts = $(this).text().split('|');
var len = parts[0].length;
addv(len);
});
var largest = Math.max.apply(Math, array);
$("#timezones option").each(function(){
    var parts = $(this).text().split('|');
    var strLength = parts[0].length;
    var strLength2 = parts[1].length;
    var larg = largest + spacesToAdd;
    var numm2;
    if(strLength == largest){
    numm2 = spacesToAdd;
    }else if(strLength < largest){
    numm2 = larg - strLength;
    }
    if(toadd == ''){
    toadd = '\u{A0}';
    }
    for(var x=0; x<(numm2); x++){
        parts[0] = parts[0]+'⇴'; 
    }
    $(this).text(parts[0].replaceAll("⇴", toadd)+parts[1]).text;
});

#timezones{
    font-family:"Lora", monospace
}
option {
  background-color: #ffffff;
  font-family:"Courier New", Courier, monospace
}
option .l{
float: left;
}

option:before {
  content: ">";
  font-size: 20px;
  display: none;
  padding-right: 10px;
  padding-left: 5px;
  color: #fff;
}

option:hover:before {
  display: inline;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="timezones" id="timezones">
    <option value="1">Bob Smith | Director</option>
    <option value="2">Mike Kawazki | HR</option>
    <option value="3">Jane Doe | Manager</option>
</select>

Do you think this solution will meet your needs? Simply remove the Lora font and opt for the alternative font.

Adjust toadd to "-" if desired! Remember to include spaces around your | for proper formatting from left to right.

Displaying a dropdown selection that showcases two object properties lined up side by side

Answer №1

Similar questions

The AJAX query for validating IDs in a JSP page consistently produces identical outcomes

CSS division nested within the center float division

How to easily center text across multiple lines using CSS

Tips for Storing Your Data Collection: A Guide on Different Storage Options

The React data editor Dialog closes when the drop-down is clicked without triggering any onChange events

Design a dynamic top navigation bar in Angular or any other framework that automatically adjusts to the size of the screen, similar to the responsive bookmarks bar in

How can I filter rows in HTML using Vue.js based on string options?

Ways to retrieve several parameters from a controller using Ajax Jquery in Codeigniter

I am currently attempting to extract data from a JSON file by using key names for reference, but I am running into issues when dealing with nested keys

What is the best way to add a gradient effect to my image? (link)

Is there a way to display a message in a div container instead of using the alert box when there is a successful ajax response?

Sharing an object's attributes as props in Vuejs

Videos embedded using the React HTML video tag are not automatically playing on mobile devices

"Utilize the on() method to bind a click event to dynamically generated elements received

I recently discovered how to modify the video source (src) within an html5 source tag, but I am encountering varied outcomes when using it within a function or with inline javascript

Modify certain user configurations without altering all settings in one specific form using PHP and MySQL

Ensure the text value of a collection of web elements by utilizing nightwatch.js

Canvg | Is there a way to customize canvas elements while converting from SVG?

Selenium Webdriver faced challenges in identifying dynamically created scripts using CSS selectors

What is the process for loading a font file in Vue.js and webpack?