下拉菜单中的嵌套子项与主要项重叠

huangapple go评论63阅读模式
英文:

Nested sub-items in a dropdown overlapping with main items

问题

我正在尝试解决Woocommerce结账页面的问题。

当用户尝试选择邮件柜时,下拉菜单按地区排列选项,并在每个地区下显示相应的选项。

但子项目与主要地区选项重叠在一起:
图像:重叠的嵌套元素

问题可以在此链接中实时查看:https://kvest.ee/en/checkout/ 当之前已添加购物车中的物品。

我已尝试对各个元素设置相对位置和内联块,但似乎都没有效果。

英文:

I am trying to solve an issue in the checkout page in Woocommerce.

When the user tries to choose a parcel machine the dropdown arranges the choices by region and under each shows the corresponding options.

But the sub-items are overlapping with the main region options:
IMAGE: overlapping nested elements

The issue can be seen live here: https://kvest.ee/en/checkout/ When something has been added to cart beforehand.

I have tried setting relative positions and inline-block to various elements, but nothing seems to work.

答案1

得分: 0

删除(或增加)你的 CSS 中的选择类的高度。

这段代码,移除高度。

.select2-container .select2-dropdown .select2-results .select2-results__option {
  margin: 0;
  height: 40px; // <-移除或增加这部分。
  line-height: 40px;
  padding: 0 15px;
}

移除高度后,它对我来说看起来是这样的。

英文:

Remove (or increase) the height in your css for your select class.

This code, remove the Height.

.select2-container .select2-dropdown .select2-results .select2-results__option {
  margin: 0;
  height: 40px; ***<-remove or increase this.***
  line-height: 40px;
  padding: 0 15px;
}

With the height removed, that's how it looks for me.
下拉菜单中的嵌套子项与主要项重叠
下拉菜单中的嵌套子项与主要项重叠

huangapple
  • 本文由 发表于 2023年2月24日 05:45:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/75550637.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定