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.
Related
I have a component that have a v-tab list of items and, in certain resolutions, it works great. However, I saw that when it gets lower than 600px width, the tabs gets weird, they break a little and move off their space.
I'm thinking of displaying it in a vertical way for lower resolutions, however, I can't override the tabs style even putting everything with the !important attribute. I see that Vuetify has a prop called vertical, but, is it possible to use this kind of prop in a conditional way? Let's say, over 600px, I don't want the vertical prop and under it, I want.
Can we make something like this in Vue?
maybe the $vuetify breakpoints feature is useful for you. Set the prop with a computed property depending on current $vuetify breakpoint.
is it possible to use this kind of prop in a conditional way?
Yes, you could do something like this:
<v-tabs
:vertical="$vuetify.breakpoint.mobile"
>
</v-tabs>
or:
<v-tabs
:vertical="$vuetify.breakpoint.name === 'xs'"
>
</v-tabs>
More information here: https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service
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 using an background image which is inside a header tag. The coding looks like this:
<div id "header">
<div id "logo">
<div id "nav">
</div>
</div>
</div>
The header is inside a container element which is sized at width:75%. The logo image is 1024px wide and 75px height. I am trying to find a solution that would keep the logo image which is inside a background tag at 100% width of the container element and when re-sized it is re-sized proportionally.
The solution I have thought of is
background-size:auto;
I have chosen the 1024px as it would accommodate most screen. The min-width would be 780px and the max-width:1024px.
What is the best solution to have this background image re-size in proportion the the visitor screen and the container element which it is in.
Thanks
Try this:
background-size: 100%;
The best method I found to work was
min-width:100%;
The only way to resize background is with JavaScript.
The code using jQuery is here: https://gist.github.com/epoberezkin/5070642
So i am looking to do something like what the apple inspector tool does, but with CSS for a project i am working on.
So, the idea is on a certain page of the site, the site is shaded out (much like a lightbox or thickbox) but certain Divs, & other elements are still visible. This is similar to what Safari does when you inspect an element. It blacks out the rest of the page, apart from that element.
So, any idea?
Cheers!
J
In working with Dojo Javascript widgets, it implements modal dialogs by having one large element be hidden (display:none; background-color:#000; opacity:0.5;) most of the time, though positioned to cover the screen (position:absolute; top:0; left:0; and width and height set by Javascript to the full window size). Then it is given a z-index value and all elements that are intended to be visible are given a z-index above it. If you can relative-ly or absolute-ly position all the elements you want to highlight, this method would work for you.
With just CSS? If so, the best I could come up with is this:
<style>
a:hover *:not(#except)
{
background:green;
}
</style>
<a href="#">
Link
<p>
green
</p>
<p id="except">
black
</p>
</p>
Unfortunately the :not() selector is part of CSS3 and most browsers do not yet support it (but Safari 4 does).
That is one possibility, but not so nice.
Another option would be with Javascript. If you are only working with rectangular block elements how about getting the x and y value of the element to stay normal, then cutting out four pieces (up, down, left, right) of that element. Absolutely position some divs whose background is some semi-transparent PNG.
ie.
------------------
|lef|---up---|rig|
|t--|________|ht-|
|---| normal |---|
|---|________|---|
|---|-down---|---|
------------------