What is the best way to insert a bullet point in between items?

I am facing an issue with placing a bullet point between list items generated from ng-repeat in Angular.

Despite my efforts, the bullet point keeps appearing after the items instead of between them.

Here is how it currently looks:

Venue1‏• $20

However, I need it to look like this:

Venue1 [bullet] $20

This is the HTML code I am using:

<h4 class="venue">{{show.properties.venue}}‏&bull;&nbsp;{{show.properties.price}}</h4>

I'm puzzled as to why the bullet point gets pushed to the end and not in between the items?

htmlcssangularjs

Answer №1

Using &bull; is perfectly fine and will appear as expected within your text. However, you may have an unseen control character in your HTML code just before the bullet point. This invisible character, possibly inherited from elsewhere, is known as the right-left-mark. It is used to represent a mix of left-to-right (e.g., English) and right-to-left (e.g., Arabic/Hebrew) sentences, causing any text after it to display from right to left due to its special characters and numbers, rather than English alphabets. Simply remove this character and everything should display correctly. If you encounter any unusual behavior, always check your rendered HTML for issues - the browser will reveal all!

View Plnkr example

Learn more about the right-to-left mark

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

Learn how to effectively manage an element within an HTML-5 document using Protractor

I am new to Protractor and my task involves automating third-party tools. I encountered an issue where I couldn't locate a specific web element that changes its state and pulls data from another application when clicked, causing its class value to cha ...

angularjsselenium-webdriverprotractorautomated-tests

Exploring AngularJS and Angular 4's HTTP Requests

I am currently in the process of transitioning an app from AngularJS to Angular 4. One issue I am facing relates to HTTP requests. In AngularJS, I had the following call: $http.post('/get_paginate_items_with_search', params).success(function ( ...

angularjsangularhttpangular-httpclient

Highlighting Navbar Items

Can anyone provide advice on how to highlight a navbar item when clicked? I'm unsure if I should use Angular or CSS for this. Any guidance would be greatly appreciated. <div class="collapse navbar-collapse" id="navbarNav"> <ul class ...

cssangularbootstrap-4angular-ui-bootstrap

Item within text box remains untouched

I am working with a 1) Text field 2) Drop down list 3) List box I have written code to add the selected value from the drop down list to the list box and text field, but I'm having trouble removing the value from the text field. Can someone please he ...

htmlasp.net

What could be causing my anchored link to redirect incorrectly?

My navigation bar correctly directs me to the 'work' section, but when I click on ABOUT in the navigation bar, it drops down about 300px above the 'about' h2. I suspect that this issue may be related to positioning and display settings. ...

csshtmlposition

Lint error: Unrecognized attribute 'text-fill-color' in CSS (unknown properties)

My navigation bar isn't functioning, and I can't figure out why. It seems like it might be related to this snippet of code: -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: trans ...

cssvisual-studio-code

Having issues with regEX functionality in an Angular form

I need to validate a phone number using regEX. My criteria is as follows: 10 digits alpha/numeric, where an Alpha CHAR is in the 4th position (excluding hyphens). For example: 586R410056  NNN ANN NNNN  (NNN) ANN NNNN  NNN-ANN-NNNN  (NNN) AN ...

javascriptangularjsregex

What is the best method to remove the gap between my two horizontal div elements?

Is there a way to eliminate the small space between my two horizontal sections here? I've already attempted using margin: 0px; and padding: 0px; on the container, but it doesn't seem to be effective. Any assistance would be greatly appreciated! ...

htmlcss

Adjust the appearance of a button with Jquery Ajax to reflect a color fetched from an external PHP script

This piece of code represents my HTML: <form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST"> <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/> <button id="addtowatchlistb ...

javascriptphpjqueryhtmlajax

Pop-up website opening with fixed dimensions error

On my webpage, I have a terminal where you can type commands and receive output. For example, typing "/unsolvedproblems" displays a list of unsolved problems with a hyperlink. I've been trying to make the hyperlink open in a popup window with a fixed ...

javascripthtmlhyperlinkpopup

Experiencing difficulties with setting the width of owl carousel

Here is the HTML code snippet: <div class="row"> <div class="col-lg-7 col-sm-6"> <div class="owl-carousel" id="homeCarousel"> <div class="item"> <img src="images/brela.jpg" alt="brela makarska"> </d ...

htmlcss

What is the best way to set the keyframes CSS value for an element to 0%?

Would like to create a progress indicator div using CSS animations? Check out the JSBin link provided. The desired behavior is to have the div width increase from 30% to 100% when the user clicks on stage3 after stage1, rather than starting from 0%. Althou ...

javascriptcsshtmlcss-animations

AngularJS Expression Manipulation

I am looking to implement a functionality similar to the one below: HTML <mydir> {{config = {type: 'X', options: 'y'}} </mydir> <mydir> {{config = {type: 'a', options: 'b'}} </mydir> JS Dir ...

htmlangularjsangularjs-directiveangularjs-controller

What is the best method to send the HTML button ID to a Python file through Django?

I have the following HTML code snippet that generates dynamic buttons: {% for i in loop_times %} <button type="submit" class="'btn btn-lg" name="{{ i }}" id="{{ i }}" onclick="alert(this.id)" formmethod="post"><a href="{% url 'button ...

javascriptpythonhtmldjango

The hover effect is not altering the color

$(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 200) { $(".nav-bg").css({ "background": "#fff", ...

javascriptjquerycss

The functionality of Jquery AJAX is operational, however, the message being displayed appears to

Inside the file changename.php, there is a DIV element: <div id="resultDiv"></div> Within the same file, PHP code can be found: <?php include_once ('connect.php'); if(isset($_POST['name'])) { $postedname = $_POST[&ap ...

javascriptphpjqueryhtmlajax

Position the larger element in the center of the smaller container element

Is there a way to center an image without it covering up the paragraph below? Using position: absolute; or float: left; can lead to layout issues. <p>This is the first paragraph</p> <p><img src="http://placekitten.com/600/280"/>&l ...

htmlcss

Modifying HTML code within a WebView (Monodroid) explained

WebView webView = FindViewById<WebView>(Resource.Id.webView1); webView.HorizontalScrollBarEnabled = false; webView.LoadUrl("res.htm"); I am looking for a way to modify certain parts of HTML code in my file and display it using webView without actual ...

c#androidhtmlxamarin.android

The Glyphicon icon fails to appear on the initial page load and only shows up after refreshing the

I have been utilizing bootstrap.min.css from bootstrap v3.3.5 which I downloaded from http://getbootstrap.com and used it locally. However, I encountered an issue with glyphicons when running it on IE 9 and above. The glyphicon icon disappears on the first ...

javascriptjqueryhtmlcsstwitter-bootstrap

What sets apart !$scope.variableName from $scope.variableName in AngularJS?

Greetings to all my fellow coders! As a newcomer in the field, I often find myself pondering over things like this. Would someone be kind enough to elucidate the dissimilarity between these two elements in AngularJs? $scope.variableName and !$scope.var ...

javascriptangularjs