Hola chicos, no puedo entender cómo estirar un fondo li para completar el ancho de su matriz ul. Por lo tanto, el rectángulo aqua en los mensajes pares no cubre toda el área. Necesito que los rectángulos aqua sean del mismo tamaño que los rectángulos de color azul claro.

Esta es una imagen de mi aplicación, observe la falta de empalme denotado por el óvalo rojo, no son del color correcto: ingrese la descripción de la imagen aquí

Esta es la parte relevante del código EJS (trátelo como html):

html,
body {
  height: 100%;
  background-color: #E5E5E5;
}

#nav-bar {
  margin-bottom: 0;
}

#messages {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#messages li {
  padding: 5px 10px;
  width: 100%;
}

#messages li:nth-child(even) {
  background: #88e9e1;
}

#online-users {
  list-style-type: none;
  padding-left: 0;
}

#online-users li:nth-child(odd) {
  color: #373737;
}

#online-users li:nth-child(even) {
  color: #777777;
}

#container {
  height: 100%;
}

#middle-div {
  border-radius: 3px;
  border: 1px solid #202020;
}

#chat-column {
  height: 65vh;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-right: 1px solid #202020;
  /* Keep messages from overflowing out of rectangle */
  word-wrap: break-word;
  /* Contain messages as a scrollable list inside the rectangle */
  overflow-y: auto;
}

#users-column {
  height: 65vh;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-left: 1px solid #202020;
  /* Keep usernames from overflowing out of rectangle */
  word-wrap: break-word;
  /* Contain usernames as a scrollable list inside the rectangle */
  overflow-y: auto;
}

#bottom-div {
  margin-top: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container" id="container">
  <div class="row" id="top-div">
    <!-- The users username -->
    <h3 class="text-primary">Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h1>
  </div>

  <div class="row" id="middle-div">
    <div class="form-group" id="chat-and-users">
      <div>
        <div class="col-xs-9 bg-info" id="chat-column">
          <!-- Chat Column -->
          <ul id="messages">
            <li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
          </ul>
        </div>
        <div class="col-xs-3 bg-success" id="users-column">
          <!-- Users Column -->
          <h4><b>Online Users:</b></h4>
          <ul id="online-users">
            <li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="row" id="bottom-div">
    <form action="" id="input-button-form">
      <div class="form-group">
        <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message...">
      </div>
      <button type="submit" id="button-send" class="btn btn-primary">Submit</button>
    </form>
  </div>

</div>

Notas:

  1. Los mensajes provienen de un archivo front-end y se agregan como una li a la ul con "mensajes" de identificación

  2. El siguiente enlace no fue útil, así que no lo cite: Estirar los elementos de la lista

  3. para llenar el ancho de

0
Frankg26 29 nov. 2017 a las 08:11

5 respuestas

La mejor respuesta

Creo que esto funcionará bien para usted:

He agregado este siguiente código:

#messages li {
    padding: 5px 10px;
    width: calc(100% + 30px);
    margin-left: -15px;
}
html,
body {
  height: 100%;
  background-color: #E5E5E5;
}

#nav-bar {
  margin-bottom: 0;
}

#messages {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#messages li {
  padding: 5px 10px;
  width: calc(100% + 30px);
  margin-left: -15px;
}

#messages li:nth-child(even) {
  background: #88e9e1;
}

#online-users {
  list-style-type: none;
  padding-left: 0;
}

#online-users li:nth-child(odd) {
  color: #373737;
}

#online-users li:nth-child(even) {
  color: #777777;
}

#container {
  height: 100%;
}

#middle-div {
  border-radius: 3px;
  border: 1px solid #202020;
}

#chat-column {
  height: 65vh;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-right: 1px solid #202020;
  /* Keep messages from overflowing out of rectangle */
  word-wrap: break-word;
  /* Contain messages as a scrollable list inside the rectangle */
  overflow-y: auto;
}

#users-column {
  height: 65vh;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-left: 1px solid #202020;
  /* Keep usernames from overflowing out of rectangle */
  word-wrap: break-word;
  /* Contain usernames as a scrollable list inside the rectangle */
  overflow-y: auto;
}

#bottom-div {
  margin-top: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" id="container">
  <div class="row" id="top-div">
    <!-- The users username -->
    <h3 class="text-primary">
    Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h1>
  </div>
  <div class="row" id="middle-div">
    <div class="form-group" id="chat-and-users">
      <div>
        <div class="col-xs-9 bg-info" id="chat-column">
          <!-- Chat Column -->
          <ul id="messages">
            <li>Test Text</li>
            <li>Test Text</li>
            <li>Test Text</li>
            <li>Test Text</li>
          </ul>
        </div>
        <div class="col-xs-3 bg-success" id="users-column">
          <!-- Users Column -->
          <h4><b>Online Users:</b></h4>
          <ul id="online-users">
            <li>Test Text</li>
            <li>Test Text</li>
            <li>Test Text</li>
            <li>Test Text</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="row" id="bottom-div">
    <form action="" id="input-button-form">
      <div class="form-group">
        <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message...">
      </div>
      <button type="submit" id="button-send" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

Espero que esto haya sido útil para ti.

1
ankita patel 29 nov. 2017 a las 05:55

Agregue la clase .mx-0 con la fila de la clase.

.mx-0{
margin-left:0 !important;
margin-right:0 !important;
}
0
CodeZombie 29 nov. 2017 a las 05:23

#chat-column tiene relleno izquierdo y derecho (de la clase .col-xs-9), simplemente quítelo.

#chat-column {padding: 0;}
html,
body {
  height: 100%;
  background-color: #E5E5E5;
}

#nav-bar {
  margin-bottom: 0;
}

#chat-column {padding: 0;}

#messages {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#messages li {
  padding: 5px 10px;
  width: 100%;
}

#messages li:nth-child(even) {
  background: #88e9e1;
}

#online-users {
  list-style-type: none;
  padding-left: 0;
}

#online-users li:nth-child(odd) {
  color: #373737;
}

#online-users li:nth-child(even) {
  color: #777777;
}

#container {
  height: 100%;
}

#middle-div {
  border-radius: 3px;
  border: 1px solid #202020;
}

#chat-column {
  height: 65vh;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-right: 1px solid #202020;
  /* Keep messages from overflowing out of rectangle */
  word-wrap: break-word;
  /* Contain messages as a scrollable list inside the rectangle */
  overflow-y: auto;
}

#users-column {
  height: 65vh;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-left: 1px solid #202020;
  /* Keep usernames from overflowing out of rectangle */
  word-wrap: break-word;
  /* Contain usernames as a scrollable list inside the rectangle */
  overflow-y: auto;
}

#bottom-div {
  margin-top: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container" id="container">
  <div class="row" id="top-div">
    <!-- The users username -->
    <h3 class="text-primary">Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h1>
  </div>

  <div class="row" id="middle-div">
    <div class="form-group" id="chat-and-users">
      <div>
        <div class="col-xs-9 bg-info" id="chat-column">
          <!-- Chat Column -->
          <ul id="messages">
            <li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
          </ul>
        </div>
        <div class="col-xs-3 bg-success" id="users-column">
          <!-- Users Column -->
          <h4><b>Online Users:</b></h4>
          <ul id="online-users">
            <li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="row" id="bottom-div">
    <form action="" id="input-button-form">
      <div class="form-group">
        <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message...">
      </div>
      <button type="submit" id="button-send" class="btn btn-primary">Submit</button>
    </form>
  </div>

</div>
1
panther 29 nov. 2017 a las 05:52

El problema es el col-xs-9 que te dio padding-right: 15px;padding-left: 15px;. La respuesta más simple es dar #chat-column {padding:0;}

html,
body {
  height: 100%;
  background-color: #E5E5E5;
}

#nav-bar {
  margin-bottom: 0;
}

#messages {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#messages li {
  padding: 5px 10px;
  width: 100%;
}

#messages li:nth-child(even) {
  background: #88e9e1;
}

#online-users {
  list-style-type: none;
  padding-left: 0;
}

#online-users li:nth-child(odd) {
  color: #373737;
}

#online-users li:nth-child(even) {
  color: #777777;
}

#container {
  height: 100%;
}

#middle-div {
  border-radius: 3px;
  border: 1px solid #202020;
}

#chat-column {
padding:0;
  height: 65vh;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-right: 1px solid #202020;
  /* Keep messages from overflowing out of rectangle */
  word-wrap: break-word;
  /* Contain messages as a scrollable list inside the rectangle */
  overflow-y: auto;
}

#users-column {
  height: 65vh;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-left: 1px solid #202020;
  /* Keep usernames from overflowing out of rectangle */
  word-wrap: break-word;
  /* Contain usernames as a scrollable list inside the rectangle */
  overflow-y: auto;
}

#bottom-div {
  margin-top: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container" id="container">
  <div class="row" id="top-div">
    <!-- The users username -->
    <h3 class="text-primary">Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h1>
  </div>

  <div class="row" id="middle-div">
    <div class="form-group" id="chat-and-users">
      <div>
        <div class="col-xs-9 bg-info" id="chat-column">
          <!-- Chat Column -->
          <ul id="messages">
            <li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
          </ul>
        </div>
        <div class="col-xs-3 bg-success" id="users-column">
          <!-- Users Column -->
          <h4><b>Online Users:</b></h4>
          <ul id="online-users">
            <li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
					<li>Test Text</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="row" id="bottom-div">
    <form action="" id="input-button-form">
      <div class="form-group">
        <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message...">
      </div>
      <button type="submit" id="button-send" class="btn btn-primary">Submit</button>
    </form>
  </div>

</div>
1
Andre Ramadhan 29 nov. 2017 a las 05:43

Prueba esto. He agregado before y after css:

#messages li{
    position:relative;
}
#messages li:nth-child(2n):before {
    content: "";
    width: 15px;
    left: -15px;
    top: 0;
    bottom: 0;
    height: 100%;
    background: #88e9e1;
    position: absolute;
}
#messages li:nth-child(2n):after{
    content: "";
    width: 15px;
    right: -15px;
    top: 0;
    bottom: 0;
    height: 100%;
    background: #88e9e1;
    position: absolute;
}
html,
body {
  height: 100%;
  background-color: #E5E5E5;
}

#nav-bar {
  margin-bottom: 0;
}

#messages {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#messages li {
  padding: 5px 10px;
  width: 100%;
  position: relative;
}

#messages li:nth-child(even) {
  background: #88e9e1;
}

#messages li:nth-child(2n)::before {
  content: "";
  width: 15px;
  left: -15px;
  top: 0;
  bottom: 0;
  height: 100%;
  background: #88e9e1;
  position: absolute;
}

#messages li:nth-child(2n)::after {
  content: "";
  width: 15px;
  right: -15px;
  top: 0;
  bottom: 0;
  height: 100%;
  background: #88e9e1;
  position: absolute;
}

#online-users {
  list-style-type: none;
  padding-left: 0;
}

#online-users li:nth-child(odd) {
  color: #373737;
}

#online-users li:nth-child(even) {
  color: #777777;
}

#container {
  height: 100%;
}

#middle-div {
  border-radius: 3px;
  border: 1px solid #202020;
}

#chat-column {
  height: 65vh;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-right: 1px solid #202020;
  /* Keep messages from overflowing out of rectangle */
  word-wrap: break-word;
  /* Contain messages as a scrollable list inside the rectangle */
  overflow-y: auto;
}

#users-column {
  height: 65vh;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-left: 1px solid #202020;
  /* Keep usernames from overflowing out of rectangle */
  word-wrap: break-word;
  /* Contain usernames as a scrollable list inside the rectangle */
  overflow-y: auto;
}

#bottom-div {
  margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" id="container">
  <div class="row" id="top-div">
    <!-- The users username -->
    <h3 class="text-primary">Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h3>
  </div>
  <div class="row" id="middle-div">
    <div class="form-group" id="chat-and-users">
      <div>
        <div class="col-xs-9 bg-info" id="chat-column">
          <!-- Chat Column -->
          <ul id="messages">
            <!-- Messages go here -->
            <li>demo test</li>
            <li>demo test demo test</li>
            <li>demo test</li>
            <li>demo test demo test</li>
          </ul>
        </div>
        <div class="col-xs-3 bg-success" id="users-column">
          <!-- Users Column -->
          <h4><b>Online Users:</b></h4>
          <ul id="online-users">
            <!-- Online users go here -->
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="row" id="bottom-div">
    <form action="" id="input-button-form">
      <div class="form-group">
        <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message...">
      </div>
      <button type="submit" id="button-send" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>
2
ankita patel 29 nov. 2017 a las 05:29