Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select控件选择后文字向右多偏移了5px #306

Open
zhangkx666 opened this issue Aug 30, 2020 · 1 comment
Open

Select控件选择后文字向右多偏移了5px #306

zhangkx666 opened this issue Aug 30, 2020 · 1 comment
Labels

Comments

@zhangkx666
Copy link
Contributor

zhangkx666 commented Aug 30, 2020

描述这个bug
Select控件选择后文字向右多偏移了5px

重现步骤
步骤:

  1. Select从没有选中状态变为选中状态时

期望行为
Select选择后,文字的位置应该和选择之前的placeholder位置一致

截图
image

请完整的描述以下信息

  • 操作系统: win10
  • 浏览器: Chrome 85.0.4183.83(正式版本)(32 位)

补充信息
原因我大致看了下,
没选择之前dom如下:

<div class="h-select-placeholder">select</div>

h-select-placeholder 的padding-left为5px

选择后dom如下:

<div class="h-select-value-single">
   <div class="h-select-value-single">demo1</div>
</div>

而h-select-value-single的样式padding-left: 5px,所以嵌套了两层后选中之后padding-left就叠加到了10px。
这里应该是多嵌套了一层h-select-value-single吧。

对用的代码位置在这里:
src/components/select/select.vue#L36

为了消除这个影响,我自己添加了一个css

.h-select-value-single {
  .h-select-value-single {
    padding-left: 0;
  }
}

别告诉我亲就是这样设计的,哈哈。

@vvpvvp
Copy link
Member

vvpvvp commented Sep 3, 2020

应该是我多嵌套了一层class了。
我修正一下。

@vvpvvp vvpvvp added the bug label Sep 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants