Div没有占用全部空间

问题描述 投票:0回答:1

问题

我遇到了一个问题,该问题是我的div从某个地方设置了最大宽度,但是我不确定它在哪里,因为我已经检查了我正在使用的样式包(语义UI)以及我的拥有自己的内部样式,我无法找到它的来源(如图1所示,它在一个样式标签中,但这仅是如图2所示的编译后的语义UI代码)。(图片1)

Styling Shown

(图像2)

Semantic UI Compiled

由于显示的问题,这就是应用程序内部显示的内容

Width Issue In-App View

预期行为

这是预期的行为:(占用整个空间而不是受到限制)

Expected Behavior

代码

App.css

html,
body,
.app {
  height: 100vh;
  background: #eee;
  padding: 1em;
}

/* SidePanel.js */
.menu {
  padding-bottom: 2em;
}

/* Messages.js */
.messages {
  height: 70vh;
  overflow-y: scroll;
}

/* MessageForm.js */
.message__form {
  position: fixed !important;
  bottom: 1em;
  margin-left: 320px !important;
  left: 0;
  right: 1em;
  z-index: 200;
}

.emoijpicker {
  position: absolute;
}

/* Message.js */
.message__self {
  border-left: 2px solid orange;
  padding-left: 8px;
}

.message__image {
  padding: 1em;
}

Messages.js(由于相关性,未包括某些部分)

import { Segment, Comment } from "semantic-ui-react";
...

  render() {
    // prettier-ignore
    const { messagesRef, messages, channel, user, numUniqueUsers, searchTerm, searchResults, searchLoading, privateChannel, isChannelStarred, typingUsers, messagesLoading } = this.state;

    return (
      <React.Fragment>
        <MessagesHeader
          channelName={this.displayChannelName(channel)}
          numUniqueUsers={numUniqueUsers}
          handleSearchChange={this.handleSearchChange}
          searchLoading={searchLoading}
          isPrivateChannel={privateChannel}
          handleStar={this.handleStar}
          isChannelStarred={isChannelStarred}
        />

        <Segment>
          <Comment.Group className="messages">
            {this.displayMessageSkeleton(messagesLoading)}
            {searchTerm
              ? this.displayMessages(searchResults)
              : this.displayMessages(messages)}
            {this.displayTypingUsers(typingUsers)}
            <div ref={node => (this.messagesEnd = node)} />
          </Comment.Group>
        </Segment>

        <MessageForm
          messagesRef={messagesRef}
          currentChannel={channel}
          currentUser={user}
          isPrivateChannel={privateChannel}
          getMessagesRef={this.getMessagesRef}
        />
      </React.Fragment>
    );
  }
}

export default connect(
  null,
  { setUserPosts }
)(Messages);

css reactjs semantic-ui styling semantic-ui-react
1个回答
0
投票

正如教父在注释中建议的那样,我尝试对.ui类进行重写,并且在App.css文件中添加了此内容后,得到了预期的行为:

App.css

...
.ui {
  max-width: 100% !important;
}
...
© www.soinside.com 2019 - 2024. All rights reserved.