Showing items using Angular2 ng-bootstrap NgbPagination - pagination

I want to show a list of items using Angular2 ng-bootstrap NgbPagination in my angular application. Each page has 6 items(3 in top and 3 in the bottom).
Anyone, please give an example for showing items using this ng-bootstrap NgbPagination

Related

Accessibility: v-dialog in Vuetify showing element as having role="document" instead of role="dialog

I am building a v-dialog https://vuetifyjs.com/en/components/dialogs/ using Vuetify.
Though when I inspect the element in the browser it says the role of the dialog is role="document" instead of role="dialog". Does anyone have an idea why?
Here is a screenshot of the v-dialog element
Here is a bigger screenshot of the dialog

How to find xpath of js rendered element for puppeteer

Im trying to interact with a js rendered page. Essentially this is a free widget from tradingview; however, the color of the lines is not something I can change. (yes there is an override, however, it only affects 1 line) I need to be able to change 2 lines.
Trading View Advanced Chart Widget Constructor
Can anyone tell me if this is possible with a puppeteer? How can I get XPath for an element which is generated by JS? View source and developer tools do not provide any xpaths to the elements.

material menu alignment get displayed horizontally when first open and vertically ( as expected ) when refresh

I created react app with a node server and build it with npm run build.
when I first run the app , the material menuItems get displayed horizontally. It's only when I refresh the page that the menuItems appear verticaly as expected .
any idea aboiut what could be the origin of this issue.
The issue doesn't appear in development . it's after building it that it appear.
issue_screenshot

Custom header component be cropped after updating ag-grid to the latest version

Within an angular 9 app. I'm using the ag-grid and I decided to update it from 21.2.2 to 24.0.0 version.
What I realized though is that it stopped render the custom header components properly.
For example I'm attaching two images that show how it looks like before and after.
Before:
After:
As you can see, after update the height of the header doesn't seem to follow the height of the custom components and as a result the plots are getting cropped.
Any ideas on what could cause this issue or what I can look for would be very helpful.

SPA approach not working if page contains b:carousel

Environment:
I'm writing a SPA with JSF2.2, Bootsfaces 0.9.1, Primefaces 6.0, JEE7 and Hibernate 5.2 in combination with MySQL 5.7 DB.
What I have:
My SPA has a navbar on the upper part and a specific menu based on the selection of the navbar on the left. On the right side and under the navbar I've my main "content page". Similar to this picture but with the difference that my menu is dynamic:
For updating the content page I'm using AJAX.
Everything around the navigation is working as I expected as long as my content page does not contain a b:carousel!
What I tried to do:
As I mentioned above my SPA and all navigation is working correctly unless I add a b:carousel to a content page.
Please consider following example:
I got 2 content pages. Page 1 contains a single label with some text. Page 2 contains a b:carousel with some images. Page 1 is the welcome page.
As soon as I navigate from page 1 to page 2 nothing happens. I need to completely refresh the whole page to see page 2 and even this is not working everytime.
My main question:
Is there any trick to update the content page with ajax if there's a b:carousel on it?
What am I doing wrong?
EDIT:
I created a sample project on github so you're able to see what I mean. I used Java 1.8, Tomcat 8.0.36 and Netbeans IDE, however the project is a Maven project an should work in eclipse, too.
Project: https://github.com/mweber96/stackoverflow39128418
SPA Approach I partly used: http://www.beyondjava.net/blog/single-page-applications-with-bootsfaces/
This question is related to my previous question: Use ui:repeat with b:carousel?
It's a combination of two bugs:
Your example at GitHub uses PrimeFaces, but it doesn't seem to use a PrimeFaces component. The effect is that PrimeFaces adds some fancy JavaScript to load the missing CSS files dynamically (which is great!), but it doesn't add the PrimeFaces core library, so Mojarra runs into an exception it silently hides. You can fix this by adding a (possibly hidden) PrimeFaces component to your page, by including the PrimeFaces core.js file directly (although I wouldn't recommend that) or - of course - by removing the PrimeFaces dependency if you really don't need it.
BootsFaces relies on the HTML attributes to initialize the carousel. To my surprise, this even works, at least partially. However, to start the sliding automatically, you still need to initialize the JavaScript widget manually. In your case, that's
$("#myCarousel").carousel();
BTW, I suggest you open a bug on our bug tracker to fix the latter point (https://github.com/TheCoder4eu/BootsFaces-OSP/issues). Thanks in advance!

Resources