Need help with search button

[lecarlb]

Hello,

I need some help with the search button alignment on small viewports. The site is version 1.0.8.4. It's modified. I've tried some CSS but not sure if I've tried everything. Here's what it looks like:

[burt]

Looks like your search input is extending 100% pushing the button down.

Try an input group; https://getbootstrap.com/docs/4.6/compo ... ton-addons

Core example; https://github.com/CE-PhoenixCart/Phoen ... search.php

[lecarlb]

Looks like your search input is extending 100% pushing the button down.

Try an input group; https://getbootstrap.com/docs/4.6/compo ... ton-addons

Core example; https://github.com/CE-PhoenixCart/Phoen ... search.php

I tried the core example, no success. I'll post what I have in user.css that affects the input group

Code: Select all

.input-group-append{
    display: flex;
}

.input-group-append .btn-info {
    position: relative;
    z-index: 2;
    background: #8a2be2;
    border: 1px solid #8a2be2;
  }

.input-group-append .btn-primary {
    position: relative;
    z-index: 2;
    background: #8a2be2;
    border: 1px solid #8a2be2;
  }

.input-group-append .btn-outline-secondary {
    background: #ffffff;
    border: 1px solid #ffffff;
  }

div.input-group input.form-control {
  width: 400px;
}

[14Steve14]

I have a vague recollection that some time ago on the old forum I was advised to add a negative margin or negative padding to the search button or the search box. The button then overlaid the search box.

I may be totally wrong as it was a while ago now.

[burt]

I'd just remove all that css and then see if it looks correct. Add one piece of the css back in and test again until it breaks. Then you know the problem.

Most likely the last one where you set width wider than the viewport.

[lecarlb]

I'd just remove all that css and then see if it looks correct. Add one piece of the css back in and test again until it breaks. Then you know the problem.

Most likely the last one where you set width wider than the viewport.

I thought about doing that but didn't act on it. I'll give it a try and report back.

[lecarlb]

You were right @burt. After removing all the .css and reinserting them, I changed the width of div.input-group input.form-control from 400px to 200px and it worked.

Thank you.

[burt]

I think you could possibly remove that width setting completely and it would then auto adjust to full width. Try it?

[lecarlb]

I think you could possibly remove that width setting completely and it would then auto adjust to full width. Try it?

Ok. I'll give it a try. I'm not sure why I put it there at first.