The <ul> tag is not receiving the correct styles and is not displaying properly

I have successfully integrated an input control and button into my table within the Angular 7 application. When a user inputs text in the control and clicks the add button, the text is appended to the <ul> list. However, the layout of the <ul> list appears distorted, possibly due to its container. The example I am referencing utilizes a <div>. Can anyone assist me in identifying the issue?

Here is the link I've been referring to while attempting to achieve a similar appearance:

Reference Link

This is how it currently looks on my screen:

https://i.sstatic.net/9HIpO.png

HTML:

<table style="width:100%" *ngIf="ManagerStrategyDetails">
    <tr>
        <td>
            <table style="width:100%">
                <!-- Table content goes here -->
            </table>
        </td>
        
        <td style="width: 60%;">
            <div class="desc-header">Fund Strategy Description
                <span class="pull-right"
                    style="font-style: italic; font-size: 12px">{{ManagerStrategyDetails.DescLastReviewer}}</span>
            </div>
            
            <div style="font-size: 12px; border: solid 1px lightgrey; height: 448px;overflow: scroll;">
                <ckeditor [id]="'ckeditor_strategy_desc'" style="font-size: 11px;" *ngIf="EditMode"
                    debounce="500" [config]="EditorConfig"
                    [(ngModel)]="ManagerStrategyDetails.FundStrategyDescription"></ckeditor>
                    
                <div style="padding: 25px" *ngIf="!EditMode"
                    [innerHTML]="ManagerStrategyDetails.FundStrategyDescription"></div>
            </div>
        </td>
    </tr>
</table>

CSS:

/* HeroesComponent's private CSS styles */
.heroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}

/* Additional CSS rules for heroes list display */
/* Include badge styling, hover effects, and button styles */

button {
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
  font-family: Arial;
}

button:hover {
  background-color: #cfd8dc;
}

button.delete {
  position: relative;
  left: 194px;
  top: -32px;
  background-color: gray !important;
  color: white;
}

Update 1:

https://i.sstatic.net/EzSZH.png

htmlcss

Answer №1

For Centered Vertically

/** To center text vertically, use the following CSS **/

button.delete {
  position: absolute;
  right: 4px;
  top: 0;
  background-color: #ee6e0b !important;
  color: white;
  bottom: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  line-height: 28px;
  padding: 0;
}



/** For positioning text in the middle vertically, update your CSS with this code **/

.heroes li {
  position: relative;
  cursor: pointer;
  background-color: red;
  margin: .5em;
  height: 30px;
  border-radius: 4px;
  line-height: 30px;
}

.heroes a {
  color: #333;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-left: 36px;
}

.heroes .badge{
  display: block;
  font-size: small;
  color: white;
  background-color: #FAE7D6;
  position: absolute;
  border-radius: 4px 0 0 4px;
  margin-right: 6px;
  height: 30px;
  margin: auto 4px auto auto;
  width: 30px;
  text-align: center;
  left: 0;
}

Answer №2

Here is the updated version of your CSS

/* Styles for HeroesComponent */

.heroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}
.heroes li {
  position: relative;
  cursor: pointer;
  background-color: #EEE;
  margin: .5em;
  height: 36px;
  border-radius: 4px;
}

.heroes li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
}

.heroes a {
  color: #333;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.heroes a:hover {
  color:#607D8B;
}

.heroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  background-color: #405061;
  line-height: 1em;
  position: relative;
  border-radius: 4px 0 0 4px;
  margin-right: 6px;
  height: 36px;
  margin: auto 4px auto auto;
  min-width: 30px;
  text-align: center;
  line-height: 36px;
}

button {
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
  font-family: Arial;
}

button:hover {
  background-color: #cfd8dc;
}


button.delete {
  position: absolute;
  right: 4px;
  top: 0;
  background-color: gray !important;
  color: white;
  bottom: 0;
  margin: auto;
  height: 82%;
}

/* Copyright Google LLC. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at http://angular.io/license */

Answer №3

Implement the following modifications

In HTML, update the <a> tag within the list as shown below:

<a >
  <div style="display: flex;">
    <span class="badge"></span>
    <span>{{hero.name}}</span>
  </div>
</a>

In CSS, adjust the styling for .heroes a tag according to the following:

.heroes a {
  color: #333;
  text-decoration: none;
  position: relative;
  display: flex;
  line-height: 35px;
}

You can refer to this codepen link for more details: https://codepen.io/anon/pen/EqvOqx?editors=1100

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

Retrieve the content of a specific HTML tag using JavaScript

Is it possible to extract the content of a specific HTML tag as a string or XML format? <body> <script src="jquery.min.js"> //var test = document.getElementsByTagName("input"); //alert(test[0]); $(document).ready(function ( ...

javascriptjqueryhtml

Choose items in a particular order based on the class name of their category

How can I dynamically select and manipulate groups of elements? My intention is to select and modify the msgpvtstyleme elements, then select the msgpvtstyle elements separately and work with them as well. The ultimate goal is to apply classes to these grou ...

javascriptjquerycss

Is there a way to initiate a jquery function upon loading the page, while ensuring its continued user interaction?

On my webpage, there is a JavaScript function using jQuery that I want to automatically start when the page loads. At the same time, I want to ensure that users can still interact with this function. This particular function involves selecting a link tha ...

javascriptjqueryhtmlcss

Styling your div elements in CSS to shrink in width relative to their parent container

.container { max-width: 750px; height: 100px; background-color: red; margin: 0; padding: 0; } .box1 { width: 100px; height: 100%; float: left; background-color: black; } .box2 { width: 650px; height: 100%; fl ...

htmlcss

How can I resize my image to match the dimensions of the navigation bar?

Is there a way for me to match the width of my navigation bar with that of an image? The issue I'm facing is that the original size of the image is 497 x 298px, and in order to stretch it across the full width of the page while maintaining margins of ...

htmlcssnavigationimage-resizingresponsive

Tips for positioning a label within the span element wpcf7-form-control-wrap

Is it possible to place the label for input elements inside the span element generated by the cf7 shortcode? I want to achieve this in order to make the label only visible when the input field is in focus. To accomplish this, both the label and the input ...

jqueryhtmlcsswordpresscontact-form-7

How to Position Elements using Bootstrap and CSS

I am facing a simple issue with my webpage: I am unable to center the div-image in the header and align the content vertically. This is the current setup: https://i.sstatic.net/uFViw.png The desired position for the image is POS. I have tried methods lik ...

htmlcssbootstrap-4

Tips for displaying the message "{"POWER":"ON"}" within the else if statement (this.responseText == ({"POWER":"ON"})) {

Hey everyone, I'm trying to adjust the color of a button on my webpage based on the response I receive from this.responseText. I understand the JSON response, but for some reason, I can't seem to incorporate it into my code. If anyone could lend ...

javascripthtmljson

How to Implement Multi Select Drag and Drop Feature in Angular 4?

Currently, I am implementing Angular 2 Drag-and-Drop from this library to enable the selection of list items using a drag and drop method. However, I have encountered issues with its functionality on touch devices and when attempting to perform multiple it ...

javascripthtmlangulardrag-and-drop

Enhancing website aesthetics through CSS styling

My goal is to create websites with a fresh, updated design. One example of a site I admire is Manta Media Inc I assume that CSS plays a big role in achieving this look. What keywords should I use when searching on Google to learn how to build a web inte ...

cssuser-interface

Designs for Creating Webpages

As a beginner in the coding world, I have little experience with HTML and Python. My goal is to create a personal webpage, starting with a template and customizing it to fit my needs. Any suggestions on where to find free templates or where to begin my s ...

pythonhtmlweb

Node Express app issue: Only one page is not having CSS applied

I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS fil ...

cssnode.jsexpresshandlebars.js

Is there a way to validate form elements in HTML prior to submitting the form?

In my form, I am utilizing PHP for validation and processing, but I am interested in verifying elements as they are being filled out. Is there a way to check the current value of an element before the form is submitted? ...

javascripthtmlvalidation

A hyperlink unveils a visual and conceals its own presence

I'm a beginner in the world of coding and I have a question about creating a link that reveals a hidden image while hiding itself using HTML. After some research, this is what I've come up with: <a href="javascript: ...

javascripthtmlvisibility

What could be causing the code to produce 4 elements instead of the expected 2?

I'm trying to understand why the code above is creating four new paragraphs instead of just two. Can someone please explain what exactly happens in the $("p").before($("p").clone()); part? <!DOCTYPE html> <html> <head> <script ...

javascriptjqueryhtml

Is it possible to create a single CSS style class that can be used for various section tiles on a website?

I am currently working on a website that includes different section titles such as About, Projects, Contact, and more. To make these titles stand out against the background image, I have decided to fill them with white. The text color of the titles is dar ...

htmlcss

The division is refusing to make an appearance

As I embark on creating my very first website, I'm encountering some obstacles in translating my vision into reality. The #invokeryolo div is proving to be elusive and no matter how hard I try, I can't seem to make it appear on the screen. Below ...

htmlcss

Unfinished card or cut-off content within a bootstrap accordion

Greetings to the StackOverflow community! I am facing an issue with my accordion and card setup, where the card is not fully displayed within the button at the bottom. The following image illustrates the problem: https://i.sstatic.net/aSFsc.png Here is ...

jquerycssbootstrap-4

The text and buttons exceed the size limits of the popup box

Currently, I am tasked with updating an old website that includes a popup box containing an iFrame and nested tables. The content within these tables consists of text and two input boxes at the bottom. Everything within the box looks fine on screen resolu ...

htmlcss

I am facing difficulty in incorporating an IP address or URL within an IFRAME in my Cordova Android application

This page does not allow any iframes to load except for the YouTube video URL. When attempting to use any other iframe URL, the following error code is displayed: Error : net::ERR_BLOCKED_BY_RESPONSE In the example below, any URL or IP address fails to l ...

javascripthtmlcordova