multiple typeahead() calls are messing up my UI css

[mayuroks]

In designed a form where a user clicks a particular button and a new input field is added. Those input fields auto-complete using typeahead js.

The problem is when a new auto-complete field is added I have to make typeahead() calls and it adds a lot of css to the field.

Is there a way to disable adding all the unnecessary css. A simple option like

disable_css: true

which prevents adding below html/css

<span class="twitter-typeahead" style="">
  <input class="typeahead tt-input" type="text" name="condition" placeholder="some value" required="" autocomplete="off" spellcheck="false" dir="auto" style="">
  <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
  <div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 10000; display: none;">
    <div class="tt-dataset tt-dataset-auto_complete_list"></div>
  </div>
</span>

Its messing up my UI.

[anuranduttaroy]

Did you get any fix/workaround for this ? @mayuroks I am running into the same issue !!

[rajeevbbqq]

Add modifications to typehead css/class via jquery click function and remove

$('#pxth').click(function() {
        $('.tt-menu').css({
            'width': '420px',
            'font-size': '16px',
            'margin-left' : '-15px',
            'margin-top': '20px'
        });
    });

$('#pxes').click(function() {
    $('.tt-menu').css({
        'width': '260px',
        'font-size': '15px',
        'margin-left' : '0px',
        'margin-top': '0px'
    });
});