1

How can I align part of text inside in select for two lines?

I need to align two lines with the same number of characters in each line. Each line ending with the character "|" aligned. example:

Lorem Ipsum alternative | other text
Lorem Ipsum             | other text

$strdocumento="Lorem Ipsum alternative";
$strdocumento=str_pad($strdocumento, 50, '!', STR_PAD_RIGHT)."***";
$strdocumento=str_replace("!"," ",$strdocumento);

echo $strdocumento."|<br>";

//Line 2

$strdocumento="Lorem Ipsum ";
$strdocumento=str_pad($strdocumento, 50, '!', STR_PAD_RIGHT)."***";
$strdocumento=str_replace("!"," ",$strdocumento);

echo $strdocumento."|<br>";
Pavan Kumar
  • 164
  • 15
pepito_01
  • 111
  • 3
  • 10
  • How long can the text be, as a maximum? When you say align to the right, can't you just use an HTML element with `float: right` or `text-align: right`? – Martin Oct 22 '19 at 16:08

1 Answers1

1

to align right you can define a div and a css style for that

echo '<div class="alignRight">'.$strdocumento.'|</div>';

css

div.alignRight{
  text-align:right;
  width: 15ch;//to place same number of characters in a line 
  display: block;
  float:;//you can add any css style to it and it works
}

EDIT I know its not the perfect answer because Option elements cannot have any child elements but you can always go for alternative/pseudo select plugin

if you want to do this in select without faking it than here is my code

it works correctly only if the font is monospaced (http://en.wikipedia.org/wiki/Monospaced_font)

<style type="text/css">
select { font-family: 'Courier',serif; }
</style>

define the select above js script so that it can identify the select 

<select id="mySelect"></select>

now here place all your variables in an array and find the length of the longest string upto the character - "|" and subtract others with the longest string to add that many spaces

<script type="text/javascript">

    // var string1 = '<?php //echo $strdocumento_1;?>';
    // var string2 = '<?php //echo $strdocumento_2;?>';
    var string1 = 'Lorem Ipsum alternative | Other Text';
    var string2 = 'Lorem Ipsum | Other Text';
    //you can use for loop or while loop in your php

    var arrToFindLengthOfLongestString = [string1.substr(0, string1.indexOf('|')), string2.substr(0, string2.indexOf('|'))];

    var longestLength = arrToFindLengthOfLongestString.sort(function (a, b) { return b.length - a.length; })[0].length;

    for (var i = 0; i < arrToFindLengthOfLongestString.length; i++) {
        for (var j = arrToFindLengthOfLongestString[i].length; j <= longestLength; j++) {
            arrToFindLengthOfLongestString[i]=arrToFindLengthOfLongestString[i]+"\xa0";
        }
        arrToFindLengthOfLongestString[i] = arrToFindLengthOfLongestString[i]+"|";
        // alert(arrToFindLengthOfLongestString[i]);
    }

    var arrForOption = [{
        text: arrToFindLengthOfLongestString[0]+'your other text',//you can use loop if there are more variables
        value: 'your value'
    }, {
        text: arrToFindLengthOfLongestString[1]+'your other text',//
        value: 'yourvalue'
    }];


var select = document.getElementById('mySelect');

// Iterate over array
arrForOption.forEach(function (obj, i) {
    // Create new <option> with dynamic value and text
    // Add the <option> to the <select>
    select.appendChild(new Option(obj.text, obj.value));
});
</script>
Pavan Kumar
  • 164
  • 15