[SOLVED] Smart-Select: Change justification for selected item

Questions
1

I am selecting account names using a Smart Select for entry into a form, and I would like to left justify the selection. How is this done?

image

My HTML:

        <li><a href="#" 
                class="item-link smart-select"
                data-open-in = "picker"
                data-virtual-list = "true"
                data-searchbar ="true"
                data-searchbar-placeholder="Search accounts"
            >
                     
            <select id="accounts" name="Accounts">
                <option value=""></option>
                <!-- javascript smart select items go here -->
            </select>   
            <div class="item-content">
              <div class="item-inner"> 
                <div class="item-title">Patron</div>
              </div>  
            </div></a> 
        </li>
2

redefine css for select ~ .item-after

3

Yes I tried that but could not come up with the correct CSS to do it; I tried text-align: left, and text-align: start in the following css selector:

.smart-select .item-after
{
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
display: block;
}

4

.smart-select .item-title {
min-width: 35% !important;
}

.smart-select .item-after {
width: 100%;
}

screenshot

2 Likes