Home Forums Porto Admin Template Mail Compose

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10030384
    simplyjessica
    Participant

    Hey guys,

    I’m venturing into your mailbox compose feature now, as seen here
    Porto Compose.

    The tagsinput is nice, but I’m wondering if instead of typing any text and adding a comma, I can allow the user to type the name of another person in the system and then that person is prompted, much like outlook when you start writing someone’s name it shows you their email.

    I was reading about typeahead, which I think is part of the tagsinput tagsinput bootstrap, but I’m not quite sure how this would work.

    Do you guys have an idea how this can work, or if it is even possible?

    Thanks!



    Template Version: 2.1.1
    #10030393
    Support2
    Keymaster

    Hello,

    We did some tests here with the tagsinput + typeahead and really this is not working. Probably due to very old version.

    We have 2 suggestions for you:

    1) Use the Select2 plugin to do the same effect. For it please follow the steps:

    1.1) Make sure you include the CSS of select2 on head of document and the JS script on footer.

    1.2) Use this HTML for the input:

    <select multiple class="form-control populate custom-tags">
    	<option value="AK">johndoe@gmail.com</option>
    	<option value="HI">okler@okler.net</option>
    </select>

    1.3) Add in (css/custom.css):

    .mailbox-compose .mailbox-compose-field select + .select2 {
    	padding-left: 120px;
    	width: 100%;
    }
    
    .mailbox-compose .mailbox-compose-field select + .select2 .select2-selection {
        border: none !important;
        box-shadow: none !important;
        cursor: text;
    }
    
    .custom-dpd {
    	border: none !important;
    	margin-left: 120px;
    	width: 300px !important;
    }
    
    .select2-results__message {
        display: none !important;
    }

    1.4) Add in (js/custom.js):

    $('.custom-tags').select2({
    	theme: 'bootstrap',
    	tags: true,
    	dropdownCssClass: 'custom-dpd',
    	minimumInputLength: 3
    });

    2) Another alternative is use the Selectize plugin: https://selectize.github.io/selectize.js/

    I will add an “improvement” for the taginput plugin in our to-do list for future versions of Porto Admin. So this will be fixed.

    Kind Regards,

    Rodrigo.


Viewing 2 posts - 1 through 2 (of 2 total)