I am developing an application which shows images in ons-list (each image in one ons-list-item)
Each image has different height, so I cannot set the height of the item to something fixed, as well as I cannot set the height of the ons-list-item to be dynamic. I've tried setting overflow:auto but i doesn't affect. Any Idea?
I found the solution in case of others having same question
setting display style on list-item as below
<ons-list-item style="display: table;"></ons-list-item>
Related
I want to achieve this in Onsen UI:
Notice taller toolbar than standard, white overlay burger menu icon (for the standard element) and no bottom border between the image and the first item.
I think the burger icon is easy (assuming it stays in the right place with a taller toolbar).
The background image I tried manually setting the CSS property background-image in the browser DOM (using Chrome devtools) on the element and adding the transparent modifier, so <ons-toolbar modifier="transparent"> - unfortunately this got overridden so background image didn't show at all. I also tried doing the same thing on the within the toolbar and that didn't go full width and not sure the burger icon would have been on top anyway
Not sure how to override the toolbar CSS to make a tall/fat toolbar that shows the full height of the image and has no border - I've looked at the CSS for the toolbar in the browser DOM in Chrome Devtools but can't see how to modify it correctly
Ideally need this to be able to cope with different device widths or portrait/landscape orientation.
Any suggestions much appreciated. Thanks.
I have been working on a Bottom Tab Navigator and try to make tab bar items being highlighted with a circle shape around the icon when they are selected. I tried to set the height and width inside tabBarItemStyle, however, only height changes while width does not change. Is there something else I missed? How can I set the width so that the highlighted part is in a circle shape?
Here is a demo of the tab bar I am working on.
https://snack.expo.dev/qLi7s9qAA
The issue is because the width value is being overridden by the containers flexbox property.
A quick easy fix is to use the maxWidth property instead of width in tabBarItemStyle properties.
There's a nice article here: https://mastery.games/post/the-difference-between-width-and-flex-basis/ that explains it.
I am trying to get a result looking like this (picture taken from https://material.google.com/components/tabs.html#tabs-usage):
I don't want the tabs to take 100% of the width of the page, as it is by default with material-ui. Is it possible to do this with the implementation of material-ui ? I already played with the width of each tab using the style tab property, but the inkbare seems hardcoded to use percentages according to the id of the selected tab, and therefore doesn't underline properly the resized tabs. Is there a workaround?
There is an issue related to this problem https://github.com/callemall/material-ui/issues/1203
But yes, there is an easy workaround. (unfortunately it doesnt support diffrent widths across the tabs).
You can use the Tabs tabItemContainerStyle property to set the width of the tabs container (make it the width you want to each tab times the number of tabs).
Since the background color is setted on that element, you're gonna need to override the styles for two others Tabs properties (style and contentContainerStyle).
In this example Im setting the same color as my tabs in the style property (for the whole component) and setting the contentContainerStyle back to a white background.
You could use the classes properties as well..
Ex: (Imagine you have a blue toolbar)
<Tabs
tabItemContainerStyle={{width: '400px'}}
style={{background: 'blue'}}
contentContainerStyle={{background: '#FFF'}} >
How to make buttons inside md-action to always stick to bottom of outer md-card i.e have static position?
http://codepen.io/ResilientJoe/pen/aNEzBp
Setting layout-align="end end" as described here is not working https://material.angularjs.org/latest/layout/alignment
UPDATE:
Addign buttons inside <md-card-footer> solved problem since setting static height style property is not appropriate for my case
the problem is that height of md-card-content is dynamic, so if you fix the height of md-card-content, your problem will be resolved.
i.e. add
style="height: 150px;"
to your md-card-content.
see http://codepen.io/anon/pen/WwdbWv
I am using Angular Material and have been looking at the md-grid-list lately for a design requirement I am trying to solve.
I have a bunch of div's that are children to a container with layout row applied. Each of the child items have set widths\heights and have a toggle button to expand\collapse, which just doubles their sizes on expand and then return to original sizes on collapse.
What I'd like is for the child items to re-order to fill available space (provided that space is big enough) around other items that have been expanded.
Right now the container element for my child items also has layout-wrap applied and so of course as items gets expanded, any children that don't fit horizontally just push down below the previous item.
I have come across md-grid-list but I am not so sure this will provide me with what I am after, as it seems to be more suited for percentage based sizes - or have I got that wrong?
I have seen http://masonry.desandro.com/ where if you resize the window on the homepage, that's the kind of behaviour I am looking for, although I would not want the height\widths to update dynamically.
Can this behaviour be achieved using Angular Material components alone?
I am not sure if I understand you correctly but that is exactly what the grid does?
You just set the column count and width/height ratio. You can also set the height of the rows in pixels. And you can configure it depending on CSS breakpoints.
<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="4"
md-row-height-gt-md="{{height ? '100px' : '1:1'}}" md-row-height="100px"
md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile class="gray" md-rowspan="2" md-colspan="2" md-colspan-sm="1">
<md-grid-tile-footer>
<h3>#1: (2r x 2c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="green">
<md-grid-tile-footer>
<h3>#2: (1r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
As you can see I added a toggle to switch height between ratio and fixed heigth: md-row-height-gt-md="{{height ? '100px' : '1:1'}}".
Everything is animated by default but you can roll your own animations with angular-animate.
http://codepen.io/kuhnroyal/pen/QyxOQo