Inline Button?

  • thehypetype

    (@thehypetype)


    7 years, 7 months ago

    Hi There,

    I’ve used the below code to add a search button, but its appearing underneath the search field. How can i get it so it sits just to the left of the search field inline? I’ve stripped all my themes css away and still cant work it out. Currently using the storfront theme.

    `add_filter(‘aws_searchbox_markup’, ‘aws_searchbox_markup’);

    function aws_searchbox_markup( $markup ) {
    $pattern = ‘/(<input\s*type=\”text\”.*?\/>)/i’;
    $markup = preg_replace( $pattern, ‘${1}<button class=”aws-icon”>Search</button>’, $markup );
    return $markup;
    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author ILLID

    (@mihail-barinov)

    7 years, 7 months ago

    Hi,

    Please try to add following styles to your theme style.css file

    .aws-container .aws-search-form {
    display: flex;
    align-items: stretch;
}

.aws-container .aws-search-form .aws-icon {
    order: -1;
}
    Thread Starter thehypetype

    (@thehypetype)

    7 years, 7 months ago

    Thanks ILLID that did the trick.

    Only this places the search on top of other items in my nav bar as appose to inline with them.

    also the magnifiyng glass and clear button are thrown out of alignment, sorry to be a pain just think having it lined up is a very handy feature.

    • This reply was modified 7 years, 7 months ago by thehypetype.
    • This reply was modified 7 years, 7 months ago by thehypetype.
    Plugin Author ILLID

    (@mihail-barinov)

    7 years, 7 months ago

    Hi,

    Can you give me a link where I can see working search form?

    Regards

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Inline Button?’ is closed to new replies.