So I was working with accordion plugin for nativescript. This plugin works just fine if the template of the item is fixed. Unfortunately in the application that I am trying to make the template isn't fixed. In one expansion panels the children are a slider and a label but in another one the children are radio buttons and text boxes. I need help as to how do I go about making such an UI.
Thanks for your help in advance!!
PS : This is the link for accordion and the example is in demo folder: https://github.com/triniwiz/nativescript-accordion
For those who are facing the same problem I found out the solution. Instead of using accordion you should use the visibility attribute and toggle it accordingly.
Related
How can I implement a bootstrap popover on the custom button in the w2ui grid?
You dont have any code samples or extracts. So the simple answer would be to add the data-attributes dynamically with js then create an instance with the Bootstrap popover JS.
[https://getbootstrap.com/docs/5.0/components/popovers/#getorcreateinstance][1]
Again your question doesnt state wether the button is in a row or outside the grid, does it have a unique identifier?
Please elaborate more in order to get help. Also state what you have tried and what not.
I have been trying to build a multi-level vertical tabs with hidden content which gets visible by some jquery. It is working fine but with it has one problem.
Because of this code:
$(this).nextUntil("li.tabsclose").slideToggle();
When page loads for the first time, all the parent categories are shown but if you click on a category with some sub-categories, jquery hides everything until the next item with "tabsclose" class. Which is a problem because I have some Parent categories towards the end of the list.
Here is the jsfiddle: https://jsfiddle.net/ebf6cdpe/
Thank you very much for your help in advance!
SOLUTION:
After spending some considerable time on searching web, I have used if/else statement to be able to close parent tabs on re-click.
https://jsfiddle.net/ebf6cdpe/5/
This particular piece is causing all the Parent categories without subcategories to be hidden:
$('.subtabs').not(this).nextUntil(".subtabs").slideUp();
If you remove that, all the Parents without subcategories won't disappear permanently. However, there is still an issue with them temporarily disappearing when opening the subcategory.
You need to have a class that is applied to all your parents that you can use as a selector in this loop:
$(this).nextUntil("li.tabsclose").slideToggle();
I'm still not 100% sure this is the exact functionality you want, but here is an updated version:
https://jsfiddle.net/ebf6cdpe/1/
Whatever the case, you may be better off using nested lists for your subcategories. https://www.w3.org/wiki/HTML_lists
I use different list in one page with each list have some Option button,
you can take a look at my codepen : [http://codepen.io/harked/pen/WvMgXg][1]
If we swipe the first card, it will show the option button.
If we swipe the second card, it will also show the option button.
Is there any way to prevent Option-Button to show while the other in another card is showing?
I mean the problem is like this pict : http://www.nanonimos.com/IonOption.jpg
Anyone? It would be greatly appreciated.
It doesn't look like Ionic have a way to do this right now. What we need is a listener on the option buttons being display, at which point you can close all others, but that listener doesn't exist.
You could build custom functionality and listen for swipe events on each ion-list item, but this is likely to be a little buggy. Alternatively dig into the framework and try and emit a custom event on the same trigger than Ionic uses.
You probably have an ng-repeat when working with lists in Ionic. You can easily disable Option buttons using ng-show as in this codepen.
[http://codepen.io/anon/pen/vORyaz?editors=101']
How could I push my <li> elements along the nav container with a Bootstrap affix?
Here is an example of what I am trying to create:
http://www.autotrader.co.uk/
As you can see when you scroll down the page a JS event activates and the link elements slide along and a home button fades in. If you view this link:
http://www.dealerbyte.co.uk
You can see I have recreated the navbar however I am struggling create that pushing effect that Autotrader manages. I am using bootstrap and thought maybe an affix could achieve this but I'm not sure how to approach this?
Any tips would be awesome thanks!
Use "sticky-header". which will provide functionality to do the same.
I'm looking for a proper way to implement the jquery mobile filter list in bootstrap typeahead component.
The functionality that I needed is here in the following link. Please scroll down to the bottom. http://jquerymobile.com/demos/1.2.1/docs/lists/lists-inset.html
In the filtering list, I want to add checkboxes for each list items and the user should be able to check multiple value. They don't have to be added to the textfield. As that's the only function I need, its no use of adding the whole jquery mobile library to the project.
I found couple of options in the following link which goes near my requirement.
http://fusiongrokker.com/post/heavily-customizing-a-bootstrap-typeahead
But, the multiple selection by clicking checkboxes didn't work with bootstrap typeahead.
Can anyone give me a good solution for this.
Thanks
If you looking for bootstrap, this plugin can be used in your project
https://sliptree.github.io/bootstrap-tokenfield/
I saw following has been suggested in many places:
http://ivaynberg.github.io/select2/
(If you use the multi-value version.)