This topic contains 3 replies, has 3 voices, and was last updated by Sean Sean 1 month, 3 weeks ago.

Material design input for typeahead


  • subscribr
    Participant

    Posts: 3
    Member Reply #10013

    Hi,

    I’m having troubles getting material design input working with typeahead.

    It appears that typeahead destroys the DOM, wrapping the input that is bound to typeahead in a span and surrounded by other elements:

    <div class="form-group form-md-line-input form-md-floating-label has-info">
        <span class="twitter-typeahead" style="position: relative; display: inline-block;">
    
            <input type="text" class="form-control input-lg tt-hint" readonly="" autocomplete="off" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0px 0px / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">
    
     
    
            <input type="text" class="form-control input-lg tt-input" id="simpleSearchAddress" name="simpleSearchAddress" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">
    
            <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: "Open Sans", sans-serif; font-size: 20px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;">
    
            <div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
    
                <div class="tt-dataset tt-dataset-1"></div>
    
            </div>
    
        </span>
    
        <label for="simpleSearchAddress">Qualify Address</label>
    
    </div>
    

    I can't seem to figure out how to modify _md-inputs.sass to account for this. Any ideas?

    • This topic was modified 6 months ago by  subscribr.
    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4022
    Support Staff Reply #10027

    Hi,

    Can you please provide us a test link to your site in a private reply ? And explain what you are trying to achieve, we will try to figure you out.

    Thanks.


    peralta
    Participant

    Posts: 1
    Member Reply #11163

    I have the same problem. php usage.

     

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4022
    Support Staff Reply #11200

    Hi,

    At the moment we don’t have material design skin for the typeahead component due to its complex markup.
    We will check it further and try to implement it in a future releases.

    Thanks.

You must be logged in to reply to this topic.