I am trying to display the dropdown menu using position absolute, but the div becomes non-clickable.
I have tried using overflow auto, white-space: nowrap, z-index: 999, pointer-events none of these worked
I want this dropdown to come as a normal logout menu overlapping on all columns and text.current state of my dropdown menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>pagedemo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<style>
.dropdown{
border-radius: 4px;
background-color: white;
width: 8.25rem;
left: 3rem;
min-height: 4rem;
color: gray;
bottom: 0rem;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.11);
overflow-x: scroll;
background-color: yellowgreen;
padding:10px;
margin-top: 10rem;
}
.dropdownOption{
width: 8.25rem;
}
.dropdownOption:hover{
cursor: pointer;
background-color: honeydew;
}
.leftNav{
background-color: white;
height: 100vh;
}
</style>
<body style="background-color: bisque;">
<div class="container">
<div class="row">
<div class="col-1, leftNav" >
<div class="dropdown">
<div class="dropdownOption">
logout
</div>
<div class="dropdownOption">
account settings
</div>
</div>
</div>
<div class="col-10" style="background-color: tomato;">
data
</div>
</div>
</div>
</body>
</html>
You should add a z-index on your .leftNav component to ensure it's in front of your main col.
Fiddle : https://jsfiddle.net/azkq2480/
Related
Is there a way I could attain a 2 1 alignment? Trying to achieve this via flexbox, But there doesn't seem to be an option for this directly in flexbox.
I'm looking to achieve the alignment 2 in a row and 1 to the right side aligned to the middle of the 2 as follows.
This is the current outcome with my CSS.
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css">
<title>Card App</title>
</head>
<body>
<div class="container">
<div class="card-group">
<div class="card">
<h4>Collections</h4>
<p>Create Multiple Collections to have everything organized and download in any format you need.</p>
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</body>
</html>
My CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #232737;
color: #8C90A0;
}
.container {
margin: auto;
padding: 20px;
display: flex;
justify-content: center;
}
.card-group {
background-color: #1F2333;
width: 450px;
height: 500px;
padding: 20px;
}
.card {
padding: 20px;
gap: 10px;
background-color: #232737;
height: 150px;
width: 350px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
I added a div in you html and a couple of classes, and changed the css a bit:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #232737;
color: #8C90A0;
}
.container {
margin: auto;
padding: 20px;
display: flex;
justify-content: center;
}
.card-group {
background-color: #1F2333;
width: 450px;
height: 500px;
padding: 20px;
}
.card {
padding: 20px;
gap: 10px;
background-color: #232737;
height: 150px;
width: 350px;
display: flex;
justify-content: space-around;
}
.content h4{
margin-bottom: 20px;
color: #DDDDDD;
}
.arrow{
align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css">
<title>Card App</title>
</head>
<body>
<div class="container">
<div class="card-group">
<div class="card">
<div class="content">
<h4>Collections</h4>
<p>Create Multiple Collections to have everything organized and download in any format you need.</p>
</div>
<i class="fa fa-angle-right arrow"></i>
</div>
</div>
</div>
</body>
</html>
I already did a circle with my input of type color I need that circle to be inside of another one, I already tried out with some things but doesn't work with an input, I would like to know how can I do that?
The circle its actually inside of the other one the thing it's you can't actually see it, how can I solve this?
This is how it should looks like: https://www.screencast.com/t/0Xw9Sv4NDgqT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
<style>
input[type="color"] {
opacity: 0;
display: block;
width: 22px;
height: 22px;
border: none;
border-radius: 50% !important;
position: relative;
}
#color-picker-wrapper {
width: fit-content;
height: fit-content;
border-radius: 50% !important;
position: relative;
}
.pick-color{
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2 ;
}
.outer {
background-color:white;
width:2rem; /* You can define it by % also */
height:2rem; /* You can define it by % also */
position:relative;
border:2px solid #A2A2A2 ;
border-radius: 50%;
}
.inner {
top: 25%; left:25%; /* of the container */
width:50%; /* of the container */
height:50%; /* of the container */
border:1px solid black;
border-radius: 50%;
opacity: 0;
}
</style>
</head>
<body>
<!--<div id="wrapper" style="text-align: center;">
<input type="text" id="hex">
<input type="color" id="color">
</div>-->
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
<div class="outer circle shapeborder">
<input type="color" class="inner">
</div>
</div>
<!--This is for testing, this change the background of the body and set the color HEX to the input-->
<script>
/*let inputColor = document.querySelector('#color');
let inputHex = document.querySelector('#hex');
let borderColor = document.getElementById('color');
let colorWrapper = document.getElementById('wrapper');
colorWrapper.style.backgroundColor = borderColor.value;
inputColor.addEventListener('input', () => {
let color = inputColor.value;
inputHex.value = color;
document.body.style.backgroundColor = color;
});*/
var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
</script>
</body>
</html>
The idea here is that you will have:
An outermost div (#color-picker-container): responsible for the outer border.
An inner div (#color-picker-wrapper) a little bit smaller: responsible for presenting the picked color.
An innermost input (#color-picker): set opacity:0 to be hidden away
const color_picker = document.getElementById("color-picker");
const color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
input[type="color"] {
opacity: 0;
}
#color-picker-container {
border-radius: 50%;
border: 2px solid #A2A2A2;
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
#color-picker-wrapper {
border-radius: 50%;
width: 80%;
height: 80%;
}
.pick-color {
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
</head>
<body>
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-container">
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
</div>
</div>
</body>
</html>
I have this animation that works well if appllied to some div background image but when I tried to put some elements inside the content go below, I tried disabling content: '' but I lost the animation effect.
The goal here is invert colors of all elements, text and image using the CSS filter, I tried with the actual settings it works as expected and I am getting the result I want (white/red).
The only issue I am facing is putting the content inside the div :
html,
body {
background-color: #ddd;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.banner {
width: 936px;
height: 288px;
color: #fff;
background-color: #cc0000;
transition: 2s all;
}
.logo {
width: 298px;
height: 91px;
}
.banner:before {
display: block;
height: 100%;
content: "";
background: inherit;
background-clip: content-box;
box-sizing: inherit;
transition: 2s all;
padding-left: 0;
filter: brightness(0%) sepia(1) invert(1);
}
.banner:hover:before {
padding-left: 936px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="banner">
<img class="logo" src='https://image.flaticon.com/icons/svg/1852/1852293.svg' />
<p>Coming soon</p>
<div class="container">
<div class="row">
<div class="col-xs-3">
<h1>89</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>60</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>24</h1>
</div>
</div>
</div>
</div>
</body>
</html>
This is my code Im trying to get it centered in the middle of the page
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>cp</title>
</head>
<body>
<div class="well">
<font face="arial" size="5" color="#000000"><center><b>Control Panel</font></center>
</div>
</style>
<style type="text/css">
.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top: 25%;
}
</style>
<div class="span12">
Welcome
</div>
<script src="js/bootstrap.js"></script>
It re-sizes with the page but I cant get the whole thing to be in the center of the page.
I just want the whole thing in the middle of the page
Remove the center tag and set margin-top:25%, It will solve your problem.
CSS
.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top:25%; /* new */
}
HTML
<div class="span12">
Welcome
</div>
jsFiddle Live Demo
I want my 3 child divs to be stretched 100% vertically, and I want them to be next to each other horizontally. So If I resize my parent div, child divs will resize accordingly, but would always stay next to each other horizontally (each would take approximately 33% width)
So here is the CSS:
.appcontent {
position: absolute;
left: 80px;
right: 50px;
top: 30px;
max-width: 1050px;
min-height: 400px;
border: 2px solid black;
}
.box {
display: inline-block;
height: 98%;
padding: 10px;
border: 2px solid black;
}
And HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
<script src="jquery.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="appcontent">
<div class="box">
<h3>App 1</h3>
</div>
<div class="box">
<h3>App 2</h3>
</div>
<div class="box">
<h3>App 3</h3>
</div>
</div>
</body>
</html>
just in case I also put it here http://jsfiddle.net/naWsh/
I answered this question before with a comprehensive explanation Fluid design
Just in stead of 400% make it 100% and its children 33%