I have code like this:
<v-text-field label="Outlined" outlined />
After I focus this input text is going top left corner of input as expected but it's actually hovering the line:
What might be the reason?
I was trying to debug it and I find this very weird to me. Basically the label element has binded style left: 0 and position absolute ofcourse, then the outer dic which is .v-text-field-slot has position relative but the label is not actually starting at 0px from the left
It doesn't have any padding or something either:
So basically I have no clue why it doesn't stick to left side of the outer relative positioned div.
Actually thanks to Firefox I found out where the issue lays:
Because of the transform scale to 0.75 it's not at the very left of outer div. I'm now trying to find out the fix and I'm wondering why Vuetify didn't handle that.
I acutally found solution by modifing .v-label--active class:
.v-label--active {
transform: translateY(-28px) scale(1) !important;
font-size: 12px !important;
padding-right: 8px;
background-color: white;
}
but it's more like hack than real solution. Also if I will have this on some other background then white, it will look bad. So basically I'm still looking for solution but for now I'll move on with above css.
Edit: The real solution was that I was missing <v-app></v-app> wraping my entire app.
Related
I am using flexSlider in a full width mode
for a site that I'm building.see here:
http://clients.tipoos.com/glam/
notice that the site hasthis full width section for the slider but all other content
is centered using a consistent class called: .main
What I'm trying to accomplish seems pretty easy but I can't make it work:
I would like to keep the slider full width but center the arrows like so:
I tried writing small Jquery to wrap the arrows with div but it didn't work.
neither wrap nor wrapAll was working..
will appreciate any help
Thanks
Found a solution. hope it will help anyone here.
in order to center the arrows but still having a full width slider
I used the follwing CSS:
.flexslider .flex-direction-nav {
margin: 0 auto !important;
max-width: 980px;
position: relative;
}
Explanation:
margin: 0 auto !important;
this centers the arrows container
max-width: 980px;
giving a fixed width to depending on your website width
position: relative;
this makes the magic. it allows the arrows to be positioned inside the main div
I also added negative top position to my arrows but that's only in my case
hope that helps anyone.
I have been changing lots of things to my website and now I somehow have created it to not fit to screen and has a tiny scroll to the right. Can someone see the issue that is causing this.
Looking to get rid of the black on the right hand side. Only the top and bottom should be black.
www.jobspark.ca is the website
UPDATE
So this is the line of code that is causing the black space. But when I remove the 100% the image shrinks back to fit into the 960px site width. Any ideas? im ready to give up haha Squarespace is not easy to modify
#collection-513d5347e4b0abff73be5267 #site > .wrapper {
max-width: 100%;
padding: 0 0px;
margin: 0 auto;
}
My guess is you you have width:100% on your div elements, this forces the client area of each element to fill the browser. Now since the elements' borders add an additional pixel on each side, you end up with a scrollbar.
I would recommend that you omit width:100% from your div elements. It should auto expand to 100% of it's parent and that should solve your problems.
If all fails this should work,
overflow-y: auto; // or replace auto with scroll
overflow-x: hidden;
I'm trying to design something similar to GitHubs sliding file browser
It's mostly working but im trying to style it and I get this with my borders:
.claim-header, .support-header{
text-align: center;
background-color: $argument-review-banners;
padding: 0.3em;
font-family: "Jockey One",Arial,Georgia,sans-serif;
font-style: normal;
font-weight: 400;
font-size: 20px; // <--- this line breaks it
text-transform: uppercase;
border-color: black;
border-style: solid;
}
it appears as if the font-size within the div (each one of these rows is a div as it's not really a table, as I'm not doing file browsing per se) is what breaks it, it seems to make the calculation of the width different because of font-size. I thought that susy caculates widths based on the base-font, not the font of the element. It's off by 2 pixels and I wonder if this is some sort of rounding error.
I could fix it with yet another wrapper div. But I'm wondering what the proper solution would be.
This issue is not related to Susy - you would have the same problem with any em-based width. Susy has no way of knowing that you changed the font size, or want to use a different em value - that all gets calculated at the browser level.
The container mixin will output the same em width each place you use it (given the same settings), but em's are relative to local font-size. That's calculated by the browser, and Susy has no knowledge of it, or control over it. There are several options.
You can build your grids in rem (root em) values instead, on modern browsers.
You can use the $container-width setting to override the calculated width - use px, %, or set the width .
You can set a single outer container (maybe the <body>?) around all these elements.
You can change the font size in a nested element, rather than on the container.
I am applying a border radius on a select element that has a background color.
Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box.
I can't figure out what css property I must use to solve this issue.
background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;
Here is the jsfiddle: http://jsfiddle.net/JsgnR/
thanks for your help
My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.
you see that on the options , try to style them via css, you are not able and they look ugly
You can wrap <select> element in <span></span> and add the required properties to css for
This solution: http://jsfiddle.net/JsgnR/5/
I am getting a horizontal scroll bar in IE6. Attached the path to zip folder. Download and open index.html page in IE6. Let me know how to remove the scroll bar.IE6-horizontal-scroll bar
Its one or more bad values in paddings. Try replacing all "padding" with "xxx" for a moment and you'll see that the problem disappears.
You also need to study the broken box model on IE.
Solution:
Replace all padding: 10px with padding: 10px 0;
Fix what does not look right (padding wise)
You need to set the horizontal padding of div#container to zero too. You're only setting the top padding in skin-ie.css to zero now. Change padding-top: 0px in skin-ie.css to padding: 0 (the px is unnecessary for zero).
tried
html{
width:100%;
overflow-x: hidden;
}
body{
width:100%;
overflow-x: hidden;
}
yet?
EDIT:
This works but hides right side edge content. See the link screenshot. http://shivanand.in/temp/rightside-edges-hidden.gif – Shivanand
Hmm, that is weird. Are you using any position: absolute DIVs with width set in pixels (not %) that are causing this to happen?