Designing draggable tags similar to those on LinkedIn, incorporating a parent div element containing an SVG image and text

Lately, I've been exploring the world of CSS and Angular. Can someone give me a jumpstart on using CSS to design an element like the one shown in this https://i.stack.imgur.com/vcR3Z.png image?

Essentially, this outer tag consists of a div element that contains both an image and some text.

Edit: To provide more context, here is a snippet of sample code:

HTML file:

<div id="tag">
   <svg class="tag-img" xmlns:xlink="http://www.w3.org/1999/xlink">
       <use class="tag-img" xlink:href="./images/add-new_tags.svg" />
   </svg>
   <span class="tagText">tag 1!</span>
</div>

CSS file:

#tag{
border-radius: 20px;
background: #FFFFFF;
padding: 10px;
width: 125px;
height: 17px;
border: solid 1px #000000;
}
.tag-img{
width: 15px;
height: 15px;
}

However, I'm encountering an issue where the SVG image and text are not displaying on the screen.

Answer №1

In order to achieve the desired look, make sure to add the border-radius and padding properties to the parent HTML element.

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

Is it possible to maintain the width of an element even when its height is set to 0px?

Let me provide a detailed explanation of my issue below, but the question remains the same: Is there a way to make an element hidden or invisible with a height of 0px or slightly more than 0px while maintaining its width for functionality in Safari? Here ...

What is the best way to prevent the span text from wrapping to the next line depending on the content of the previous span element using CSS?

i want to ensure the span elements text remains fixed to two lines within a flexbox. What is my goal? https://i.stack.imgur.com/k0GhL.png I am aiming to achieve something similar to the image above. The issue arises when the value in '/400' be ...

Create a fully responsive introduction page with three columns using Bootstrap, ensuring that the height of the

Currently, I am in the process of designing a website for a restaurant, hotel, and vineyard. My goal is to create three separate websites that are linked through one introductory page. The concept for the intro page involves three columns displayed side b ...

Exploring the integration of custom filters in AngularJS for enhanced visualization with Fusion Charts

I've encountered an AngularJS issue with Fusion Charts. I'm struggling to arrange the data according to one of the values in JSON data. The Fusion Chart currently displays mixed-up data, but I aim to filter it based on specific criteria as depict ...

Rails and Materialize CSS icons encountering unexpected alignment issues

There's an unusual problem I'm facing with Materialize CSS's icons in a table. They don't align properly. I've attached a screenshot for reference (personal details blurred out). Screenshot Link Below is my Slim template code: ...

Utilizing BootStrap for a more Dynamic and Reactive Web Design

Here is the HTML code I am using along with bootstrap: <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div> & ...

What is the best way to use the width to fill in the empty space left by the column?

I'm still learning about bootstrap and I want to make sure that each column has the same size to fill up any empty space. Here is my attempt so far: <div class="container-fluid mt-3 position-absolute top-50"> <div class=&qu ...

Moving a mouse from one element to another does not reset its state

Link to code: https://codesandbox.io/s/objective-darwin-w0i5pk?file=/src/App.js Description: There are four gray squares in this example, each with a different shade of gray. The goal is to change the background color of each square when the user hovers o ...

Using Javascript to Change Background Color on Button Click

The button press does not result in a change of the background color. What could be causing this issue? var body = document.getElementsByTagName("body"); var bgbutton = doucument.getElementById("bgchange"); bgbutton.onclick = function() { body.style.b ...

Directories within directories - HTML base directories & subdirectories

Within my HTML, I have included the following code: <head> <base href="http://mydomain.com/dev/"> </head> Despite this base element setting, all of my links seem to be pointing to mydomain.com/ instead of the expected subfolder /dev/. ...

Stop options from being hidden in a select dropdown using HTML

Can I keep the options visible when a user selects an item in the 'select' dropdown? I want to add more options to the 'select' when the user clicks on the 'op2' item, without closing the list of options. <select> <o ...

Modifying the content within a DIV element

I want to make changes to my DIV. <div id="main"> <div id="one"> <div class="red"> ... </div> <img class="avatar" src="img/avatar1.jpg"/> <span class="name"> John < ...

Is the space-between property not delivering the desired spacing?

I am trying to achieve equal spacing between list items, and I attempted the following code. ul { list-style-type: none; display: flex; justify-content: space-between; } However, it seems that this approach is not working as expected. I am confused ...

Ways to conceal and reveal content within div elements

I have a code snippet that is currently operational, but I am looking to enhance it by displaying one div at a time. If you would like to view the code, please visit my CodePen link below: https://codepen.io/danongu/pen/YzXvpoJ Due to the extensive amou ...

Can variables be bound bidirectionally between nested isolated scopes?

Looking into the complexities of nested directives, I am facing a challenge in establishing two-way binding between isolate scopes. The main goal is to have the outerPower variable bind to the innerPower variable and update whenever the innerPower value i ...

Why does the Select2 Drop down eliminate the mandatory border color?

Within my application, I have implemented a feature where required fields are designated with a red border. To achieve this effect, I utilized the following CSS code: input[data-val-required], select[data-val-required] { border: 1px solid #EFA4A4 !imp ...

What could be causing the background to disappear when the window width is reduced?

Can someone please explain why, after reducing the width of the window on , there is no wooden background in the upper right corner? Thank you in advance. ...

Which function is triggered first - onclick or ng-click?

Currently, I have a button with a validation process occurring on click. The validation process triggers a web service call and other processes if successful. However, I'm uncertain if the validation is actually taking place. This is my page setup: ...

What is the best way to modify an image in a column when I hover over a table row that was dynamically inserted using a button function?

Is there a way to dynamically change an image in a column when hovering over a table row that was added through a button function? Here is the current code that I am using, but it does not seem to work as intended when I hover over the row. This function ...

Is it possible to horizontally center an auto-fill grid using only CSS?

I would like to fill my page horizontally with as many blocks as possible and center the result. My goal is to have a grid that can resize when the window size changes: wide window xxx small window xx x Is it possible to achieve this without using Java ...