I'm looking to add an icon, whether it is an SVG Icon or Fontawesome, I do not mind.
This is the vuetifyjs code im using
<v-slider
v-model="value"
:tick-labels="ticksLabels1"
class="step-slider"
height="20px"
:max="4"
:color="ex1.color"
:track-color="ex2.color"
:thumb-color="ex3.color"
step="1"
tick-size="0"
></v-slider>
This is what I'm trying to achieve.
Any help is very much appreciated.
Thanks.
If anyone is struggling, I've managed to do it using CSS.
.v-slider__thumb:after {
content: url();
display: block;
width: 18px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
margin-top: 1px;
}
This is code that worked for me.
Jake.
Related
I'm trying to horizontally align two absolute positioned elements inside a flex item.
This is my current CodePen
HTML :
<div class="stepper-wrapper">
<ul class="step-wrapper" >
<li class="step__bubble"></li>
<li class="step__circle"></li>
</ul>
<ul class="step-wrapper" >
<li class="step__bubble"></li>
<li class="step__circle"></li>
</ul>
</div>
CSS :
.stepper-wrapper {
display: flex;
flex-direction: row;
}
ul {
border: 1px solid grey;
height: 0px;
position: relative;
top: 40%;
min-width: 100px;
flex: 1;
li.step__bubble {
display: inline-block;
vertical-align: middle;
}
li.step__bubble::before {
content: "";
position: absolute;
top: -9px;
left: calc(50%);
display: block;
width: 16px;
height: 16px;
border: 2px solid grey;
border-radius: 50%;
background: white;
}
li.step__circle {
width: 8px;
height: 8px;
border: 1px solid red;
border-radius: 50%;
display: block;
position: absolute;
top: -4px;
left: calc(50% + 1px);
}
}
What I want to do is :
Having the grey circle vertically and horizontally aligned over the
line. Vertically is not really a pb, I'm able to set a fixed value as the height of the .stepper-wrapper will be fixed. Horizontally needs to be adaptative and it's where I'm stuck.
Having the red circle right inside the grey circle
I tried to use the calc() function and set it to (50% - width_of_element_in_px/2) for both circles, but I don't know why, each px seems to be ~10px.
Thx for your help
Welcome to the club of the LESS users pwned by calc() and string interpolation
I've been using LESS since 5 years and it still happens from time to time :(
Sooo tl;dr calc() was and is a LESS function that its compiler will happily output as some result (probably 50% + 10(stripped) => 60%).
If you want LESS compiler to output calc() the CSS Level 3 function, you need to escape it, that is wrap it in ~"calc(50% + 5px)"!
Codepen
EDIT: also see https://stackoverflow.com/a/17904128/137626
EDIT2: couldn't find an entry about calc in LESS documentation oO but the problem is explained in http://lesscss.org/usage/#command-line-usage-options (search "calc" in text). strict-math is a cool option but you'll have to make sure everybody else has it activated (won't be the case by default)
I want two slide revolutions (or at least one), but with this skin over it:
The overlay image would be on top of the images, so clicking the gallery would be impossible (and the bullets to change image inside of it). I know about map coordinates, but it's a slider revolution, so it will not work in this case I think.
Is there any way to achieve this?
My HTML & CSS so far: (JSFiddle)
<div class="thePNG"></div>
<div class="theSLIDERS">
<div class="fakeSLIDER1">HEY' IM CLICKABLE</div>
<div class="fakeSLIDER2"></div>
</div>
.thePNG {
background-image: url(my-overlay-image.png);
width: 787px;
height: 610px;
background-size: cover;
z-index: 2;
position: relative;
}
.theSLIDERS{
margin-top: -600px;
z-index: 1;
}
.fakeSLIDER1{
background-color: red;
width: 700px;
height: 300px;
text-align: center;
margin: 0 auto 0 auto;
}
.fakeSLIDER2{
background-color: green;
width: 700px;
height: 300px;
}
I found my own answer!
its easy:
CSS:
"pointer-events: none;"
!
I'm using IE10 to design something at the moment [Because it needs to be completely compatible with it], and I'm having trouble.
I have two boxes on either side of the page, with an image at the top. The inner top corner is curved using border-top-*-radius, and this is also implemented on the image inside.
CSS:
#rightsidebar {
position:fixed;
width: 300px;
height: 400px;
padding: 10px;
margin: 0px 0 0 500px;
border-top-left-radius: 110px;
-webkit-border-top-left-radius: 110px;
background-color: #ffffff;
border: 2px dashed #000000;
}
#leftsidebar {
position:fixed;
width: 300px;
height: 400px;
padding: 10px;
margin: 0px 0 0 0px;
border-top-right-radius: 110px;
-webkit-border-top-right-radius: 110px;
background-color: #ffffff;
border: 2px dashed #000000;
}
HTML:
<div id="rightsidebar">
<img style="background-color: #000000; width:300px; height:196px; border-top-left-radius:105px; -webkit-border-top-left-radius:110px;" src="{image:right image}">
</div>
<div id="leftsidebar">
<img style="background-color: #000000; width: 300px; height: 196px; border-top-right-radius: 105px; -webkit-border-top-right-radius: 105px;"src="{image:left image}">
</div>
My JSFiddle is here: http://jsfiddle.net/V73G5/
Using IE, you can see that the right container's image isn't doing the same as the left's, even though I just copy and pasted the code and edited it slightly. It does however work on Chrome, which makes me think this may be a bug. Any insight or suggestions on how to resolve this?
EDIT: I've found a way to work around it using:
border-radius: 105px 1px 0 0;
It's not a proper solution, and I've still no clue as to why this happened in the first place, but the 1px is barely noticeable and seems to make it work.
The behaviour of border radius is affected by compatibility mode in IE10.
If you press F12 you can view the developer console and change the compatability settings.
If the Document mode is set to IE7 or IE8 Standards then the border-radius-left: 10px; doesn't work, however if the standards mode is set to IE9 Standards or Standards then it behaves as expected.
download PIE.htc file and attached your css
#rightsidebar {
border-radius: 8px;
behavior: url(/pie/PIE.htc);
}
for more details check below image one.
may it will help you.
When using a rounded border on an image, webkit browsers hide the border behind the image
CSS
img {
border: 10px solid #000;
border-radius: 100%;
}
HTML
<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
Bug reproduced # http://jsfiddle.net/zPpVm/
This is probably related to this Webkit bug, but I cannot find a suitable work around.
A possible workaround is to use a box-shadow:
box-shadow: 0 0 0 10px black;
Live Example
The main problem: It won't be calculated in the box-model
As another workaround, you can wrap your image like this:
<span class="img_container" >
<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
</span>
Than style elements:
.img_container {
border: 10px solid #000;
border-radius: 100%;
display: inline-block;
overflow: hidden;
}
.img_container img {
display: block;
}
All modern browsers except Opera will render it correctly.
This button is before CSS Sprites
<input type="image" src="/images/search-button.png" value="" id="search-button">
I'm trying to implement CSS Sprites with one of my search form and the problem is that if I use
<input id="search-button" class="sprites1" type="submit" value="">
it will look something like this.
As you can see the image on the right doesn't look right, but it is click-able.
Then I tried with
<span id="search-button" class="sprites1"></span>
Then it looks right! But!! I can't click on it.
So here is my CSS sprites code.
What I have to implement to get it look the one I want and I can click on it?
.sprites1 {
background: url('result.png');
}
#search-button {background-position: -0px -462px;
width:16px; height:16px; float:right; }
The problem here is the default css that the browser uses on elements. You should try resetting that css. I often use the following snippet:
/* reset css of buttons */
.cssresetbutton {
border-width: 0px;
border-style: none;
background: inherit;
font: inherit;
color: blue;
padding: 0px; }
.cssresetbutton:active {
border-width: 0px;
border-style: none;
background: inherit;
outline: 0;
box-shadow: none; }
try adding the cssresetbutton class to your input element and see if it works.
EDIT:
You can also try not using a input[type=submit] element. For example:
<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>
It will submit the form#formid element when clicked.