OpenCart Community

Hello,

Can someone tel me how i can get more space between the links in the dropdown menu (see Image)
If I change padding in the stylesheet nav>li then it also affects the navbar. And that is not what i want.
The dropdown is custom made. But I can not reach the developer anymore.
https://www.112ink.nl

Please inform me. Thank you

you want more space in between option of select drop down, we hope you want vertical space?

yes that is what i want.

alarsdes wrote: ↑

Fri Nov 05, 2021 9:49 pm

Hello,

Can someone tel me how i can get more space between the links in the dropdown menu (see Image)
If I change padding in the stylesheet nav>li then it also affects the navbar. And that is not what i want.
The dropdown is custom made. But I can not reach the developer anymore.
https://www.112ink.nl

Please inform me. Thank you

OC version.

alarsdes wrote: ↑

Fri Nov 05, 2021 9:49 pm

Can someone tel me how i can get more space between the links in the dropdown menu (see Image)
If I change padding in the stylesheet nav>li then it also affects the navbar. And that is not what i want.
The dropdown is custom made. But I can not reach the developer anymore.
https://www.112ink.nl

I don't think it can be done in Google Chrome (as described here https://stackoverflow.com/questions/226 ... -in-chrome) but in Firefox the spacing looks good to me.

straightlight wrote: ↑

Sat Nov 06, 2021 8:19 pm

OC version.

Utterly irrelevant in this case.

paulfeakins wrote: ↑

Mon Nov 08, 2021 7:00 pm

straightlight wrote: ↑

Sat Nov 06, 2021 8:19 pm

OC version.

Utterly irrelevant in this case.

Up to your share of views of course but be reminded that older OC versions do use older jQuery libraries as well. If that is irrelevant according to you, then something here on the topic is missing definitely based on the information that is provided.

straightlight wrote: ↑

Mon Nov 08, 2021 7:03 pm

be reminded that older OC versions do use older jQuery libraries as well.

It seems to me in this case that it's just the HTML <select> element that can't be styled here.

oc version 2031

Hi alarsdes,

Unfortunately, as @paulfeakins has alluded to it before, styling HTML form elements is tricky business, and usually has to be done differently for different browsers. In the case of some elements (<select> is one of these) it's practically impossible to execute reliably and consistently across browsers. For more on the reasons and what you can try please refer to this MDN article on styling web forms.

Instead, you could replace the HTML control with a framework-driven solution. As opencart already uses Bootstrap, Bootstrap Dropdowns could be the way to go here, but there are other open source solutions as well. Implementing these would require refactoring the JS too, but in return you would get complete control over the styling. Depending on how comfortable you are with front-end development, this might require you to involve professional help.

I hope this has been a meaningful contribution!
Gergely

Thank you all.
BTW. I do not understand why , Google finds this a problem.
When I open my webshop https://www.112ink.nl with Android 11 phone.
And looking at the dropdown I really do not want anymore space between the items. See image

Oh, so this is about Google complaining about tap targets!

I don't think it's an issue with the <select> then, but the Top Menu and Footer Links (at least Lighthouse says so...)
To resolve the issue read through this thread and follow the suggestions there.

I hope this helps,
Gergely

It looks perfect. I am not so in writing in the stylesheet.
Could you change that code for me?
I could send you the sheet

Thank you