How to place kartik typeahead above text input


Tags: css,yii,yii2,typeahead.js

Problem :

How to place typeahead results above the text input ? The best for me would be adding an option to this widget or maybe some css rule ?



Solution :

At this moment i finally used jQuery solution in render event of typeahead widget, by modifying css margin-top after each render. Here is the code:

echo Typeahead::widget([
//(...)
     'pluginEvents' => [
        'typeahead:render' => 'function(event,ui) {

            var ttMenu = $("#search-main .tt-menu").first();
            var ttMenuHeight;

            if($(ttMenu).hasClass("tt-open")) {
                ttMenuHeight = -$(ttMenu).height();
                $(ttMenu).css("margin-top", ttMenuHeight - 70);
            }
        }',
    ],
//(...)
]);

'#search-main .tt-menu' is my selector for typeahead input, and this "70" is height of this input so be sure to replace it with your own.

Hope it helps.


    CSS Howto..

    How to validate HTML with RSS?

    How to use images in CSS that is used from Jade files rendered via Node.js

    CSS: How to make link colour the same as parent div

    Html and CSS for emails, how to, where to?

    How to increase rotate value

    How can i make an arrow triangle using CSS without any cut in the side i.e. smooth sides?

    How can I set the color of the border area around the page/post on my Wordpress Site

    How to prevent the loading of background image in each page?

    how to prevent css and js being cached by internet service provider?

    How to make this inner div vertically centered? (Using CSS)

    How to make a shape which is made using css borders responsive?

    How to make this CSS compatible with IE browsers? [closed]

    How to center div within another div?

    how to save responsive menu open/close value?

    How is the force reload of javascript/css done in Symfony?

    How to get Angular Material Design's directive to scale to image properly in IE?

    How do I set these li elements under eachother?

    JS+CSS How to display images from an array from top right to bottom left

    How do I select all div-elements where first-child is not a table

    How to render CSS conditionally in page

    How to add another text decoration definition with Javascript?

    how to create css shapes X which has to be background inside? [closed]

    How to keep a floating div centered on window resize (jQuery/CSS)

    How to remove or reset CSS style using JS?

    How to manage div positionning?

    How do I keep text from wrapping under an element which floats to its left?

    How can these images to fit on the screen?

    How to fix CSS background position

    Show a box with text when hovering an image

    How to create Box Shadow rollover and hover css navigation?