Strict mode does not permit the use of octal literals

I am currently working with Angular 2.

When I incorporate this code in my SCSS file, everything runs smoothly.

.text::after {
  content: "\00a0\00a0";
}

However, if I move it to the 

styles: [``]

I encounter the error:

Uncaught SyntaxError: Octal literals are not allowed in strict mode.

I understand that the code within styles: [``] should be CSS syntax.

I attempted the following: 

styles: [`
    .text::after {
      content: "  ";
    }
`]

However, this displays    as text on the screen. How can I correct this issue?

javascriptcssangular

Answer №1

Make sure to properly format it

.text::after {
  content: "\\00a0\\00a0";  // Transforming into a straightforward text string
}

The use of "use strict" was included as a new feature in JavaScript 1.8.5 (ECMAScript version 5).

Here are some rules:

  • Octal numeric literals are no longer permitted
  • Escape characters are also restricted
  • Read more...

Answer №2

Another option is to include the u symbol for unicode before using the backslash (\).

.text::after {
    content: "\u00a0\u00a0"
}

Answer №3

An issue has been identified with the \00a0 value, as it is not in octal format (octal characters range from 0-7). Instead, it appears to be a hexadecimal number. To address this problem, consider using the following code snippet:

.text::after {
  content: "\x00a0\x00a0";
}

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

Exploring Angular.js methods to capture values from check boxes and radio buttons simultaneously

Check out my demo at https://embed.plnkr.co/R4mdZr/ Just diving into the world of Angular, I'm looking to retrieve both true values from checkboxes and radio button selections. I have a condition where if the minimum value for ingredients is one, it ...

javascriptangularjscheckboxradio-button

Is the CSS code example provided on the JSXGraph website functioning correctly?

I did my best to replicate this example from the JSXGraph website: Below is the condensed HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Covid Sandbox</title> < ...

javascripthtmljquerycssjsxgraph

When Angular 2 Routing Fails to Function on an Http Server Deployment

Planning to create a basic Angular 2 application? Start by setting up a project with routing using Angular CLI, and don't forget to add components using the 'ng generate component' command. Next, specify your routes in the app-routing.module ...

angularnpmangular2-routingangular-cliangular2-template

Using Clojure Hiccup for crafting stylish information in a unique manner

I want to create CSS style using hiccup by specifying the "top" and "left" variables to position an element. Currently, my code looks like this: (html [:div {:style (str "top" top ";left" left)} "some text"]) The code above is not very clean. It ...

cssclojurehiccup

Is there a way to dynamically change select2 styling using code when a form is submitted?

Having trouble highlighting empty select2 selects when a form is submitted? I'm struggling to override my existing CSS styling upon document load. Check out my jQuery attempt: var $requiredUnfilledItems = $(".required:not(.filled)"); if ($requiredUn ...

jquerycsscss-selectorsjquery-select2

Automatically executing a JavaScript function

I stumbled upon a javascript function that can reverse colors on a webpage: String javascript = "javascript: (function (){var newSS, styles = '* { background-color: black ! important; color: green !important; }a:link, a:link * { color: green !importa ...

javascripthtmlurl

Unable to save a dynamic FormArray within a FormGroup

My FormGroup consists of three FormControl fields and one FormArray field, as shown in the figure below. I need to collect the manager's name from the user. When the add button is clicked, the manager details should be displayed in a table. In the tab ...

htmlangulartypescriptangular6formarray

Center-align text points on a webpage using a bootstrap theme

Using the bootstrap creative theme, I am attempting to create a list of points with the md-bootstrap check fa icon. Here is how it currently appears: https://i.sstatic.net/7cgbG.jpg My goal is to center the text on the page while aligning the start of e ...

htmlcssbootstrap-4

Using NodeJS alongside websocket and the module.export feature

I currently have a server.js file where I have defined my routes as follows: // routes var mainRoutes = require('./routes/main.js')(app, express); var apiRoutes = require('./routes/api.js')(app, express); var socketRoutes = requir ...

javascriptnode.jswebsocket

Tips for aligning text to the right and keeping it in line with another section

I have a code snippet and I'm aiming to align the caption for my "DigDug" game directly below the game itself, perfectly lined up horizontally. The id for the caption is "#DigCaption" and the id for the game is "#DigDug". Could anyone provide guidance ...

htmlcss

Is there a way to confirm if the target has been successfully removed from the element using jQuery?

$(".dropdown-toggle").click(function(event) { var target = $(event.target); if (target.is(this)) { $(this).find(".caret").toggleClass("customcaret"); } }); <div class="dropdown-toggle"> <div class="caret"></div> </div> ...

javascriptjquery

What is the event that occurs when someone tries to power off a mobile device in Nativescript?

Currently working on creating a cross-platform app with Angular and Nativescript. I'm looking to gather the battery percentage of a mobile device right before it is turned off. I've managed to get hold of a Nativescript plugin for monitoring bat ...

angularmobilecross-platformnativescript

Angular: Deciding Between Utilizing Boolean @Input and Attribute @Directive - What's the Best Approach?

My goal with Angular is to create a "directive" that can add functionality to my component, specifically adding a myPortlet with a close button when using the directive myHasCloseButton. <myPortlet myHasCloseButton>...</myPortlet> In explori ...

javascriptangulartypescriptangular-directiveangular-components

Truncating text with ellipsis in CSS when wrapping on a nested div structure

Here is a 3-tier nested div tree structure with the outer node having a maximum width where I want the ellipsis wrapping to occur. I've almost achieved the desired result, but the issue arises when the inner nodes are not trimmed to accommodate as mu ...

htmlcssoverflowword-wrap

Issue with Angular table display cell overloading(produces excessive rendering of cells)

In my project, I am working with 3 arrays of data - DATA_CENT, DATA_NORTH, and DATA_WEST. Each of these arrays contains another array called data, which I need to extract and display in a table format. For each new column, I create a new table and then po ...

javascripthtmlcssangular

Tips for showing field name from database in autocomplete textbox with ajax

When attempting to display items from a specific field by entering the first letter of the field into an autocomplete textbox, I encounter an issue. Instead of showing the expected results, random letters appear. Can someone please assist me with this prob ...

javascriptphpjqueryajax

What is the reason for dirname not being a module attribute? (using the __ notation)

Currently, I am learning the fundamentals of Node.js. Based on the documentation, both __dirname and __filename are part of the module scope. As anticipated, when I use them like this: console.log(__dirname) console.log(__filename) They work correctly, d ...

javascriptnode.js

When the flex-grow property is set to 1, the height of the div extends beyond the space that

Here is an example of some HTML code: .container { height: 100%; width: 100%; display: flex; flex-direction: column; padding: 10px; background-color: aqua; } .box { width: 100%; height: 100%; flex-grow: 1; background-color: cadetb ...

htmlcssangularflexbox

NextJS not maintaining state for current user in Firebase

I'm working on an app utilizing firebase and nextjs. I've set up a login page, but when I try to retrieve the current user, it returns undefined. This issue began a few days ago while working in react native as well - initially, it was related to ...

javascriptfirebasenext.jsfirebase-authentication

What's the best way to vertically center text in a div with overflow hidden?

In my ASP GridView, I am trying to display a table with a fixed number of lines in each TD element. To achieve this, I have decided to place a div inside each TD so that I can customize the height and layout. table.XDataGridView td div.inner-table-div { h ...

htmlcssasp.net