CSS: Placing items within an ng-for loop utilizing the "fixed" position property

<ul class="nav nav-pills nav-stacked" style="list-style: none">
        <li *ngFor="#el of dragZoneElems; #idx = index">
            <h4 style="position: fixed; top:'idx'*10" [dragResponder]="el">{{el.first}} {{el.last}}</h4>
        </li>
    </ul>

I am looking to fix the position of the h4 elements while still displaying them in a top-down order. These elements need to be draggable, hence the requirement for position:fixed. Any ideas on how I can achieve this? The current code snippet is not working for me.

cssangularjsangular

Answer №1

Check out this demo

<ul class="nav nav-pills nav-stacked" style="list-style: none">
   <li *ngFor = "#el of dragZoneElems; #idx = index">
          <h4 [style.position]="'fixed'" [style.top.px]="idx*10" [dragResponder] = "el">{{el.first}} {{el.last}}</h4>
   </li>
</ul>

Answer №2

Implementing ngStyle

<h4 [ngStyle]="{'position': 'fixed', 'top' : 'idx'* 10}" > ... </h4>

you can also use

<h4 [style.position]="'fixed'" [style.top]="'idx'* 10" > ... </h4>

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

Access to Angular component generation was denied due to EACCES permissions issue

Every time I attempt to create a new component for my Angular application, I immediately encounter a permission denied error without any clear explanation. The command that triggers this issue is ng g component heroes I have attempted to apply chmod -R 7 ...

angularangular-cli

Resolving conflicts between Bootstrap and custom CSS transitions: A guide to identifying and fixing conflicting styles

I am currently working on implementing a custom CSS transition in my project that is based on Bootstrap 3. The setup consists of a simple flex container containing an input field and a select field. The functionality involves using jQuery to apply a .hidde ...

javascripthtmljquerycsstwitter-bootstrap

Best Placement for sitemap.xml in an Angular Application Using HTML5 Mode

I have a unique setup where my Angular application with HTML5 mode is running on a Node.js server. I am utilizing PhantomJS to create snapshots and provide them to search engine bots. However, I am facing a dilemma regarding where to place the sitemap.xm ...

angularjsnode.jsseositemapgooglebot

Saving selected language in Angular using ngx-translate

I am facing an issue with ngx-translate for translation. Whenever I select a language, it gets saved in localStorage. However, upon refreshing the page or navigating to another page, it reverts back to the default keys instead of the selected language. Be ...

angularngx-translate

Troubleshooting a unique CSS bug in jQuery mouseover functionality

Check out this pen: https://codepen.io/anon/pen/eKzEVX?editors=1111 I recently created a Form Select in Laravel: {!! Form::select('status_id', $statuses, $post->status_id, ['class' => 'form-control post-sub-items-label &apo ...

javascriptjqueryhtmlcssmouseover

Angular routing is showing an undefined ID from the snapshot

When a user attempts to update a student, I pass in the student ID. The update successfully redirects to the updateStudent page and displays the student ID in the browser link. However, within my app component, it shows as undefined. Student View componen ...

angulartypescript

Incorporating fresh CSS styles through Selenium

I am attempting to showcase all the prices available on this page using Selenium and Chrome in order to capture a screenshot. By default, only 3 prices are visible. Is there a way to disable the slick-slider so that all 5 prices can be seen? I have tried r ...

pythoncssseleniumweb-scrapingslick.js

What is the process for creating a method within a class?

Here is the current structure of my class: export class Patient { constructor(public id: number, public name: string, public location: string, public bedId: number, public severity: string, public trajectory: number, public vitalSigns: ...

angulartypescript

The Google Map is not showing all the details

Our app is developed using ReactJS on Rails API, with a Google map integrated. However, when visiting this link and clicking "Map View", some grey space appears under the Google Map. An example image can be found here: example We are having trouble findi ...

javascriptcssreactjsgoogle-maps

Can someone explain why my button icons are not aligning to the center properly?

I have a small issue with the icons I pulled from react-icons - they appear slightly raised within the buttons. How can I position them in the middle? That's my only query, but I can't post it alone due to mostly having code in my post. What an ...

javascriptcssreactjs

Using Angular to implement conditional logic with ngSwitch

When the number is greater than 5, increase the font size to 50px using ngswitch in case. If the number is less than 2, set the font size to 15px. Unfortunately, I was unable to find a suitable syntax for this scenario, hence no code provided here. ...

angularng-switch

Prevent the layout from shifting with CSS

I am faced with a challenge regarding a grid of images that are dynamically generated on the screen. The number of images in each row of the grid is dependent on the size of the page. While everything functions properly when the page is at a certain size, ...

htmlcss

Best approach for managing Union Types in Angular 16 Templates / Utilizing Type Inference?

Currently, I'm immersed in a project using Angular 16 where my focus lies on applying a reactive declarative method. Oftentimes, I find myself working with Observables that emit varying data types - either successful data or an error object. Each ret ...

angulartypescriptrxjscastingtypeerror

What are some effective strategies to ensure my header is aligned properly on both mobile and desktop platforms?

While I'm more focused on back end web development, I've been struggling to make my header look good on both mobile and desktop without resorting to creating separate sites for each. This approach has proven to be cumbersome as maintaining two si ...

htmlcss

A simple method for bulk editing in Angular UI Grid

Is there a way to enable mass editing in Angular UI Grid by allowing all rows to show editable input fields at once, rather than just one at a time? I have searched online for a solution without success and am now turning to this forum for help. If anyone ...

javascriptangularjsangular-ui-grid

The Ion-button seems to be malfunctioning

I am interested in using special buttons for my ionic 1 project, specifically the ion-button feature outlined on this page: Ionic Buttons. I attempted to create a Round Button and an Outline + Round Button: <h2 class="sub-header" style="color:#4 ...

javascriptcssbuttonionic-framework

Combining jQuery and CSS for seamless background image and z-index chaining

I am facing an issue where I need to add a background image within a div containing a generated image with the class .result. Despite my attempts, I have not been successful in displaying the background image correctly. The code snippet I used is as follow ...

jquerycssbackground-imagez-indexjquery-chaining

I need to improve my grasp on AngularJS Scope concept

Creating a simple example to demonstrate different behavior, I nested two div tags and named their controllers ParentController and ChildController. The same variable ($scope.mydata) was assigned to both. I expected that modifying the child would only aff ...

angularjsangularjs-scope

Angular 8: ISSUE TypeError: Unable to access the 'invalid' property of an undefined variable

Can someone please explain the meaning of this error message? I'm new to Angular and currently using Angular 8. This error is appearing on my console. ERROR TypeError: Cannot read property 'invalid' of undefined at Object.eval [as updat ...

htmlangulartypescriptwebangular8

Karma issue: The application myApp has not been defined

Currently, I am attempting to run tests on the Angular seed project using a fresh installation of Karma in a separate directory. I have not made any modifications to the Angular seed project. However, I am encountering an issue where both myApp and myApp.V ...

angularjsunit-testingjasminekarma-runnerkarma-jasmine