Convert 2 columns to 4 columns on angular material - flexbox

I am using angular material. That uses flex.
I need to have 2 columns on mobile and 4 columns on desktop.
Because some cards are expandable, that means that will have different height, the order doesn't matter to much.
I tried different configurations but without success. Is it possible to do this with flexbox?

you can use fxFlex.lg="25" fxFlex.xs="50" for responsive as per screen size.
for more information use flex layout doc

Related

nested collapsible container in drawio?

I'm wondering if it's possible to nest collapsible containers? In the picture below I have a container containing various lists of text organised in "sections"; it'd be great to be able to collapse the sections individually as well.
Related query, since I'm creating those boxes programmatically – is it possible to create the text content programmatically and not need to position them with absolute y positions? With the user interface I can just add a new text box and it automatically stacks below the current one, and the container expands. If I create those with a script it seems I need to provide the y positions and sizes myself.
you could try adding a new container for every section (as shown in the attachment) and check if it suits your needs. I created a simple test diagram, it could be improved visually.
nested containers

How to apply different filters to each page in Spotfire Web Player?

I am trying to figure out how to apply different filtering schemas for each page in an Analysis file in Spotfire Web Player/Consumer.
I have found that the Spotfire Analyst supports that (see image below) and I can create different Filtering schemas and apply them for each page:
However, the Spotfire Web Player does not seem to have such an option. I have checked the JavaScript API (link) but I cannot seem to find if there is such an option supported in the web player. Could anyone please share their experience if you know how that can be achieved
Have you tried putting the desired filters in a text area? Is there a reason the user has to use the filter panel?
In a text area filter you can specify your filtering scheme. Note I'm in 7.13 not X.

AngularJS change multiple partials per request

I am new in node.js and Angular and I am creating a web application.
At the moment I have the following design of my application - the screen is separeted by three columns - the left one is my menu and both middle and right columns are used to display the content. Sometimes when I click some of the elements in the menu I want to change only the middle column, if I click another menu element I want to change the partial in the right column and in other cases I want to change both middle and right columns per click in the menu.
I can't use ng:view because it doesn't allow me to use multiple ng:view elements. So I am wondering what is the best decision here. At the moment I am using ng:hide but it is not a good desicion. In the end I will have maybe 20 variables in my application which values I should update after every request.
Thanks!
Angular 1.x has a pretty limited router. Use better alternative UI-Router which allows you to have multiple views.

multiple sliders on a single page

all. I have noticed that almost every single sample slider gallery out there uses IDs to identify their gallery div. Is there a way to easily change these to accept classes? Or what options do I have to make more than one slider on a page. I tried with many of them and they didn't work... Don't ask which ones because I have got no idea, after about the 15th one I didn't bother trying to remember what it was called.
So yeah, what sliders are there that are able to be on a single page more than once?
Check this out. This is a Slider that I have actually used in my own website. This one doesn't use ID's but Classes. Trying to change all the ID's to classes in a slider that uses ID's could be a nightmare.
All you will do is just modify this so that there is two sliders on one page and that should do it.
http://plugins.jquery.com/jcarousel/
Hope this helps

How accessible are dropdown lists on mobile devices?

I am developing as site for mobile devices which requires the user to select a product (there are ~70 in total). I however do not have a testing device with me at the moment (I am also currently on a Mac and do not know of any mobile browser emulators for Macs).
My question is, would a drop down list of length ~70 be way too long? How hard would it be for a user to select an option from it (assuming there is nothing else on the page)? For the sake of argument, how hard would it be to navigate it on the iPhone and the BlackBerry (those are the two most important browsers for me at the moment)?
I would rather not split up the list for the sake of simplicity but I guess I can if necessary. Does anyone have any better ideas for splitting up the list/displaying the form on a mobile device?
For some insight into why I want a drop down list like this, it is so that users can select 2 products (two lists) and the site will return whether or not they are compatible with each other.
I've had this issue with trying to present country codes or airports in mobile web apps. It does work just fine (especially on iPhone & BB), but you should do as much as you can to make the selection easier. We did things like
Place the nearest airports (geographically) at top of the list
Remember last selection
Configure a short list of the most selected products and have these at top of list
This suggestions are based on the context of what the user is trying to do on our webapp. You will have different context with your own optimisations hopefully.
One suggestion for you is to switch your UI from two drop lists to two pages - on the first page display all the products as HTML links. When the user selects a product, navigate to the second page, but you can now populate that only page with products that are compatible with the product selected on the first page. Have a look at http://m.jetstar.com, go to the Booking Process and see how you selecte departure/arrival airports. It might work for you?
BTW - try http://www.iphonetester.com to get a sense of what your website will look like in the iPhone form factor.
Good luck!

Resources