I'm trying to implement a camera, but when I start it, it's not scaling well. The component is inside a View, and it is shrunk vertically, but if in the return method I put only the camera, it works well, so I think the problem comes from the View style, but I can't figure out how to solve it. The camera should render when a button is pressed, but when I press it this is what happens:
This is the snack: Snack
Thanks for the help.
I saw your code on snack and if you remove the position absolute property on the View Component you have in Book.js on 243 line and add flex: 1 to that view you will get the desired output. Remeber that View always takes the height of the max content of children if we do not explicity give height or give flex:1. And if we are using position property with flex than position propeties will work but flex properties won't work. So choose one of them and than do your design accordingly. If you need to have position property than take the device height from expo constants and pass that height to the View enclosing your camera.
Related
I'm loooking for some advice concerning the following problem.
I want to position several elements inside a flexbox since the feature shall adapt to its surroundings.
Below one of these items I want to position a computed element which will use the size of the element above it. So in essence it has a fixed (but calculated) size.
I tried solving the issue by placing the calculated element into the flexbox, but this destroys the overall behavior.
It is supposed to look roughly like this:
<Label w/o shrink> <input element, can grow> <Label w/o shrink>
<some rectangle, calculated size>
desired layout - a link since I'm not allowed to post images
In the attached example jsfiddle example of problem I'm using an input element in combination with two labels and a computed rectangle to describe the behavior. Think of the rectangle as a generic example for the problem.
Resizing of the window in terms of enlarging the window works like a charm.
Issues occur when decreasing the size.
Flex can only decrease the size of elements with a non-fixed size, such as the input element. My computed rectangle has a fixed size. So this size prevents any shrinkage of the input+rectangle container.
Idea 1: Make the calculated item a little smaller than the related input so the container itself can shrink since there is space. The input will shrink and thus the calculated rectangle will shrink as well.
See jsfiddle with a smaller rectangle
This works to some degree. If the mouse moves slowly enough when resizing the window / the changes in size happen slowly, everything is fine.
As soon as the shrinkage happens too fast for the rendering to keep up, the issue as described above occurs again.
Idea 2: Ignore the calculated element by positioning it absolutely.
See here: jsfiddle with relative and absolute positioning
I defined the outer element to be positioned relatively and the inner (the calculated element w/ "constant" width) to be positioned absolutely.
By doing this the element will be taken from the flow and everything works fine.
Almost.
Since now the rectangle is ignored, the remaining layout gets broken as well. This is not acceptable due to the usage of this feature as a component in a bigger context. In the example the last label gets positioned too high up since the div won't take into account the rectangle.
My question now is if you have further advice. If at all possible I want to avoid any calculations in javascript and solve the issue using css-related options. (Otherwise using further info of getBoundingClientRect() - such as the x position - might have been an option in some way (?) -> this way I could remove the rectangle completely from the flexbox and just position it "by hand" at the desired position).
I am happy about any further ideas.
The issue appears to be caused by using the width of the input someInput to calculate the computed-element-container width. If you use the flex item width instead then it should work.
I've updated your jsfiddle to show this - I've created a second flex container above the original, that has the same three items. I then calculate the width based on an element with id: content-box. Hopefully this will assist you with finding a solution:
https://jsfiddle.net/jamarmstrong/h9rz1t4b/
For people who might have a similar issue here's another approach I came up with while trying to adapt James solution.
See this jfiddle: jsfiddle using overflow and min-width
What I changed about my first solution:
The issue with the shrinkage is some chicken-and-egg issue: The flexbox cannot shrink further than the elements inside allow for shrinkage, but then my computed element only shrinks if another element shrinks which in turn is prevented by the flexbox itself being unable to shrink, which brings us back to the beginning.
So in my question I tried to make the flexbox ignore the element by positioning it absolutely - which messes up the overall layout.
A solution I came up with in order to allow shrinkage: Make some of the elements be able to overflow the flexbox and allow for a min-width different to auto.
This way I allow the calculated element to overflow the flexbox (which makes the flexbox kinda ignore the item). Note that you also want to adjust the min-width of certain elements.
So in the end I introduced a second flexbox which encapsulates the computed element. Both this element as well as the items inside allow both for overflow and shrinkage. (One might be able to simplify the elements a little).
The computed element can thus breach/overflow its boundaries and the overall construct can shrink. The shrinkage causes the computed element to resize right away - so temporary overflow gets fixed immediately.
You can compare this approach to James idea and decide which one suits your troubles better.
I'll try my best to explain this as clearly as I can. I'm also using the Bulma CSS framework if it matters. So the layout I'm trying to create is this.
I created a working version that can be seen in action here
However, in the working example the vh/px of the scrollable box is fixed to a certain amount and I'm using tiles from the Bulma CSS framework. I tried using columns and the same outcome occurred. If I was to not make it a fixed amount, it'll just extend past the screen, but I want it to fit the entire screen regardless of the size and the only scrollable part should be the green box I've showed above. Also, the box may not even have enough content to become scrollable in some cases, and in that case I would still like it to fill up the rest of the height with the box even if it's going to be empty.
As you can see here, if the height isn't explicitly set, it'll keep going past the screen, but if it's properly set it will work as intended. I'm wondering how I can make this height fill the space properly no matter how it's resized and etc.
Any help would be appreciated!
It sounds like you should set the height property on the wrapper of the content and set the overflow: scroll; Then all of the contents will be the height you set and have scrollable content.
I'm struggling with a layout issue.
What I want?
A modal dialog that grows vertically, beyond the screen, that it is centered horizontally and vertically, that has a minimum margin on top and bottom.
Is not on the documentation of MUI?
The "official" method on MUI shows a dialog that has a scroll inside the content of the dialog showing the action button always on screen. I don't want that. I know it may sound against Material Design guidelines, but in our app this makes sense.
Did you googled this?
Yes
What I have now?
I have the dialog growing beyond the screen, and the scroll on the background, which is good, but I don't have top / bottom margins, it grows until it reaches the top 0 (see screenshot 2).
For better describing this issue I will show two important states: the dialog that is smaller than the viewport (A) and the dialog that os bigger than the viewport (B).
Screenshot 1 - state A - desired state
Screenshot 2 - state B upper working acceptable with no top / bottom margins
Screenshot 3 - state B upper desired
Screenshot for state A with issue adding top / marginTop / paddingTop
You can play with this example here:
https://codesandbox.io/s/lxw7ylxy8z
So, as you can see, if I use a marginTop or a top on the paper element from MUI, or a paddingTop in the root element of the MUI Component dialog property, then I have a problem with state A, the small dialog, that now looks non vertically centered.
Also the bottom margin just doesn't work on state B.
I'm considering things like EQCSS or do some calculations based on the computed size of the dialog, but I feel like it should be a better option using just CSS and flexbox. The extra issue with this is that I can't insert elements within the MUI Hierarchy, or at least I don't know how.
Hope someone can help me with this,
If you need more information please ask.
Well, it was pretty easy, I just added two small fixed height div, one at the top and one at the bottom.
See here:
https://codesandbox.io/s/1rnj7kv3mj
Accepting this solution for now.
I am using React Native Version 0.44.0 and expo app to render some images and text on the screen in a ListView.
My issue is with styling.
A. Originally I had only a View (View1) and an image and a text component side by side within View1. I set up the flexDirection="row" and justifyContent="center" and that centered the image and the text within the screen.
B. I needed to insert another text component with a different style under the first text, but the flexDirection="row" would simply not allow it to go under it.
I inserted View2 and that did allow the texts to be vertically positioned but the higher text got cut off at the right edge of the screen( i believe its because the image is set with a fixed height and width).
I couldn't get the text back in the center until I added View3 and gave it a fixed width.
So View1 has flex=1 , View2 has flex=1, and View3 has width="someValue"
My concern: right now its rendering on the device perfectly. But is this acceptable practice? will it be distorted on other devices or will it render the fixed width dynamically based on the screen resolution since its density-independent pixel unit?
will it render the fixed width dynamically based on the screen
resolution since its density-independent pixel unit?
Nope. It will not be adjusted as per different screen sizes. The width will change from screen to screen. Using flex-box is the best way to get the things
done , but sometimes you need the help of screen width and screen height. For that you can use the Dimensions from the react-native. Here is a guide to use it. And there are also some libraries available to make the app responsive like react-native-responsive and react-native-extended-stylesheet.
In your particular case, you could divide the row view(view1) with 2 inner views having the desired flex. And first inner view may hold the image view, if you find difficulty with the image height and width with its parents height and width, you may also need to refer the image resizemod. Second inner view holds your text. Also remember to add some padding to view1 so that the inner views will always be in the view port and Nevers goes out of the viewport.
I am trying to create a web page. It has two regions left and right content. Till now i am testing it on a particular window size where it is lying in center and size is exact fit. But as soon as i minimise it or open it on monitor of different size it is not getting resized based on it. How can i do it. here is the web link i am working on.
http://jsfiddle.net/efyJF/.
If you see, right now the content in side is fixed size. So, i need to scroll all the way to the right to see the end of right content border.
I feel like this is not the way the normal web pages work. How can i fix this.
Thanks
You can define your css value using percentage like width: 20% instead using fixed value. Or try to use css framework like Blueprint or 960 Grid System.
If I understand right, you are looking for something like this
The container has a property of margin: 0 auto; which puts it in the centre, and then the children divs take up a percentage of that parent div. The parent (#container) can be resized and the children will fill it up appropriately.
The mistake you made was using absolute positioning, this will perfectly align it for your screen, but other screens won't look the same.