Skip to content

汇总:侧栏宽度问题 #14856

Closed
Closed
@TCOTC

Description

@TCOTC
Contributor

#15011

  • 01
    02
    03

01 #layouts 内部出现横向滚动条 #12264

原因:侧栏面板有个 min-width: 0.1px 的样式

解决方案:界面初始化的时候如果侧栏没有打开(即父元素 width:0px ),就需要给元素默认添加 .fn__none

p.s. 左侧栏(文档树会提前加载好)会默认加 .fn__none,但右侧栏和底侧栏没有

Image

video.webm

02 侧栏面板宽度很小并且无法调整宽度 #13516 #14180

原因:特定情况下 adjustLayout() 函数 给侧栏元素添加了 max-width:64px; 样式

复现方法:

  1. 使用以下 CSS:

    .layout__dockr > .fn__flex-1 {
    	margin-left: 3px;
    }

    或者:

    .layout__dockr > .fn__flex-1 {
    	margin-left: 3px;
    	display: flex !important;
    }
  2. 然后拖拽调整侧栏宽度,或者直接重新加载界面

    video.webm

方案:修改 adjustLayout() 函数。另外我调试的时候还遇到了这种情况:里面的 while 循环重复执行了 70 多次相同的步骤: 侧栏.element.style.maxWidth = "64px"; 然后 lastItem = 侧栏.element;

03 有时候侧栏面板是收起状态,但会凸出来一点

偶尔有用户遇到这个情况,但我找不到帖子

推测:可能是特定情况下侧栏没有 width 样式(不知道怎么复现) adjustLayout() 函数 会给侧栏添加 min-width:8px;

if (!item.element.style.width && !item.element.classList.contains("layout__center")) {
    item.element.style.minWidth = "8px";
}

复现不出来,只能手动编辑样式示意一下,估计是这样的效果:

Image

方案:修改 adjustLayout() 函数。

Activity

changed the title [-]汇总:侧栏宽度问题(正在编辑中)[/-] [+]汇总:侧栏宽度问题[/+] on May 22, 2025
KnIfER

KnIfER commented on May 22, 2025

@KnIfER

标题栏按钮改css什么插件?

TCOTC

TCOTC commented on May 22, 2025

@TCOTC
ContributorAuthor

@KnIfER 我没看懂你的意思,你想实现什么效果?

KnIfER

KnIfER commented on May 23, 2025

@KnIfER

@KnIfER 我没看懂你的意思,你想实现什么效果?

顶上那个css按钮的名称,后来看到了,叫代码片段/snippets

TCOTC

TCOTC commented on May 23, 2025

@TCOTC
ContributorAuthor
wwxiaoqi

wwxiaoqi commented on Jun 12, 2025

@wwxiaoqi
Contributor

03 有时候侧栏面板是收起状态,但会凸出来一点

我碰到了,在火狐浏览器访问的时候如果你在使用 写味 主题的情况下,
会在侧栏面板添加一个 max-width: 64px;。

Image

排查发现是执行了adjustLayout() 函数

Image

PixPin_2025-06-12_08-40-49.mp4
TCOTC

TCOTC commented on Jun 12, 2025

@TCOTC
ContributorAuthor

你这个是 02 的情况

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @KnIfER@wwxiaoqi@TCOTC

        Issue actions

          汇总:侧栏宽度问题 · Issue #14856 · siyuan-note/siyuan