I'm using FlexSlider 2 and I'm trying to apply an horizontal page offset (left and right) to my slider, something like the mobile Facebook app which as you are browsing the images, you can see a small part of the previous and next image
Sample image: http://imgur.com/Oc9S8OA
Thanks in advance.
I know this was asked three years ago but it seems like there are quite a few versions of this same question on google so I figured I'd answer it now so other people don't have to fight with this.
The trick is to add some padding to your .flex-viewport element. Has to be padding and it can't be any higher or lower on the food chain. If its on the list it will add padding to the left but never show the padding on the right; if its on your wrapper the list won't properly overflow and you won't get to see the preview of the next items.
.flex-viewport {
padding: 0 75px;
}
Related
This should be a simple fix but I can’t figure it out. Please excuse my lack of posting my whole code.
Here is the issue. I am using the following
`
<v-card>
<v-img :src=“{{person.png}}”</v-img>
<v-card>
`
I have an array of users with profile images. Some of these images are different sizes ( some may be 400w other maybe 250w ). My issue is that because these images are different sizes, that they actually end up making my cards ( which are uniform in size ), different widths and height. This makes the cards ugly of course, and I need help on how to fix this.
Now, I had a friend build a react project, and I providing him with pictures, but the sizes were off. I fixed this by importing all images into Figma and making them all the same height and width, which, worked. However, for this project, this method isn’t working for me and I need a way to auto size these images so that my cards stay uniform.
I do not want to use the v-avatar feature, so please refrain from asking me, because these aren’t really “avatars”.
One “solution” I found was to use “contain” but I can’t find any information on contain in the documentation and I’m not sure if that would even work.
Unfortunately in some edge cases you cannot depend only on the components provided by a framework and you need to improvise. This issue sounds purely like a CSS one. Instead of using vuetify component you could try to create own component and just apply the avatar image as element's background-image inline property. Then you could use background-size: cover in order to preserve correct ratio of uploaded images.
I never found a 1 size fits all fix for this, but this is what I did to make it work out.
1. I imported all images to figma
2. I edited the images to all be the same size, then used the crop tool to "fit" them to the new "canvas" size
3. Within my v-img , I added "contain", which insured that the picture didn't get cut off or cropped when placing inside of a card.
Thanks for the help all.
How can I detect whether device screen has rounded corners and also estimate the radius of the corners (if possible) ?
I want to modify my view more typically cardview to adapt these screens. I have successfully retrieved the screen width and height by using Dimensions
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
I am not able to adapt my parent view according to the curves at 4 corners with above approach. If I give static radius to the parent view it give bad look & feel on rectangular screens and it's not acceptable.
One approach I thought of is generate a list of all devices with rounded corners and apply border radius to only these devices. But it's harder to maintain the list and adapt the list with newcomers in the market.
Can anyone help me with it ? Any sort of approach or guideline will really help me. Thank you in advance
After struggling with it, I came with a much easier solution that why shouldn't I ask user whether he/she has rounded cornered screen when the app starts first time and later giving an option in settings under my app to change whenever user wanted.
I stored user's selection in local storage and modified my view based on that flag. Now I don't have to maintain a list of all devices instead it will cover all use cases.
Currently there is no option to get corner radius from Dimensions. There is only 4 values in Dimensions object given below.
{ width: 384, height: 592, scale: 2, fontScale: 1 }
Even if you have answered and accepted your own answer already, it is not really a solution for the original post.
I think basically all phones with notches have round corners while devices without notches typically do not have round corners. If you have notches, you have an inset in your Safe Area. If you are using react-native-safe-area-context for example, you can get the insets with
const insets = useSafeAreaInsets();
const hasNotch = insets.top || insets.bottom || insets.right || insets.left;
After experimenting with the padding property in react native i got the following findings:
Question 1
padding-left: 150 works
padding-left; 150pd crashes
padding-left; 150px works ( guess it ignores px and works as 1? )
padding: 150 crashes
padding : 150dp crashes
padding : 150px works ( guess it ignores px and works as 1? )
This makes little sense to me especially since scenario 1 works but scenario 6 doesnt!
In any case it looks as if i should abandon padding as a shorthand entirely, and write padding-left/right/bottom/top everytime, right?
Question 2
As far as i understand, left/right/bottom and top are essentially absolute positions to the parent component ( i got this after lots of trial and error ) This happens without specifying position:absolute.An example
If there's a parent container with unspecified height you cant make it resize itself by using left/bottom/* on the child. You need to use padding.
The question is, when would i ever need to use position:absolute given that left/right/* already do that for me anyway. And is there any other difference im missing between left and padding-left?
Question 3
In general, for the layouting part, the connection with the web side of things isnt instant for me. Is there a better guide to understanding how things actually work and not guesstimating like i do right now? Im using https://facebook.github.io/react-native/docs/layout-props#left but it doesnt really explain things very well in layouting terms.. Any pointers appreciated
Good morning!
I'm currently trying to create a view similar to this mockup.
I have put down 3 different screen sizes so you can see the issue.
I have a header background image (grey box) with an angled bottom. On the right I want to display an image, which obviously needs to be positioned.
Positioning it horizontally is no issue but how can I position the image vertically? I have it positioned fixed for one screen size but obviously need to make it flexible.
Any ideas? Help would be much appreciated!
David
You can definitely use measure as #rajesh pointed out, or you can use Dimensions. As far as getting the layout consistent across devices, using position absolute and measuring the device height should allow you to get consistency across these devices.
Check out this example I set up, it should be a good starting point at least.
https://rnplay.org/apps/pSzCKg
Is there a way to creat a gradient with a stop n pixels from the bottom edge of the element?
For example with Moz/Firefox it would look like:
-moz-linear-gradient(center bottom , #f00 2%, #d00 31px)
It should also be noted that this gradient has a companion gradient to do the same thing to the very top of the box. So really the css looks like this for FF and i need to reproduce for webkit:
background-image:
-moz-linear-gradient(center top , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px),
-moz-linear-gradient(center bottom , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px);
You can't do that with the current webkit syntax. Good news though! There will be a new -webkit-linear-gradient property (just announced on the webkit blog) that basically matches the -moz syntax and will allow you to do this. This syntax should become the definitive CSS3 syntax, so you'll be able to drop the -webkit and -moz entirely at some point. (The old -webkit-gradient property will continue to work indefinitely, but is not favored going forward.)
You could use -webkit-background-size to size the gradient in pixels and background-position to place it at the bottom.
Not quite sure what you were after but I manage to stop a gradient in px by using this -
background-size:100% 31px; background-repeat:no-repeat;
Have you tried something like this?
-webkit-gradient(linear, center bottom , #f00 2%, #d00 31px)
I hope that this site helps you more.