The values for my select option dropdown need to contain employee + title and be lined up. For example if my values are:
Bob Smith Director
Mike Kawazki HR
Jane Doe Manager
I want them to appear:
Bob Smith Director
Mike Kawazki HR
Jane Doe Manager
My current answer is similar to the accepted answer for this post. However that answer require a font styling to line up the text and I need to retain the font I'm using.
This works with this font:
var spacesToAdd = 5;
var maxcharacters = 0;
var toadd = ""; //leave blank!! Or you could add like a -
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>Will this work for you? just remove the Lora font and use the other font.
Change toadd to "-" if you want!
Make sure to add spaces around your | to break it from left to right.
