Animation of scrolling in a horizontal layout

Currently, I am utilizing ng-repeat 1.4 to dynamically generate elements within a div that has polymer shadow classes and uses the 'layout horizontal' style, resulting in code similar to:

<div class='layout horizontal'>
     <div ng-repeat="elements in forms"></div>
</div>

Although new elements are rendered smoothly at the right side of the previous one with focus, there is an abrupt appearance which makes scrollbars appear suddenly without any transition, causing a slightly chaotic visual effect. I would like to implement a smooth scrollbar movement.

I have included a sketch depicting the current situation: https://i.stack.imgur.com/pM9jD.png

To address this issue, my thoughts are:

  1. Avoid sudden movement to the new element.
  2. Gradually move the scrollbar from its previous position to the new one.

Are you aware of any transitions in Angular or Polymer that could accomplish this? Any ideas on how to achieve this desired effect?

htmlcssangularjspolymerpolymer-1.0

Answer №1

While I may not be familiar with angular and ng-repeat, it seems that the logical approach would be to handle it in a more traditional manner;

.horizontal
{
   width: 100%; /* or whatever width you prefer */
   overflow-x: scroll;
}

 /* clear floats for inner elements */
.horizontal:before{ clear: both; content: " " }
.horizontal:after{ clear: both; content: " " }

.horizontal .elements.in
{
   float: left; /* align horizontally */
   width: 500px; /* or your preferred inside elements width */
}

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

Tips for adjusting the scrollbar in Tailwind (next.js/react)

Having trouble changing the appearance of my scrollbar in a single page application using Tailwind (react/next). I've attempted to create custom CSS for the first div in my index file, like so: <div className="no-scroll"> <<< ...

cssreactjsnext.jstailwind-css

The behavior of AngularJS checkbox and ng-change is definitely puzzling

I am facing an issue with my array structure: { key : 'abc', color: 'Red', show: true } <div ng-repeat="x in myArray"> <input type="checkbox" ng-model="x" ng-change="changeShow($index)" checked="checked" /> ...

javascriptangularjs

Discovering the center of an element and implementing a left float

I'm looking for a way to dynamically position the element #ucp_arrow in the middle of a div using float: left. Here is an illustration: https://i.stack.imgur.com/nzvgb.png Currently, I have hard-coded it like this: JAVASCRIPT: $("#a_account").cli ...

javascriptjqueryhtmlcss

The CSS styling of Confluence content is stripped when exporting to Word

Greetings StackOverflow community, I have embarked on creating a document generator within Confluence 6.10.2 (utilizing JQuery 1.7.2) that offers a range of options for the user. Users are able to interact with checkboxes or radio buttons that trigger th ...

jqueryhtmlcssconfluenceexport-to-word

utilizing services across multiple controller files

Service - optionService.js controllers - app.js & welcomeCtrl.js & otherCtrl.js app.js var app = angular.module('mainapp', ['mainapp.welcome','optionServiceModule']); app.controller('mainappCtrl', functio ...

javascriptangularjsnode.jsangular-servicesangular-controller

AngularJS modal directives trigger a reset of $scope variables

I am developing a custom AngularJS application that needs to handle and store all the checkbox selections made by the user in a simple array of IDs. The functionality includes displaying a modal when the open button is clicked, allowing the user to perform ...

javascriptangularjsexpresspugangular-directive

Perform simple arithmetic operations between a number and a string using Angular within an HTML context

I'm stuck trying to find a straightforward solution to this problem. The array of objects I have contains two values: team.seed: number, team.placement: string In the team.placement, there are simple strings like 7 to indicate 7th place or something ...

javascripthtmlangular

Unique text: "Custom sorting of JavaScript objects in AngularJS using a special JavaScript order

I'm working with an array structured like this: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = { start: '10:00', end: '11:30' } var item3 = { start: '12:00& ...

javascriptangularjsarrays

The information in the table is spilling out beyond the boundaries

I'm facing an issue with my bootstrap table where if a field value is too long, the table extends past the container length. I tried using responsive-table to prevent this, but then a scroll bar appears at the bottom, making it difficult to view the d ...

htmlcssasp.net-mvctwitter-bootstrapdatatables

How to Build Two Navbars in BootstrapVue with a Sticky Bottom Navbar at the Top

My current project involves creating two navigation bars. The first navbar at the top consists of just a brand logo, while the second navbar at the bottom serves as the main navigation menu. I want the top navbar to scroll off the screen when users scroll ...

htmlcssvue.jsbootstrap-4bootstrap-vue

Converting PDF files to JSON in ASP.NET and transferring them to AngularJS using Base64 does not result in identical files

After encoding a PDF file as Base64 and assigning it to a property of my model object in ASP.NET WEB API, the JSON response is received by my AngularJS client application. However, upon saving the file, I noticed that the file size increases by one and 1/3 ...

asp.netjsonangularjspdfbase64

How to Customize Headers with Color and Size in MKDocs

In the following code, you'll find instructions for adjusting a dropdown menu that displays an image when expanded. The challenge is to reduce the size of the banner by half and remove the pencil icon on the left side. How can we modify the code so th ...

htmlmkdocs-material

Using CSS to apply alternating colors to span elements within children

My DOM structure is generated by a JS framework and may appear like this: span:nth-child(odd) { background-color: lightblue; } span { display: block; } <div id="parent"> <div class="child"> <span>Some text to color in alte ...

htmlcss

Dynamically fetching and uploading files from a specific path using Node.js, Express, and Angular 1.x

How can I upload or move all files from a specific folder using NodeJS, Express, and Angular 1.x by providing the folder path? What is the best way to handle this operation in either Angular or Node? Should I use: var fs = require('fs') module ...

javascriptangularjsnode.jsexpress

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

I am facing an issue with a tabbed menu on my webpage. While the menu is functioning correctly, I am struggling to remove the bottom border from the active tab. You can view all of my test code here. While I have come across solutions using <ul> an ...

javascripthtmlcss

JavaScript call to enlarge text upon click

I'm struggling to figure out why my font enlargement function isn't working as expected. Below is the code for my font enlargement function: <script type="text/javascript> function growText() { var text = document.getElementBy ...

javascripthtmlonclick

Having trouble getting a background image with tint to display properly in Bootstrap

I applied a sleek black transparent gradient to my body background picture, but as soon as I integrated bootstrap into the HTML code, the effect ceased to function. body { background: linear-gradient( rgba(0, 0, 0, 0.5), rgba ...

htmlcssbootstrap-4

Is there a way to customize the background color when the Bootstrap 4 toggle switch is in the "checked" position?

I'm struggling to find a way to adjust the background color of the "checked" state for this toggle switch in Bootstrap 4. It utilizes an additional library for toggling between dark and light modes - you can find it here on github. While that function ...

csscheckboxbootstrap-4

Utilizing JavaScript to add classes to a parent element

When a user clicks on a link, I want to add a class to the <li> tag that wraps around it. Here is an example: <ul> <li><a href="#">Just an Example</a></li> </ul> How can I target the <li> element enclosing ...

javascriptjqueryhtml

ng-options retrieve the referenced document and use its specified field as the value for populating the dropdown

Currently, I am utilizing meteor+angular to work on a project. The code below iterates through each document in the items collection. When a document with meal == true is encountered, the code then loops through the associated combos to generate dropdown m ...

angularjs