Search code examples
htmlcssbackground-colorstyling

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

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: enter image description here

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>

Solution

  • 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.