Text being enveloped in a span tag

Currently, I have a table displaying a list of users with their corresponding roles. However, the roles column is sometimes wrapping before reaching the end of the line.

The user list data looks like this:

$scope.userList = [{
    "id": 1,
    "name":"ABC",
    roles:["Task Manager","Monitoring" ,"Client Admin","User Admin","Employees","Manager","Production","planner"]
  }, {
   "id": 1,
    "name": "ABC",
    roles:["Task Manager","Monitoring","Planner","Employees","Production","Analysis","Incident"]
  }, {
   "id": 1,
    "name": "ABC"
  }, {
    "id": 1,
    "name":" ABC"
  }];

When displayed in the table:

<tr ng-repeat="user in userList" >
    <td >
        <span id="userId{{$index + 1}}" ng-bind="user.id"></span>
    </td>
    <td >
        <span id="userFirstName{{$index + 1}}" ng-bind="user.name"></span>
    </td>

    <td ><span  ng-repeat="rol in user.roles track by $index"><span ng-if="$index > 0">,&nbsp;</span>{{rol}}</span>
    </td>
</tr>

The issue arises when the Roles column values do not display in a single line as desired. The goal is to wrap the content only after each span element.

To better illustrate the problem, you can view an example plunker here.

In the provided example, notice how the Role column value for Task Manager in the second row appears on a separate line.

Answer №1

Enhance the appearance of "td span" with unique style:

td span {
text-decoration: underline;
font-weight: bold;
}

Additionally, include the following snippet:

table {
border-collapse: collapse;
}

Answer №2

Insert this code into index.html

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="hz">
  <div ng-controller="ceilometerCtrl">
    <div id="ceilometer-stats">
         <table border=1 class="table table-striped table-condensed table-hover table-bordered main-table docTable" style="table-layout:fixed">                                
                                <thead>
                                    <tr>
                                        <th style="width: 5%;">User ID</th>
                                        <th style="width: 10%;">Username</th>
                                        <th style="width: 50%;">Roles</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="user in userList" >
                                        <td >
                                            <span id="userId{{$index + 1}}" ng-bind="user.id"></span>
                                        </td>
                                        <td >
                                            <span id="userFirstName{{$index + 1}}" ng-bind="user.name"></span>
                                        </td>

                                        <td >
<!--                                           <span>{{user.roles.toString()}}</span>
 -->                                            <span  ng-repeat="rol in user.roles track by $index"><span ng-if="$index > 0"></span> {{rol}},</span>
                                            </td>
                                </tr>
                                </tbody>
                            </table>
    </div>

  </div>

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

Numerous sections of content

Struggling to align these two pieces of content side by side. While I've had success displaying content like this in the past, I'm hitting a roadblock this time around. Any assistance would be greatly appreciated. HTML <div class="block-one" ...

How can I align the isometric camera in THREE.js to the center of a cube?

Hey there, I'm working on a tricky exercise involving setting up a camera and cube with THREE.js. The goal is to maintain the cube's initial ratio while ensuring the camera is focused on the center of the cube. Although I believe I've succes ...

AngularJS: Automatically populate search field in Cloudinary upload tool

I have successfully integrated the cloudinary upload widget v2.0 into my angular app by creating a service to handle backend Cloudinary calls and a directive to link the upload widget to specific buttons. Everything is functioning as expected so far, but ...

Sliding elements horizontally with jQuery from right to left

I recently purchased a WordPress theme and I'm looking to customize the JavaScript behavior when the page loads. Currently, my titles animate from top to bottom but I want to change this behavior dynamically. You can view it in action here: I have ...

When the jQuery button is clicked, the execute function will run multiple times

I am attempting to create a button using jQuery that calls a JavaScript function, but I am facing an issue : Upon loading the page, the first click on mybutton does not elicit any response The second click results in the function being executed twice On ...

The error in ReactJS is coming from the render method of the `News` component

While working with React JS, I encountered an error when trying to run a particular code snippet. The error message displayed was: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got ...

Resize the div blocks by scaling the button placed beneath them

I decided to modify the g-recaptcha widget to fit my specific requirements, and it is working flawlessly. However, I noticed that the ng-click button directly beneath it is no longer responsive. The reason behind this issue eludes me. Here is a snippet of ...

Tips for escaping an infinite loop within the componentDidUpdate function in reactjs

Currently, I am working on creating dashboards using reactjs. I have successfully implemented 4 tabs or buttons for charts, but I am facing an issue when clicking on different dashboards that have the same chart in the same panel. The chart is not updating ...

Vue is set up to monitor changes in two connected input fields for user input exclusively

Two input fields are available, where the value of one can affect the other. If a value between 1 and 200 is entered in the level field, Vue will look up the corresponding points for that level and populate the points field with them. Conversely, if a us ...

Recursive function: the process of storing numerous values in variables

There is a code snippet showcasing a recursive function designed to take a number, for example n=5, and produce an array counting down from n to 1 (i.e., [5,4,3,2,1]). The point of confusion arises just before the numbers/values of n are added to countArr ...

Concealing a hyperlink based on the login status of a particular customer using PHP

I'm relatively new to coding and I'm encountering some difficulty in finding a solution to what seems like a simple problem. My issue revolves around hiding a link if a specific client is logged in. Let me provide some context: On our website, c ...

spaces between sections with no padding or borders

I came across the following layout on the web and noticed that the divs do not align perfectly. The top of a lower div does not touch the bottom of the div above it when borders are removed, although they do when borders are added. There seems to be an i ...

Modifying the HTML content of a span element does not always initialize all of its properties

I've been working on setting up a comments-reply system for my website. I have all the necessary PHP files in place, but I'm facing an issue with updating the vote counts dynamically. In the image provided, you can see that upon voting once, I a ...

The Reliability of Using CSS Pixel Font Sizes

Imagine I need to display two capital 'T's, each exactly one inch tall. One 'T' appears on a Macbook Pro with Retina Display (220 DPI, CSS pixel ratio 2), and the other on an iPhone 4S (326 DPI, CSS pixel ratio 2). To achieve this, I se ...

Create dynamic animations for HTML lists with seamless transitions

I am looking to create a smooth animation effect for an HTML list that moves from left to right and vice versa with a fixed length. The issue I am encountering is that when I click on the right button, it is replacing the list elements instead of animating ...

Creating a pluggable application in Node.js: A step-by-step guide

I am embarking on creating a Node.js and Express CMS with the following folder structure: MyCMS plugins themes uploads index.js I aim to load plugins from the plugins folder: plugins sample-plugin awesome-plugin ...

Unique Custom Resources like CSS and JavaScript are used to ensure a consistent appearance across all applications

We have identified a challenge where we aim to develop custom CSS, Javascripts and other resources to maintain consistent look and feel across all our applications. These applications could be built using GWT, Thingworx, JSP, etc., and may differ in natur ...

Display a particular element when hovered over

Is there a way to make only individual elements pop up on hover instead of all of them at once? items: [{ item: "Book", info: "Lorem ipsum", displayInfo: false }, { item: "Pen", info: "Lorem ipsum", displayInfo: false }, ...

Steps for adjusting the matMenuTriggerFor area so it only triggers when hovering over the arrow

Hello there! I'm currently working on adjusting the trigger area for opening the next menu panel. Right now, the next menu panel opens whenever I hover over either the title or the arrow. However, my goal is to have the menu open only when I hover ove ...

What causes an :before content element positioned absolutely to exceed the boundaries of its parent when set as an inline element?

Check out this CodePen: https://codepen.io/jossnaz/pen/BMwpjR HTML <br> <div class="" style=" "> <span class="" style=""> Lorem ipsum nunc hendrerit imperdiet aliquet class massa suspendisse libero, enim condimentum himenaeos h ...