Please guide me on this design implementation,
Design
Main problem is how we can place the blue bars on exact number in the range slider?
<input type="range" min="1.0" max="5.0" step="0.01">
Related
I'm trying to build this:
Right now I'm building this by doing all the text in a flex box and having two sibling absolutely positioned boxes with partial borders to make the lines, like this:
<ContainerView>
<TextSection />
<LeftFloat />
<RightFloat />
</View>
This isn't great on different screen sizes, though, because I have to tell those border boxes how to tall and high to be. And the text takes up different heights/widths on different screen sizes so there is no one-size-fits-all value, even when it's a screen percentage, that works for the borders on all devices.
I tried doing something inline like this:
<Text>BECOME A SUBSCRIBER</Text><HorizontalLine />
<VerticalLine /> <BulletView /> <VerticalLine />
<HorizontalLine /><Text>Tap here to learn more ></Text>
but that was worse because the horizontal and vertical lines wouldn't join up nicely to form a corner. I could manipulate them with negative margins but the effect was different between Android and iOS.
Is there a better way to build this kind of border situation?
Or is there a way for these floating boxes to find the width of the "BECOME A SUBSCRIBER" and "Tap here to learn more" elements so they can set their widths accordingly?
The View prop 'onLayout' would be helpful here. You can let the other container expand with flex, and then grab the dimensions of it. Afterwards you could calculate the size you want using screen dimensions and this layout data.
<View onLayout={e => e.nativeEvent.layout}
I'm building an app using Vuetify and I'm trying to spread out my buttons on the app bar. So I assign d-flex and justify-space-between classes to VAppBar but it doesn't work.
Turns out VAppBar actually consists of an outer <header> element and a <div class="v-toolbar__content"> element which only grows as wide as its children. The justify-space-between is applied only to the <header> element while the contents of VAppBar is placed in the <div>. VSpacer between my buttons won't work because VSpacer doesn't push its parent. Wrapping my buttons with a <div> and setting it to 100% width won't work either because it would just be 100% the width of v-toolbar__content
Any workaround to this? Is there a convention on spreading things across VAppBar?
Looks like the answer is to not assign d-flex on the VAppBar. The app bar is already a flexbox aligned to the middle and justify-* & align-* classes works just fine.
I am using this awesome Skrollr libary: https://github.com/Prinzhorn/skrollr (animations on scrolling)
So far I have this as my implementation:
<div class="band2 landing">
<div class="container">
<div id="inside" style="position:relative;height:700px" data-0="margin-top:0px" data-1000="margin-top:800px">
<img src="/static/images/snappie.png" width="280px">
<img src="/static/images/iphonehand.png" width="400px" style="float:right;margin-top:50px" data-0="margin-right:0px;" data-150="margin-right:190px" data-300="margin-right:0px;">
</div>
</div><!-- end container -->
</div><!-- end band landing -->
basically I am moving the entire "inside" div downwards when the user scrolls down. I increase the top margin by a certain amount when the user has scrolled a certain number of pixels.
While this technically works, it produces some really weird scrolling, as you can see here on the test site: http://snappiesticker.pythonanywhere.com/splash
see how the scrollbar quivers and shakes and how its hard to scroll past the yellow bar?
I feel like hard coding these pixel values is generally not the best way to go about this and will fall apart especially when using a variety of screen sizes, browsers, etc.
What is the correct way to do this? Any skrollr experts?
Instead of using margin-top, margin-right etc.
Try using the transform:translate3d(0, 0, 0).
The first two 0's are the x and y coordinates and should be adjusted to match the effect of the margins you were setting. The third 0 is the z coordinate, which should stay at 0.
This way you are killing two birds with one stone. The transform:translate property is a lot easier for the browser to handle and the 3d enables hardware acceleration. Hopefully this will smooth things out for you.
I am new to BS3 and i'm trying to use a responsive image with the img-responsive class that spans the width of the container across all screen sizes and devices. What I have so far works apart from screen break points between 768px and 992px where the image doesn't retain its 100% width. I'm not quite sure where I am going wrong. plus I can not seem to remove left/right padding so it covers the complete width of the container. Ive tried using Jumbatron with no success.
I simply have an image in my outer container like so: -
<div class="container-fluid wrapper">
<img class="img-responsive" src="../images/home/hands-and-key.jpg" alt=""/>
</div>
Do I need to use rows and column classes for this?
I am showing a ListView control with items of varying height. The items' height varies depending on a header text element. I read about the GridLayout's groupInfo property, which works like a charm in terms of sizing up the items. I set the height of the cell to be rather small so that my items can be fit into the closest cell span.
Long story short, I needed to add always have a particular item at the end of the list. I do this by manually popping the item, inserting new data, adding the item to the back of the list. This works. My rendering function recognizes the item and renders the item itself correctly (it has different css classes from the rest of the items), but it always adds these gray boxes in the next column. The size of these boxes corresponds to the size of the groupInfo cellwidth/cellheight.
Why would this be showing up?
So just as I typed this up I figured out a way to get rid of these. Still don't understand why they would show up. I looked at the css I was using for the item I was appending at the end. I was setting a padding on it. When I removed the padding, the gray boxes no longer showed up.
I changed the rendered html from:
<div class='item extraclasswithpadding'>
Content
</div>
to:
<div class='item'>
<div class='extraclasswithpadding'>
Content
</div>
</div>
and everything is looking great now. Not exactly an answer to the ListView would do this, but certainly a solid workaround.