It seems that the later cards (1st photo) are being cropped to the size of the biggest card that’s in the initial view (see card marked with red in 2nd photo). All the cards that would be bigger than that have the bottom of the view cut off/wrapped. I’m using a MaterialCardView with a ConstraintLayout inside that holds all the views you see in the card. The CardView, ConstraintLayout, and RecyclerView all have layout_height=wrap_content. I've tried changing setHasFixedSize() and a number of other random things around layout_height/width.
Any ideas to why that would be happening?
probably you put a android:layout_marginBottom on red marked card and using that for all of your cards . that will prevent the cards to show they're full content .
you can make you font or images smaller or change that android:layout_marginBottom
Related
I have a layout that keeps occurring in my codebase, that I'm not able to style properly with react-native flex only.
I want to have a top and bottom container which initially should both take half the screen space. The bottom container should grow with it's children and the top container should shrink if need be.
I've created a snack with the code here, where the layout behaves as it should, but it's using a workaround via onLayout: https://snack.expo.io/#domir/center-problem
The same problem is easily solved in web via flex: 1 on both containers. In react-native if I have flexGrow: 1 on both of them, they only divide leftover whitespace.
E.g. Currently for a display height 1000 a top container will get 400 while bottom container will get 400 + 200 when a 200 child is placed there when using flexGrow: 1. What I want is both to get 500 until the bottom container has 3 children with 200 each. Then I want the top container to get 400 and the bottom to have 600.
Not sure if there's a way to solve this JUST with flex (probably not) - and I'm not sure what your requirements are, but here's a way to solve that without using onLayout but instead just use maxHeight percentages:
https://snack.expo.io/#sudoplz/center_problem_maybe_solved
All I actually did was I used the existing counter value you had in that snack, to modify the input of maxHeight
The top parent is now styled like that:
maxHeight: `${Math.min(50, ITEM_HEIGHT - counter * ITEM_HEIGHT_PERCENTAGE)}%`
which means that until the bottom parent is full, it's max value will be 50%, as soon as it's full, the maxHeight becomes less and less gradually (depending on he number of children on the bottom view)
In my snack I also got rid of some unnecessary views you had, not sure why they were there.
Here's how that looks like now:
Would that work for you?
As you can see below, the maxHeight solution does not work quite well on a real device. Some of the lower boxes are cropped off or overflow the screen.
Although the solution does not have to be with flex only, I do have a flexible container at the bottom. It contains text and a varying amount of error messages. The yellow space would contain whitespace and the green container would contain some text input. On large screens, this is not a problem, but for small devices, the error messages can take up quite a bit of space and I'm not able to calculate the size of the lower parts in advance.
I want to create a view - that contains a Card - always with '90%' width of the window, whenever the device is vertical or horizontal, or Component is in a parent or not.
What I tried:
1 Using percentage
( width: '90%'):
It works well if I use my card separately on the main view of my screen, but when I use my card on a horizontal ScrollView with other cards I can see many cards, but I want to see only one card before scrolling.
2 Using React.Dimensions
( Dimensions.get('window').width*0.9 with some padding) :
It works perfectly when I use a card separately or even with many inside a scrollView but when I change the orientation of the screen it takes less width of the screen than '90%'.
3 Using flex basis based on this answer
Is there any better way to achieve my goal?
You might wanna look at this package https://github.com/marudy/react-native-responsive-screen
This package doesn't require any orientation change support. It's just one file actually, so you might wanna take a look at that
We have a typical bootstrap SPA that we turned into a React site.
In one of the sections there's an image that appears in the right side of the layout, and it spans the section vertically (takes up about 50% horizontally).
When the window is reduced in size, at some intermediary positions, the image no longer spans the section vertically, making it float above what looks like a margin or a frame, but in fact, it's just the background color of the section whose aspect ratio is not enough to hold the image completely.
Is there a way to prevent this? It seems like the only solution would be to pick images that are have aspect ratios that are more amenable to the half the grid position they are being given.
I have some difficult time in creating iOS screen to match with visual design provided by design team.
The design team has provided the spacing info for each screen which shows how much space each text needs to be apart from other UI element on the screen. This is attached for your reference. You can see here that the two text labels "Activate Your Account" and "A Verification link...." are placed apart by 25px.
The same thing I am trying to achieve in the storyboard. I am attaching the storyboard screen snapshot for reference.
From this you can see that I cannot keep exactly 25px b/w the two text labels because for the following issue
The text font is custom font and I cannot load the same in storyboard. I have added the font file in the project, but when I try to open it in storyboard for UILabel, it doesn't list out. I am not sure why xcode doesn't show up. This makes me hard to resize the label's frame. If I try to decrease the empty space in the label (upper and lower part of the text), this will make label height less, but when I set the font programmatically, it doesn't fit in this small space.
When I try to increase the height of the label, the text inside the label starts displaying at the center leaving space at the top and bottom of the label frame.
So I want to know how to solve this problem. If anyone had this issues and sorted out, please let me know how to fix this.
Many Thanks
Your designers aren't speccing their designs correctly :) Show them how iOS renders text and have them spec their designs in the same way. This is what we do on the Facebook design team. I mocked up an example for you (each square is 4dp/8px).
http://i.stack.imgur.com/q4tZX.png
Initially I was under the impression that it uses the table row slideup/down animations while inserting/deleting new rows but I doubt if it's doing that as it does it so fluidly even with thousands of items in the list (otherwise it would take a lot of time for the deletions/insertions to work).
Am I right in my assumption that it's simply attaching a new instance of the News list at the bottom of the screen, shrinking the above one while the one at the bottom expands to fill up space?
UPDATE:
Please see this video of what I mean: http://dl.dropbox.com/u/4960327/ReederAnim.mov
I can not tell you exactly how Silvio Rizzi made this, but as you see in the playback, a list view is added behind the shown list view, and the front list view fades out (.alpha = 0.0;) while the list view behind it expands its height per row.
When you desicate it frame by frame it becomes quite clear what he does, and it is really not that advanced. But I have to admit, with the white "milky" polished interface, it looks quite neat.
In addition, you can see that while animating, the background list view only renders the top 7 entries (hopefully calculated by dividing the view height with the average height of the cells shown) making the list view quick to load. Then afterwards, he can load an extended array of cells once you start scrolling, or in a background thread starting once the animation is complete.