This topic contains 1 reply, has 2 voices, and was last updated by Sean Sean 4 months 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 4 months, 1 week ago by  subscribr.
    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 3755
    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.

You must be logged in to reply to this topic.