Div не занимает все пространство - PullRequest
Новая
       137

Div не занимает все пространство

0 голосов
/ 29 мая 2020

Проблема

У меня проблема, когда в моем div откуда-то устанавливается максимальная ширина, но я не уверен, где это, поскольку я проверил пакет стилей, который я используя (Semanti c UI), а также мои собственные внутренние стили, и я не могу найти место, откуда он был получен (как показано на изображении 1, он находится в теге стиля, но это только скомпилированный Semanti c Код пользовательского интерфейса, как показано на рисунке 2). (Изображение 1)

Styling Shown

(Изображение 2)

Semantic UI Compiled

Из-за указанной проблемы это то, что отображается внутри приложения

Width Issue In-App View

Ожидаемое поведение

Это то, что ожидаемое поведение : (Вместо ограничения занимает все пространство)

Expected Behavior

Код

Приложение. 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;
}

Сообщения. 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);

1 Ответ

0 голосов
/ 29 мая 2020

Как предложил крестный отец в комментариях, я попытался переопределить класс .ui и получил ожидаемое поведение с этим дополнением к приложению. css файл:

Приложение. css

...
.ui {
  max-width: 100% !important;
}
...
...