By default, the handles in React rc-slider are translated by -50% and their style is that the handle overlaps the rail,
but I need the handles to be contained within the rail, after expanding the rail and shrinking the handles the style presents as below
as you can see, the handles are outside the track and I need them to be contained within, I have tried to translate them by zero or by 0 for the left one and 100% for the right one, but this would cause them to overlap one another like so if not that they overlap, this would be the behavior I am after
here are my styles
.rc-slider {
position: relative;
height: 16px;
padding: 5px 0;
width: 100%;
border-radius: 6px;
touch-action: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: transparent;
display: flex;
align-items: center;
}
.rc-slider * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
position: absolute;
width: 100%;
background-color: #f9f8f8;
height: 100%;
border-radius: 6px;
}
.rc-slider-track {
position: absolute;
height: 100%;
border-radius: 6px;
background-color: #CDEA9F;
opacity: 70%;
}
.rc-slider-handle {
position: absolute;
width: 24px;
height: 12px;
cursor: pointer;
cursor: -webkit-grab;
cursor: grab;
border-radius: 40%;
background-color: #8ECC29;
touch-action: pan-x;
}
.rc-slider-handle-1 {
transform: translateX(0) !important; <- this is wrong as can overlap
}
.rc-slider-handle-2 {
transform: translateX(-100%) !important;<- this is wrong as can overlap
}
because the width is set dynamically I can not scale it or anything. I ran out of ideas so please help :)
Thanks a lot
Related
With the following styles:
#fullpage-menu > .gradient {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.3rem;
}
where #fullpage-menu has the styling:
#fullpage-menu {
height: 100%;
width: 100%;
background-color: var(--secondary-button-color);
left: 0;
position: absolute;
top: 0;
animation: expand-fullpage-menu 500ms cubic-bezier(0.42, 0, 0.07, 1.43);
z-index: 1001;
animation-fill-mode: both;
padding: 1rem;
box-sizing: border-box;
overflow: hidden;
transform: translate(-100%);
overflow-y: auto;
}
and
.apply-for-org .apply-button {
background-color: var(--dark-secondary-button-color);
padding: 0.5rem 1rem;
border-radius: 10rem;
border: none;
cursor: pointer;
color: var(--title-color);
transition: all 300ms ease-out;
user-select: none;
display: block;
clear: left;
font-size: 1.3rem;
text-transform: capitalize;
font-family: bahnschrift;
letter-spacing: 0.05em;
margin: 1rem 0 0 1rem;
position: fixed;
bottom: 1rem;
left: 50%;
transform: translate(-50%);
font-weight: lighter;
}
Where .gradient is displayed on the bottom of each fullscreen menu, and .apply-button is displayed at the bottom of the .apply-for-org <div>, which also has the id #fullpage-menu.
In other words, the .apply-for-org menu should have a gradient bar at the bottom, which should stay there when scrolling through the div if the content height exceeds the screen height.
In addition, the HTML would look like this for a fullpage-menu:
<div id="fullpage-menu" class="apply-for-org">
<!--Content and other cool stuff-->
<button class="apply-button">Apply for Organisation</button>
<div class="gradient"></div>
</div>
So why does this not work? Why doesn't the gradient bar and the apply button stick to the bottom of the screen when scrolling through the content?
EDIT 15/04/2021:
#fullpage-menu {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #121a21;
overflow-y: auto;
}
#fullpage-menu > button.close {
padding: 0.5rem 1rem;
position: absolute;
top: 1rem;
right: 1rem;
border-radius: 10rem;
font-family: bahnschrift;
background-color: #070b0e;
border: none;
color: white;
}
#fullpage-menu .gradient {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.2rem;
background: rgb(131,58,180);
background: linear-gradient(41deg, rgba(131,58,180,1) 0%, rgba(181,73,227,1) 28%, rgba(253,29,29,1) 83%, rgba(252,145,69,1) 100%);
}
.apply-for-org .apply-button {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translate(-50%);
background-color: #070b0e;
border-radius: 10rem;
border: none;
color: white;
padding: 0.5rem 1rem;
font-family: bahnschrift;
cursor: pointer;
}
/*Styling exclusive for this example*/
#example-content {
height: 100rem;
width: 70%;
margin: auto;
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
opacity: 0.5;
}
<div id="fullpage-menu" class="apply-for-org">
<button class="close">Close</button>
<div id="example-content"></div>
<button class="apply-button">Apply for Organisation</button>
<div class="gradient"></div>
</div>
I also noticed that it works just fine in the code snippet that I posted, but apparently it doesn't work as well on my locally hosted server..
If it matters, I'm using .ejs instead of .html, but it shouldn't be of any importance (i believe)
For anyone having the same problem in the distant or near future, it can be fixed by wrapping all the content in another div with position:block attribute:
<div id="fullpage-menu" class="apply-for-org">
<div class="main-wrapper">
<!--Place all the fancy content here-->
<div class="gradient"></div>
<button class="apply-button">Apply for Organisation</button>
</div>
</div>
And then by giving these styles, everything will work :)
#fullpage-menu {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #121a21;
overflow-y: auto;
}
#fullpage-menu .gradient {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.2rem;
background: rgb(131,58,180);
background: linear-gradient(41deg, rgba(131,58,180,1) 0%, rgba(181,73,227,1) 28%, rgba(253,29,29,1) 83%, rgba(252,145,69,1) 100%);
}
.apply-for-org .apply-button {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translate(-50%);
background-color: #070b0e;
border-radius: 10rem;
border: none;
color: white;
padding: 0.5rem 1rem;
font-family: bahnschrift;
cursor: pointer;
}
/*This part is important!*/
.apply-for-org > .main-wrapper {
height: 100%;
width: 100%;
overflow-y: auto;
}
I don't know why, apparently my CSS and HTML knowledge is too limited, or I am too stupid, but at least this works. It wouldn't work without the .main-wrapper element wrapping all of the content.
EDIT:
disinfor mentioned something that might just as well work, haven't tried it though:
A fixed element can be positioned against its parent, if you set a transform property on the parent. Try adding transform: translate(0,0) to the parent element.
I want to get the element to move to another elements when the elements are hovered on.
Those elements are sibling since I want the one to overlay the another.
The following HTML and CSS give me not bad result.
But I don't want to use constant values for "width" and "left" to animate them.
Is there some way to place the moving element on the hovered elements without using constant position values?
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
nav .start-home,
a:nth-child(1):hover~.animation {
width: 105px;
left: 0;
background-color: #1abc9c;
}
nav .start-blog,
a:nth-child(2):hover~.animation {
width: 105px;
left: 105px;
background-color: #e74c3c;
}
nav .start-projects,
a:nth-child(3):hover~.animation {
width: 135px;
left: 210px;
background-color: #3498db;
}
nav .start-about,
a:nth-child(4):hover~.animation {
width: 115px;
left: 345px;
background-color: #9b59b6;
}
nav .start-contact,
a:nth-child(5):hover~.animation {
width: 130px;
left: 460px;
background-color: #e67e22;
}
nav {
margin: 27px auto 0;
position: relative;
display: table;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
white-space: nowrap;
}
nav a {
line-height: 50px;
padding: 2px 30px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
<nav>
Home
Blog
Projects
About
Contact
<div class="animation start-home"></div>
</nav>
I couldn't find the way to do it with only CSS, so I used JavaScript and modify style of elements.
It was kind of what I did not want to do.
If you know how to do it with only CSS, let me know.
I am using a template form I found which gives me a neat checklist form that I can use for a website I'm trying to develop (I'm doing this to learn)
So I want to know how to make these buttons:
appear on the right side of the text (I want to use RTL language)
To make it easier, here is the fiddle:
https://jsfiddle.net/h1jokddo/
I tried to modify the css code, adding "margin: right" to some of the properties but no luck:
body {
background: #069ffb;
color: #fff;
}
.ac-custom {
padding: 0 3em;
max-width: 900px;
margin: 0 auto;
}
.ac-custom ul,
.ac-custom ol {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 800px;
}
.ac-custom li {
margin: 0 auto;
padding: 2em 0;
position: relative;
}
.ac-custom label {
display: inline-block;
position: relative;
font-size: 2em;
padding: 0 0 0 80px;
vertical-align: top;
color: rgba(0, 0, 0, 0.2);
cursor: pointer;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.ac-custom input[type="checkbox"],
.ac-custom label::before {
width: 50px;
height: 50px;
top: 50%;
left: 0;
margin-top: -25px;
position: absolute;
cursor: pointer;
}
.ac-custom input[type="checkbox"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
}
.ac-custom label::before {
content: '';
border: 4px solid #fff;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.ac-radio label::before {
border-radius: 50%;
}
.ac-custom input[type="checkbox"]:checked + label {
color: #fff;
}
.ac-custom input[type="checkbox"]:checked + label::before {
opacity: 0.8;
}
/* General SVG and path styles */
.ac-custom svg {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
left: 5px;
pointer-events: none;
}
.ac-custom svg path {
stroke: #fdfcd3;
stroke-width: 13px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
/* Box Fill */
.ac-boxfill svg path {
stroke-width: 8px;
}
I need to know what to change there.
As I stated before, this is something I'm doing in order to learn, this is how I learn at least, I take something that is already working, and try to find out what makes everything work.
Remove the padding from your label and add the desired amount of pixels to left of your checkbox in the css. Also add the amount of pixels to the left of the svg
Like so:
.ac-custom label {
display: inline-block;
position: relative;
font-size: 2em;
padding: 0 0 0 0px;
vertical-align: top;
color: rgba(0, 0, 0, 0.2);
cursor: pointer;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.ac-custom input[type="checkbox"],
.ac-custom label::before {
width: 50px;
height: 50px;
top: 50%;
left: 50px;
margin-top: -25px;
position: absolute;
cursor: pointer;
}
.ac-custom svg {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
left: 55px;
pointer-events: none;
}
See fiddle
Add the below code at the end of your css
.ac-custom label {
padding: 0;
}
.ac-custom input[type="checkbox"], .ac-custom label::before {
left: 40px;
}
.ac-custom svg {
top: 54%;
left: 49px;
}
Updated : https://jsfiddle.net/arifahmedjoy/h1jokddo/7/
I have a div that features 4 side by side images, along with some text over the images. Rather than shrink the images and text when it's on mobile, I'd like to stack the images on top of each other. However, I'm stuck when I try to do it.
I played with the styles,and was never able to make this happen.
I created this JS Fiddle (https://jsfiddle.net/deadendstreet/pwrd78gv/) with some test images, however, only one image is showing up. This is not a problem on my website. Additionally, I pasted the styles below.
Thank you for your help.
#highlights {
width: 100%;
max-height: 200px;
background: rgba(0, 0, 0, 0.89);
overflow: hidden;
position: absolute;
bottom: 200px;
}
#featured-boxes-light {
width: 100%;
max-height: 200px;
background: rgba(255, 255, 255, 0.03)
}
#highlights .swiper-slide {
position: relative;
cursor: pointer;
}
#highlights .title-top, #featured-boxes .title-bottom {
background: rgba(0, 0, 0, 0.48);
width: 100%;
position: absolute;
padding: 10px 20px 10px;
color: white;
font-size: 22px;
text-align: left;
/* margin-top: -36px; */
left: 0%;
/* margin-left: -35%; */
line-height: 22px;
bottom: 0px;
height: auto;
z-index: 1;
}
.swiper-wrapper {
max-height: 200px;
}
.fb-header {
display: block;
font-size: 16px;
color: rgb(255, 0, 0);
font-weight: 600;
letter-spacing: 2px;
text-shadow: 0px 0px 3px black;
opacity: .9;
width: 25%;
}
.fb-title .title-top:hover {
opacity: .8 !important;
}
.fb-zoom {
max-width: 350px;
width: 100%;
height: 200px;
overflow: hidden;
}
.fb-zoom img {
max-width: 350px;
width: 100%;
height: auto;
}
.fb-swipe-left, .fb-swipe-right {
height: 195px;
width: 40px;
position: absolute;
top: 0px;
z-index: 999;
background-size: contain !important;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
}
.fb-swipe-left:hover, .fb-swipe-right:hover {
background-color: rgba(255, 255, 255, 0.33);
}
.fb-swipe-left {
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png") center center no-repeat rgba(255,255,255,0.25);
left: -40px;
}
.fb-swipe-left.fb-hovered {
left: 0;
}
.fb-swipe-right {
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png") center center no-repeat rgba(255,255,255,0.25);
right: -40px;
}
.fb-swipe-right.fb-hovered {
right: 0;
}
.swiper-scrollbar {
height: 5px;
position: absolute !important;
width: 100%;
bottom: 0px;
margin: 0 auto;
z-index: 999;
background: rgba(255, 255, 255, 0.14) !important;
}
.swiper-scrollbar-drag {
background: rgba(255, 255, 255, 0.7) !important;
}
https://jsfiddle.net/hon8trkz/
add this media query (width to be adjusted to your requirements):
#media screen and (max-width: 600px;) }
.fb-zoom, .fb-zoom img {
max-width: none;
height: auto;
}
}
It sets the width of the images and their container to 100% on screens below 600px width. The height: auto; is optional - don't know if you want that.
As #Johannes said, you can add a media query with a specific behavior to get the wanted result.
His query works fine, I just corrected your HTML structure for the last picture :
<div class="swiper-slide">
<a class="fb-title" href="">
<div class="title-top">
test </div>
<div class="fb-zoom">
<img width="400" height="224" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSkbgZKjIRwUafNM8Nbo5BwoaJWk7byZbD82LOqVAwku6jC1DM_Ig" class="attachment-small" alt="100 Songs from SXSW mixtape" />
</div>
</a><!--/.swiper-wrapper -->
</div><!--/#swiper-featured -->
Fiddle here
I have been created simple menu with single button from this link http://codepen.io/MrBambule/pen/jIseg
Now i want to reduce the size of the button,
So that i changed the code like this,
.button {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}
.line {
background: #ccc;
width: 43px;
height: 7px;
margin: 5px auto;
}
.line__first {
margin-top: 9px;
}
index.js:
// function to trigger animation
$('.button').click(function() {
// check if the menu-items are hidden behind the button
if ($('.menu__list').hasClass('hidden')) {
// add class to make the menu-items drop down
$('.item1').addClass('list--animation');
// the following items trigger the animation after a certain delay
$('.item2').addClass('list--animation--delay1');
$('.item3').addClass('list--animation--delay2');
// remove the hidden class from the ul container to show that the items are not hidden anymore
$('.menu__list').removeClass('hidden');
}
else {
// remove class to make the menu-items disappear
$('.item1').removeClass('list--animation');
$('.item2').removeClass('list--animation--delay1');
$('.item3').removeClass('list--animation--delay2');
// add the hidden class to the ul container to show that the items are now hidden again
$('.menu__list').addClass('hidden');
}
});
So the button size reduced, but when i click the button, it shows the lists are not properly.
Can anybody help me, how to solve this one, thanks in advance.
Change your CSS as below.
Workin JSFIDDLE Here
CSS
.button {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}
.line {
background: #ccc;
width: 15px;
height: 5px;
margin: 2px auto;
}
.line__first {
margin-top: 15px;
}
.menu {
z-index: 1;
float: left;
width: 100%;
}
.menu__list {
width: 100%;
margin-left:-110px;
margin-top:-10px;
}
/* Animation keyframes for the drop down */
#keyframes drop {
from {
top: 0px;
}
70% {
top: 85px;
animation-timing-function: ease-in;
}
to {
top: 70px;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes drop {
from {
top: 0px;
}
70% {
top: 85px;
-webkit-animation-timing-function: ease-in;
}
to {
top: 70px;
-webkit-animation-timing-function: ease-out;
}
}
li {
position: relative;
list-style: none;
padding-bottom: 0px;
top: 0px;
}
li a {
text-decoration: none;
color: grey;
text-align: center;
font-size: 0.7em;
font-family: 'Open Sans', sans-serif;
}
Working Demo Here
Update 1 : See the Updated Link here
Update 2: Working Demo with large font
.button {
margin: auto; //try this.
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}