I'm new to react-native, coming from the web-world.
The standard behaviour for a View component seem to be to collapse to it's content's width.
Is there a way to have a component always stretch to the full horizontal width, limited only by a parent's fixed width or else screen width?
Any of width, minWidth or maxWdith set to '100%' doesn't seem to do any difference.
For this purpose, you can simply use the flex box system
Related
As you can see I used a <v-data-table> that takes up all available space. I achieved this result by adding height: 70vh to my <v-data-table>. Obviuously this solution isn't ok because I simply hardcoded the height and if I change the toolbar height (the one that has "Devices" written), I also have to change the data table height. Is there any way to achieve a dynamic height? (from toolbar to bottom of the page, take all available space)
Please have a look at this snack:
https://snack.expo.io/#yolpsoftware/groaning-nachos
When you run it in web (separate window) and then resize the window a bit, you'll notice some strange behavior:
This might have been an error in Expo Snack. When I reloaded the window, the behavior disappeared. So the following is not relevant anymore: When the window is big enough for the two videos to fit in, their parents get a height of 0, so they are rendered on top of each other. As soon as you make the window smaller, this behavior disappears.
Even though both the <Video> and their direct parents have width: 100% and aspectRatio: 1.333, the height of the <Video> elements always stays the same. The aspectRatio prop is not respected.
Why is that so?
I want the video elements to fill the width of their parent, but their height should be set according to the aspectRatio prop.
I am trying to have an image inside a ScrollView taking the full width of the screen while keeping its aspect ratio (I don't want a fixed background image). The answers in https://github.com/facebook/react-native/issues/950 seem to work for a View but not a ScrollView.
The null width/height trick just makes the image disappear. Setting the width using Dimensions.get('window').width does not work for some reason; it leaves some space either on the top and bottom or the left and right of the image depending on its aspect ratio.
I can't use Image.getSize() as the image is local and would rather avoid hard-coding the dimensions as I have many other images that need to be styled this way. I have tried many other combinations of flex, alignSelf, etc. but none seem to work.
Setting ScrollView's style={{width: "100%"}} works for me.
I have a canvas element that changes in height after some user interaction.
The canvas is contained in a div. When the canvas changes in height, it currently overflows the div vertically.
Can I add a (javascript or jquery) listener (or something like that) to the height of the canvas, that dynamically changes the div's height according to the canvas height? Or is there a css way to let the div automatically enlarge (like in a table row).
thanks
Have you tried adding this style to the div : height:auto;
As a workaround, I've put the canvas in a table. A bit ugly, but it works.
I'm working on a Firefox extension, and am having problems getting relative constraints on the width of elements in the sidebar. For example, I want a description element in the sidebar that will always be as big as the sidebar when the sidebar is resized, and has text wrapping accordingly.
If I put a description in a box with a fixed maximum width, it will wrap correctly, but I can't get relative widths to work correctly using css. If is set the max-width to be 100% in css, it seems to just ignore it and the text will be on a single line and will overflow the sidebar. Any suggestions on how to put relative width constraints on a box in XUL so that text will wrap correctly?
It sounds like setting maximum width isn't what you really want. Have a look at https://developer.mozilla.org/en/XUL_Tutorial/The_Box_Model, setting flex attribute would be the right approach to make an element fill all the available space (typically flex="1"). The corresponding CSS property would be -moz-box-flex: 1.