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
Related
To be short, my requirements are:
The list needs to contain about 5 thousand average product cards in two columns. The products are splitted into sections.
It must be performant, really performant
I need it to work well with onViewableItemsChanged method
I need to be able to scroll it to the desired position as quick as possible
It must be able to be Animated with the native driver (e.g. to animate header according to the scroll position)
I've tried to use SectionList for my purpose, but it did not achieve the desired performance despite many tweaks of the virtualization parameters. The problem was that the responsiveness of the app gradually got worse as I scroll down. It was because of the amount of items above the viewport. Yes, SectionList do detach the items outside the viewport, but it replaces it with the getItemLayout function, which floods the thread and hangs the app for about 3-4 seconds before it starts responding.
Another way I tried was to use react-native-big-list. This thing works really well with lists like mine, like really fast, exactly how I need it to work. But sadly it is not perfect and has some unsolved issues:
the onScroll method here does not work with Animated.event with the useNativeDriver prop set to true
the onViewableItemsChanged stops working as soon as I reach the second section of the lists
the scrollToLocation method does not support the viewOffset prop.
All the issues above are known but still not resolved, and I am not as good to somehow patch them (in fact I tried)
I do hope that someone have the same problem solved.
Sorry for my mediocre English, but hopefully I expressed my thoughts good enough to be understandable
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.
Now I could be wrong about this but after testing it all day, I have discovered...
When adding a widget and setting the z-index, the value "0" seems to be the magic depth.
If a widget's Z is at 0, it will be drawn on top of everything that's not at 0, Z wise.
It doesn't matter if a widget has a z-index of 99, -999, 10, -2 or what ever... It will not appear on top of a widget who's z-index is set to 0.
It gets more strange though...
Any index less than -2 or greater than 2 seems to create an "index out of range" error. Funny thing is...when I was working with a background and sprite widget, the background's Z was set to 999 and no errors. When I added another sprite widget, that's when the -2 to 2 z-index limitation appeared.
Yeah I know...sounds whacked!
My question is, am I right about "0" being the magic Z value?
If so, creating a simple 23D effect like making a sprite move being a big rock will take some unwanted code.
Since you can only set Z when adding,a widget, one must remove and immediately add back, with the new Z value...a widget.
You'll have to do this with the moving sprite and the overlapping object in question. Hell, I already have that code practically written but I want to find out from Kivy pros, is there a way to set z-index without removing and adding a widget.
If not, I'll have to settle for the painful way.
My version of Kivy is 1.9.0
What do you mean by z-order? Drawing order is determined entirely by order of widgets being added to the parent, and the index argument to add_widget is just a list index at which the widget will be inserted. The correct way to change drawing order amongs widgets is to remove and add them (actually you can mess with the canvases manually but this is the same thing just lower level, and not a better idea).
I found a working solution using basic logic based on the fact widgets have to be removed and added again in order to control depth/draw order.
I knew the Main Character widget had to be removed along with the object in question...so I created a Main Character Parent widget, which defines and control the Main Character, apart from its Graphic widget.
My test involves the Main Character walking in front of a large rock, then behind it...creating a 23D effect.
I simply used the "y-" theory along with widget attach and detach code to create the desired effect.
The only thing that caught me off guard was the fact my Graphic widget for my Actor was loading textures. That was a big no no because the fps died.
Simple fix, moved the texture loading to the Main Character Parent widget and the loading is done once for all-time.
PS, if anyone knows how to hide the scrollbars and wish to share that knowledge, it'll be much appreciated. I haven't looked for an API solution for it yet but I will soon.
Right now I'm just trying to make sure I can do the basic operations necessary for creating a commercial 23D game (handhelds).
I'm a graphic artist and web developer so coming up with lovely visuals won't be an issue. I'm more concerned with what'll be "under the hood" so to say. Hopefully enough, lol.
I have been so frustrated with my site, at some point my background disappeared and i must be blind because i cant figure out how to get it back..
My website is here http://www.allramhosting.com/smyrnainlet
What i am looking for help with is id="section_wrapper" - that big white background you see...
somehow i lost the black background gradient that i made for that wrapper and its just giving my whole page a white background...
Try adding a float: left; to section_wrapper. It fixed the issue here. It may not be the proper solution but i think you will figure out the problem using that. section_wrapper's height becomes 0 at your current site.
Note that it works with IE9 in any case.
I have a jQuery Mobile slider. Let's say the range is 1 to 100. What I need is to make the scale exponential. In other words, moving the thumb by a given number of pixels on the left side would have a smaller effect than moving it the same number of pixels on the right side, towards 100. My goal here is to make it easy to pick values like 1, 2, 3, 4, 5. Differentiating between 96 and 100 is not necessary. So I want to devote more of the slider's range to the lower values.
Anyone have any ideas on how this might work? Or alternative approaches to solve this problem?
I ended up implementing a solution by modifying the jQuery Mobile source to their slider widget to fit my needs.
Here's a link to a working version if anyone is interested:
http://media.pokerslug.com/js/jqm/eslide.js
It uses a simple x*x relationship to scale. To use it, call $(element).eslider(), but make sure the target doesn't have a "type=range" attribute.
A short demo can be found here: http://jsfiddle.net/4XrhA/