Stretch <li> background to fill width of <ul>

Question

Hey guys I cannot figure out how to stretch an li background to fill out the width of its parent ul. Thus the aqua rectangle in the even messages do not cover the entire area. I need the aqua rectangles to be the same size as the light blue rectangles.

This is a picture of my application, notice the missing piecing denoted by the red oval, they are not the correct color:

This is the relevant portion of the EJS (treat it as html) code:

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>

Notes:

1. Messages come from a front end file and are appended as an li to the ul with id "messages"

2. The following link was not helpful, so please do not cite it: Stretch list items <li> to fill the width of <ul>

Answer 1

I think this will work for you fine:

I have added this following code:

#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>

I hope this was helpfull for you.

Answer 2

#chat-column has left and right padding (from .col-xs-9 class), just remove it.

#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>

Answer 3

The problem is the col-xs-9 it gave you padding-right: 15px;padding-left: 15px; . Simplest answer is to give the #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>

Answer 4

Try this. I have added before and 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>

Answer 5

Please add class .mx-0 with the class row.

.mx-0{
margin-left:0 !important;
margin-right:0 !important;
}