Unable to resolve the problem related to <ul> and <li>

I am currently working on integrating a chat snippet into an angular project. The challenge I am facing is that I cannot use jquery components, so I only need the HTML and CSS parts. You can find the original snippet here:

After copying it to Codepen, I noticed there were bullets on the left side of each user in the chat list. To remedy this, I added list-style-type:none;

However, simply removing the bullet points did not solve the issue, as there was still extra margin space left behind instead of the bullets. You can view my modified example here: https://codepen.io/artyombaykov/pen/pxGyjY I made adjustments in the following section to remove the bullet points:

#frame #sidepanel #contacts ul li.contact {
  position: relative;
  padding: 10px 0 15px 0;
  font-size: 0.9em;
  cursor: pointer;
  list-style-type:none;
}

How can I eliminate the additional left side margin that appeared due to the presence of bullet points?

htmltwitter-bootstrapcssbootstrap-4

Answer №1

Quick solution for this problem

To resolve the issue, change the styling of the ul element within the #contacts section to either 0 or 0px.

#contacts ul {
    padding: 0;
}

Incorporating the provided code snippet into your stylesheets will rectify the problem.

Root cause analysis

The additional padding occurred as a result of the following attribute included in the style rules shared by all ul, menu, and dir elements.

padding-inline-start: 40px;

Answer №2

To resolve the issue, simply include the following CSS code:

#frame #sidepanel #contacts ul {
    padding-left: 0px;
}

Answer №3

Include the following CSS rule to remove bullets from a ul: list-style-type:none

#frame #sidepanel #contacts ul {
  list-style: none;
  padding: 0;
}

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

Which is better: CSS gradients or background images?

Years ago, I came across many CSS codes that used background-image: url(xxx.png) to mimic a gradient background filter, as only (please correct me if I'm mistaken) IE's proprietary filter could achieve a CSS gradient. In today's world - giv ...

htmlcss

Select element from Material UI displaying horizontally

I'm brand new to Material Ui and currently tackling the implementation of their SELECT component. However, I am running into an issue where it is displaying in a row instead of a column. Am I overlooking something important here? const SelectDropDownC ...

cssreactjsmaterial-ui

Utilizing Bootstrap 4 to create fixed and fluid width side-by-side divs with scrollbars

I want to create a basic dashboard page. I decided to arrange two divs next to each other to serve as the side menu and content. Here is what the layout looks like: https://i.sstatic.net/EATK6.png I encountered an issue where the vertical scrollbar is n ...

csshtmltwitter-bootstrapbootstrap-4dashboard

Using external components, such as antd, with Style JSX in a NextJS project is not functional

I am exploring the use of Style JSX within a Next JS application to customize AntD components, with a focus on customizing the appearance of the sidebar (specifically using Style JSX to modify AntD's Sider component). Below is a snippet of the code I ...

cssreactjsnext.jsantdreact-component

Correct the body when the bootstrap navbar collapses

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

htmlbootstrap-4navbar

I'm having an issue with my link hover effect - it seems to be causing my link to disappear, despite the fact that the hover effect

Greetings and many thanks in advance for lending your assistance and patience. I am fairly new to the world of CSS and have yet to navigate the realm of transitions. Present before you is a modest div encompassing a background image with a text-block over ...

htmlcss

What could be causing my video not to display a thumbnail on mobile devices until it is played?

When I view my website on mobile devices, there is no background image displayed before playing a video. Below is the HTML code I am using: <div class="row " > <div class="col-12 text-center"> <video control ...

htmlcssbootstrap-4

Why does the selected attribute not function properly in <select><option> when used with ngModel?

I encountered an issue with Angular 6: when using a component based on the <select> element (combo-box), everything works fine if I use it in the traditional way, where I specify the selected attribute. In this case, the default option appears select ...

htmlangular6html-selectangular-ngmodel

Show spinner until the web page finishes loading completely

Could anyone guide me on how to display Ring.html for a brief moment until About.html finishes loading completely? I need the Ring.html page to vanish once About.html is fully loaded. As a beginner in web development, I would greatly appreciate your assist ...

javascripthtmlcss

Yet another inquiry about the inexplicable failure of my jQuery Ajax in Internet Explorer

Just need to double-check if my test code below is correct. I've done some research and it appears that html syntax errors can cause the jquery ajax to not work in Internet Explorer? There are several includes where this code is located, so could the ...

jqueryhtmlajax

Creating a dropdown menu utilizing JavaScript/jQuery arrays

Looking to create an HTML select menu using a JavaScript array where the keys are used as values for options. The challenge is when entering numbers as keys, they should be accepted in the code. a([selected="No of rooms", 1="1", 2="2", 3="3", 4="4", 5="5" ...

javascriptjqueryhtmlarraysfor-loop

How to center text both horizontally and vertically in HTML

I am struggling with centering a background image along with a 1-line text vertically and horizontally inside a div. Although I have successfully centered the image, the text remains misaligned. I attempted using vertical-align: middle without success. Be ...

csshtml

How to delete the right part of a box shadow in CSS

I have a div with a box-shadow applied. I want to remove the right side of the shadow without adding any new code, but by modifying the existing box-shadow property. I attempted using clip-path, but I need it to also work on Internet Explorer. Can you prov ...

htmlcss

Load options from server directory using PHP jQuery AJAX

I am faced with a file structure on my server that resembles the following: My query is quite complex: How can I dynamically populate <select> HTML tags from the contents of sub-files on a server? For instance, I have 3 <select> tags here tha ...

phpjqueryhtmlajaxdirectory

Ways to update the div content without having to reload the page

Upon clicking the save button on the modal form, the data is saved on a temporary page and the modal closes. The values should then be displayed in the div content. Currently, this process works fine, but upon reloading the page, the content is also being ...

javascriptphpjqueryajaxtwitter-bootstrap

The CSS class is specifically assigned to a single element

After every two seconds, my JavaScript function is triggered and based on certain logic, I aim to add a CSS class with an effect to an HTML element on the page. var counter = 0; $interval(function () { counter++; ...

javascriptjqueryhtmlcssangularjs

Creating an Efficient Lazy Loading HTML Page with jQuery

I've been looking to create a page that loads content only as the user scrolls to that specific section, similar to the way Pinterest website functions. Does anyone have suggestions on how to design and implement this feature, or know of any plugins ...

javascriptjqueryhtmllazy-loading

Issues with positioning images using media queries

Can anyone help me center an img when the viewport width is 320px? I've attempted different approaches but so far, nothing has been successful. .logo { width: 55px; height: 55px; margin: 10px 0 10px 30px; float: left; } @media only screen a ...

htmlcss

Activate the Bootstrap modal when the React site fully loads

Is there a way to display a modal with information as soon as a page loads in React? I attempted using the standard method: $(window).on('load',function(){ $('#myModal').modal('show'); }); However, it seems ineffective p ...

javascripttwitter-bootstrapreactjsbootstrap-modal

How to keep an image anchored at the bottom of the page without overlapping other content

I'm trying to have a logo image stay fixed at the bottom of a navigation drawer, but when I use absolute positioning and set it to the bottom, it overlaps with the list items on shorter devices. When the scroll bar appears due to shrinking the browser ...

cssreactjsflexboxmaterial-ui