Expand the background of the <li> element to cover the entire width of the <ul> element

Hey everyone, I'm struggling to make the aqua rectangles in my messages fill out the width of their parent ul. This is resulting in them not covering the entire area like the light blue rectangles do. Can someone help me figure this out?

Here's a screenshot of my application, where you can see the issue highlighted by the red oval and incorrect colors: https://i.sstatic.net/XniD0.png

Below is the relevant segment of my EJS code (treat it as HTML):

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

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

// More CSS styles here...

// End of CSS code snippet

// Bootstrap and jQuery scripts below

Take note of the following:

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

  2. Please avoid referencing this unhelpful link: Stretch list items <li> to fill the width of <ul>

htmlcssbackground-colorstyling

Answer №1

Check out this solution with additional before and after CSS styling:

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

Here is a solution that I believe will suit your needs:

I've included the following code snippet:

#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 trust this information proves valuable to you.

Answer №3

The issue lies in the col-xs-9 class which adds 

padding-right: 15px; padding-left: 15px;
. A simple solution would be to assign #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;
  /* Prevent messages from overflowing out of rectangle */
  word-wrap: break-word;
  /* Keep messages contained 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;
  /* Prevent usernames from overflowing out of rectangle */
  word-wrap: break-word;
  /* Keep usernames contained 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">
    <!-- Display user's 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

#chat-column is currently styled with left and right padding from the .col-xs-9 class; this padding should be removed.

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

Don't forget to include the .mx-0 class within the row class.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that a div element expands to 100% of its parent's height when its child's height is less than 100%

I am struggling with a flex div that contains 2 elements. I want both elements to take up the full parent height while their content remains at auto height, but I keep getting the inner content height. Here is my code: <html lang="en"> <head&g ...

htmlcss

Integrate PHP with cURL in a PhoneGap application

I have a PHP code with cURL and I am looking to display the result in my HTML5 app. <?php $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'http://www.taringa.net/top/posts/?fecha=3&cat=-1'); curl_setopt($ch, CURLOPT_HEADER, false); curl_ ...

phphtmlcurlcordova

What might be causing Chrome to not wrap a centered column to the next line in Bootstrap 4 beta?

Utilizing bootstrap 4 beta, my goal is to center a line of text inside a column and ensure that if the text exceeds the line width, it wraps to the next line. I attempted to achieve this by using justify-content-center on the row in combination with col-a ...

htmlcsstwitter-bootstrapgoogle-chromebootstrap-4

Tips for updating the class of a button upon clicking it

I have a dilemma with my two buttons - one is green and the other has no background. I want them to change appearance when clicked, from green to one with a dashed border-bottom style. Below is the HTML code for these buttons: <div class="btns"> ...

javascriptjquerycssbutton

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

country code: "ab", "aa", "fr", ... I need to create a custom pipe that will convert a countryCode into a countryName, such as: "ab" → "Abkhazian", "ch" → "Chinese", "fr" ...

javascripthtmlangulartypescript

custom dialog box appears using ajax after successful action

Recently, I created a custom dialog/modal box with the following code: <div id="customdialog" class="modal"> <div class="modal__overlay"></div> <div class="modal__content"> <h2><strong>Hello</strong&g ...

javascriptjqueryhtmlajax

What is the method to modify the text color of an <option> in a <select> tag?

I am attempting to change the color of only the text "select one option" to grey, but I am having trouble making it work. Here is my code: .grey_color { color: #ccc; font-size: 14px; } <select id="select"> <option selected="selected"> ...

htmlcss

Creating a custom button in PHP

Currently, I am in the process of developing a shopping cart feature. One key requirement is to send both the product ID and the desired quantity chosen by the user to another file named cart.php. Below is an excerpt from my code snippet: for($i=0;$i< ...

phphtmlmysqlformsform-submit

How to make background color transparent in CSS for Safari browser

Does anyone know how to make the background color transparent in Safari? Right now, my PNG file is showing with a white background instead of being transparent. I have attempted: background-color: transparent; background-color: rgba(255,255,255,0); appe ...

csssafari

Bootstrap Framework 3 causing horizontal scroll due to header styling

Here is the link you requested: This is the HTML Code: <header id="header-10"> </div><!-- /.header-10-top --> <!-- MAIN NAVIGATION --> <div class="header-10-main"> <div class="container"> ...

htmlcssresponsive-designtwitter-bootstrap-3

What is the method for designing a CSS rule that solely activates when the body/html direction is set to "rtl"?

Our website is available in English at https://www.example.com. We have recently started using the GTranslate service to generate an Arabic version of the site at https://www.example.com/ar/. Upon reviewing the Arabic version, we noticed that GTranslate a ...

htmlcssright-to-left

Enhancing the appearance of text with CSS font borders

I'm currently working on a webpage that features various shades of red, green, yellow, and black in the background. I want to add font borders to the text displayed on this page, but using a single color just won't cut it. Check out the code here ...

htmlcssfontsborder

WebMatrix does not support PHP tags in .html files

I'm currently delving into the world of web development and I've encountered a bit of an issue. The book I've been using to study utilizes PHP tags within HTML files, but for some reason they're not functioning as expected in my header ...

phphtmlfiletagswebmatrix

Is there a way to enclose a mention within a unique span tag after highlighting it? Similar to how tags are implemented on platforms such

Currently utilizing an AngularJS plugin called ment.io for incorporating mentions. However, I am having difficulty figuring out how to customize the appearance of the selected mention. For example, in Stackoverflow: https://i.sstatic.net/bZrkh.png Or i ...

javascripthtmlangularjsmention

Ways to format the initial letter of a word as BOLD

Looking to make the first letter of certain words bold on a button in my UI that says, "Active Engagement" and "Active Non-Engagement". How can this be achieved? For example: Active Engagement, Active Non-Engagement The code for the buttons is as follows ...

androidhtmlbutton

Style the item with flexbox to have a border around it without increasing its height

In this scenario, the border is not surrounding the blue box but rather extends over the entire window height. Is there any advice on how to create a border around the blue box? Important Points: The HTML and body definitions cannot be altered. The pad ...

htmlcssflexbox

Using JQuery to load a table and inject it with html()

I am looking to populate an HTML table within a specific div element. The HTML code is being loaded using the following jQuery function: $("#table_wrapper").hide(); $.get("<?echo base_url();?>schichtplan/employee_fields/"+plan_id+"true",function(da ...

javascriptjqueryhtmlcodeigniter

Retrieving data from the database requires a significant amount of time

I'm currently experiencing a delay of around 15 seconds when running this query and I'm looking to optimize it. SELECT *, `points`.`players` as `players` , FROM_UNIXTIME(`points`.`timestamp`, '%Y-%m-%d %H:%i') as `date`, (SELEC ...

phphtmlmysql

Updating the data displayed in the browser window with the response from a subsequent API call using JavaScript

Currently, I have three functions that retrieve JSON data from an API using HTML buttons and convert it to a string with stringify. The results are then displayed in a div, extending the current browser page with each new call. I am looking for a way to ha ...

javascripthtmlfetch-apistr-replace