I'm using Ionic and flexbox for the first time and I'm strugling to organize my layout.
I'm trying to do a vertical menu where the user can select one topic. Each topic has his own subtopics. If one topic is selected a new row should appear with the related subtopics. The topics should be listed side by side.
The problem is...
I'm using a row and col-50 to draw the topics side by side, and adding another row inside each col-50 with a col-100. The subtopics row becomes restricted by the parent col-50, not using the 100% width.
What is the easiest way to solve this problem?
i find it this, maybe you looking for ionic menu using flexbox
It is complete, i apply this for my project ionic menu with flexbox
This my menu
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
});
Related
I have a grid of accordions like in the codesandbox below. The problem is when I open one of the accordions, it pushes down all the accordions in the row below, whereas the desired behaviour is to just push down the accordion right below it and the other accordions in the lower row staying in the same place. What needs to be changed in the following code to get this effect?
https://codesandbox.io/s/basicaccordion-demo-material-ui-forked-sw4juk?file=/demo.tsx
You can utilize the power of the Grid component to get your desired behavior. Nesting grids within grids is the magic sauce:
To do this with the material Grid component, the layout will need to be as such:
EXAMPLE (I forked your sandbox)
I have a search suggestion component that is displayed under a TextField. whenever text is entered into the TextField the search suggestion component displays a list of possible matches based on the current entered text... I have more content under the TextField that gets pushed to the bottom whenever the Search suggestion gets populated with results. Is there any way to overlay the search suggestions over the content underneath it instead of pushing the content down? in HTML/css I would apply the position absolute and z-index css properties to the search suggestion component but this doesn't seem to be the case in Nativescript. I see that Nativescript does support the z-index css property but just applying that doesn't seem to do anything. It doesn't look like Nativescript supports the position property... Any idea how I can make this work/what i'm missing?
You have a couple quick options. One is to use a grid as mentioned in the comments. Set the views on the same row/col. This is the same as stacking views on the z axis. Or an absolute layout and use the same positioning of the views within that layout.
In my air app I have a list(vertical) on the left side, like a sidebar. It`s working fine! The things is I want to put some animation in this list, which all the times when I select one item all the list moves, and this item goes to the center of the list!
Someone have same example or URL, or something?
Thanks!
I've done something similar using the AnimateProperty effect to animate the scrolling of a list to a given index.
See my blog post here:
http://flexdevtips.blogspot.com/2011/01/animated-scrolling-list.html
I'm trying to make a Flex (Advanced)DataGrid component with some mechanism where the user can toggle the visibility of the columns. I've crudely implemented this by reading in the columns into the right-click menu, and when a column name is selected here, the visibility is toggled. It works, but it's not the most elegant solution.
Specifically, I'm trying to emulate the "datagrid" that Mozilla Thunderbird uses to display emails. Here is an image:
In the upper right, there is an icon over the scroll bar. If there is no scrollbar, the icon remains in the same place. When clicking the icon, it opens up a menu that shows all the possible columns, with the visible ones having a check mark next to them, like this:
Also, the scroll bar always appears under this button, never "pushing" it over into it's own column.
I'd like to re-create this in Flex. I believe the menu part and creating a column with a button headerRenderer is easy enough. But I can't figure out how (if at all possible) to do this with the scrollbar, because the scrollbar always seems to be "its own column". Any ideas or help would be appreciated. Thank you.
Ian
One dirty solution comes to mind. Create a component based on Canvas, then add an AdvancedDataGrid by overriding createChildren. Override updateDisplayList as well and add a button like the one in Thunderbird to the upper right of the Canvas. This will cause the button to appear over the DataGrid. Problemo solved?
In flex 4 I'm using a PopUpButton with a Menu populated with records from the database.
For one of our clients, the data provider of the Menu has more than 50 elements.
When they click on the Menu it expands beyond the height of the screen without showing a scroller or responding to the mouse-wheel. So in effect there is no way to access the lower items on the menu.
So I need to somehow restrict the height of the menu and add a scroller.
The rowCount and maxHeight commands are having no effect.
var companyContextMenu:Menu=new Menu();
companyContextMenu.maxHeight=400;
companyContextMenu.rowCount=20;
The same code was working fine before migrating to Flex 4.
Any help is much appreciated.
In Flex there is a big different regarding scrollbars between version 3 and 4.
First, please don't mix the halos and the sparks.
Then put a scroller-Tag around the menu, that should become a scroller.
Just the container Group, DataGroup, VGroup, HGroup and TitleGroup implement IViewport and can handle the scoller-tag ouround them.
So, put your menu in one of the container above. Is this not handle for you, please post your code.
BR
Frank