How to right align some part of text in in









up vote
0
down vote

favorite












This is current look:



enter image description here



I expect this:



enter image description here



Code:



 <select class="form-control">
<option value="1123x1">SJ [1123]</option>
<option value="562x1">Rib / Int. [562]</option>
<option value="1123x3">Fleece [1123]</option>
</select>


Suggestion for select2 is also needed.










share|improve this question























  • try it like this <option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
    – pravin navle
    2 days ago










  • I don't think it is possible only with css why don't you try dropdown list
    – Viira
    2 days ago










  • Character length are not always same so alignment break :'(
    – Amin
    2 days ago










  • how to do that? @Viira
    – Amin
    2 days ago










  • possible duplicate of : stackoverflow.com/questions/50969850/…
    – Temani Afif
    2 days ago














up vote
0
down vote

favorite












This is current look:



enter image description here



I expect this:



enter image description here



Code:



 <select class="form-control">
<option value="1123x1">SJ [1123]</option>
<option value="562x1">Rib / Int. [562]</option>
<option value="1123x3">Fleece [1123]</option>
</select>


Suggestion for select2 is also needed.










share|improve this question























  • try it like this <option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
    – pravin navle
    2 days ago










  • I don't think it is possible only with css why don't you try dropdown list
    – Viira
    2 days ago










  • Character length are not always same so alignment break :'(
    – Amin
    2 days ago










  • how to do that? @Viira
    – Amin
    2 days ago










  • possible duplicate of : stackoverflow.com/questions/50969850/…
    – Temani Afif
    2 days ago












up vote
0
down vote

favorite









up vote
0
down vote

favorite











This is current look:



enter image description here



I expect this:



enter image description here



Code:



 <select class="form-control">
<option value="1123x1">SJ [1123]</option>
<option value="562x1">Rib / Int. [562]</option>
<option value="1123x3">Fleece [1123]</option>
</select>


Suggestion for select2 is also needed.










share|improve this question















This is current look:



enter image description here



I expect this:



enter image description here



Code:



 <select class="form-control">
<option value="1123x1">SJ [1123]</option>
<option value="562x1">Rib / Int. [562]</option>
<option value="1123x3">Fleece [1123]</option>
</select>


Suggestion for select2 is also needed.







html css jquery-select2






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 2 days ago









Alon Eitan

11.1k63652




11.1k63652










asked 2 days ago









Amin

84111




84111











  • try it like this <option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
    – pravin navle
    2 days ago










  • I don't think it is possible only with css why don't you try dropdown list
    – Viira
    2 days ago










  • Character length are not always same so alignment break :'(
    – Amin
    2 days ago










  • how to do that? @Viira
    – Amin
    2 days ago










  • possible duplicate of : stackoverflow.com/questions/50969850/…
    – Temani Afif
    2 days ago
















  • try it like this <option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
    – pravin navle
    2 days ago










  • I don't think it is possible only with css why don't you try dropdown list
    – Viira
    2 days ago










  • Character length are not always same so alignment break :'(
    – Amin
    2 days ago










  • how to do that? @Viira
    – Amin
    2 days ago










  • possible duplicate of : stackoverflow.com/questions/50969850/…
    – Temani Afif
    2 days ago















try it like this <option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
– pravin navle
2 days ago




try it like this <option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
– pravin navle
2 days ago












I don't think it is possible only with css why don't you try dropdown list
– Viira
2 days ago




I don't think it is possible only with css why don't you try dropdown list
– Viira
2 days ago












Character length are not always same so alignment break :'(
– Amin
2 days ago




Character length are not always same so alignment break :'(
– Amin
2 days ago












how to do that? @Viira
– Amin
2 days ago




how to do that? @Viira
– Amin
2 days ago












possible duplicate of : stackoverflow.com/questions/50969850/…
– Temani Afif
2 days ago




possible duplicate of : stackoverflow.com/questions/50969850/…
– Temani Afif
2 days ago












1 Answer
1






active

oldest

votes

















up vote
0
down vote













there must be some better solution. this is my attempt to address your problem






 <select class="form-control">
<option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[1123]</option>
<option value="562x1">Rib / Int.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [562]</option>
<option value="1123x3">Fleece&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
</select>








share|improve this answer




















  • It would make the list to look just like in the first screenshot the OP provided, would it not?
    – Alon Eitan
    2 days ago










  • I am generating the <option>s from a PHP script, there may be hundreds of options
    – Amin
    2 days ago











  • yes, but if the list is static then he can adjust the number of &nbsp; to get the desired result.
    – pravin navle
    2 days ago










  • ok let me think of some workaround. this is quite tricky and a bit hard to achieve
    – pravin navle
    2 days ago










Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













 

draft saved


draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237644%2fhow-to-right-align-some-part-of-text-in-option-in-select%23new-answer', 'question_page');

);

Post as a guest






























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
0
down vote













there must be some better solution. this is my attempt to address your problem






 <select class="form-control">
<option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[1123]</option>
<option value="562x1">Rib / Int.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [562]</option>
<option value="1123x3">Fleece&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
</select>








share|improve this answer




















  • It would make the list to look just like in the first screenshot the OP provided, would it not?
    – Alon Eitan
    2 days ago










  • I am generating the <option>s from a PHP script, there may be hundreds of options
    – Amin
    2 days ago











  • yes, but if the list is static then he can adjust the number of &nbsp; to get the desired result.
    – pravin navle
    2 days ago










  • ok let me think of some workaround. this is quite tricky and a bit hard to achieve
    – pravin navle
    2 days ago














up vote
0
down vote













there must be some better solution. this is my attempt to address your problem






 <select class="form-control">
<option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[1123]</option>
<option value="562x1">Rib / Int.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [562]</option>
<option value="1123x3">Fleece&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
</select>








share|improve this answer




















  • It would make the list to look just like in the first screenshot the OP provided, would it not?
    – Alon Eitan
    2 days ago










  • I am generating the <option>s from a PHP script, there may be hundreds of options
    – Amin
    2 days ago











  • yes, but if the list is static then he can adjust the number of &nbsp; to get the desired result.
    – pravin navle
    2 days ago










  • ok let me think of some workaround. this is quite tricky and a bit hard to achieve
    – pravin navle
    2 days ago












up vote
0
down vote










up vote
0
down vote









there must be some better solution. this is my attempt to address your problem






 <select class="form-control">
<option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[1123]</option>
<option value="562x1">Rib / Int.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [562]</option>
<option value="1123x3">Fleece&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
</select>








share|improve this answer












there must be some better solution. this is my attempt to address your problem






 <select class="form-control">
<option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[1123]</option>
<option value="562x1">Rib / Int.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [562]</option>
<option value="1123x3">Fleece&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
</select>








 <select class="form-control">
<option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[1123]</option>
<option value="562x1">Rib / Int.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [562]</option>
<option value="1123x3">Fleece&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
</select>





 <select class="form-control">
<option value="1123x1">SJ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[1123]</option>
<option value="562x1">Rib / Int.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [562]</option>
<option value="1123x3">Fleece&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [1123]</option>
</select>






share|improve this answer












share|improve this answer



share|improve this answer










answered 2 days ago









pravin navle

344116




344116











  • It would make the list to look just like in the first screenshot the OP provided, would it not?
    – Alon Eitan
    2 days ago










  • I am generating the <option>s from a PHP script, there may be hundreds of options
    – Amin
    2 days ago











  • yes, but if the list is static then he can adjust the number of &nbsp; to get the desired result.
    – pravin navle
    2 days ago










  • ok let me think of some workaround. this is quite tricky and a bit hard to achieve
    – pravin navle
    2 days ago
















  • It would make the list to look just like in the first screenshot the OP provided, would it not?
    – Alon Eitan
    2 days ago










  • I am generating the <option>s from a PHP script, there may be hundreds of options
    – Amin
    2 days ago











  • yes, but if the list is static then he can adjust the number of &nbsp; to get the desired result.
    – pravin navle
    2 days ago










  • ok let me think of some workaround. this is quite tricky and a bit hard to achieve
    – pravin navle
    2 days ago















It would make the list to look just like in the first screenshot the OP provided, would it not?
– Alon Eitan
2 days ago




It would make the list to look just like in the first screenshot the OP provided, would it not?
– Alon Eitan
2 days ago












I am generating the <option>s from a PHP script, there may be hundreds of options
– Amin
2 days ago





I am generating the <option>s from a PHP script, there may be hundreds of options
– Amin
2 days ago













yes, but if the list is static then he can adjust the number of &nbsp; to get the desired result.
– pravin navle
2 days ago




yes, but if the list is static then he can adjust the number of &nbsp; to get the desired result.
– pravin navle
2 days ago












ok let me think of some workaround. this is quite tricky and a bit hard to achieve
– pravin navle
2 days ago




ok let me think of some workaround. this is quite tricky and a bit hard to achieve
– pravin navle
2 days ago

















 

draft saved


draft discarded















































 


draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237644%2fhow-to-right-align-some-part-of-text-in-option-in-select%23new-answer', 'question_page');

);

Post as a guest














































































這個網誌中的熱門文章

How to read a connectionString WITH PROVIDER in .NET Core?

Node.js Script on GitHub Pages or Amazon S3

Museum of Modern and Contemporary Art of Trento and Rovereto