Page 1 of 1
Need help with search button
Posted: Mon Oct 16, 2023 9:04 am
by 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:
Re: Need help with search button
Posted: Mon Oct 16, 2023 9:43 am
by burt
Re: Need help with search button
Posted: Tue Oct 17, 2023 12:59 am
by lecarlb
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;
}
Re: Need help with search button
Posted: Tue Oct 17, 2023 3:09 pm
by 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.
Re: Need help with search button
Posted: Tue Oct 17, 2023 5:01 pm
by 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.
Re: Need help with search button
Posted: Tue Oct 17, 2023 5:07 pm
by lecarlb
burt wrote: ↑Tue Oct 17, 2023 5:01 pm
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.
Re: Need help with search button
Posted: Wed Oct 18, 2023 12:34 am
by 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.
Re: Need help with search button
Posted: Wed Oct 18, 2023 2:49 pm
by burt
I think you could possibly remove that width setting completely and it would then auto adjust to full width. Try it?
Re: Need help with search button
Posted: Wed Oct 18, 2023 2:56 pm
by lecarlb
burt wrote: ↑Wed Oct 18, 2023 2:49 pm
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.