How can I keep the dropdown open on clicking pumpkin icon be able to type something and close the dropdown when clicking anywhere else on screen except dropdown?
I know that something needs to be done here:
.header-bar-mobile-drop-down__icon-button:focus
.header-bar-mobile-drop-down__item
Note: trying to avoid using JS.
I tried to use &:focus in the parent class but it didn't work
.header-bar__top {
height: 3.5rem;
background-color: greenyellow;
z-index: 100;
/* box-shadow: $header-bar-shadow; */
padding-top: 15px;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar-mobile-drop-down {
display: inline;
}
.header-bar-mobile-drop-down__icon-button {
color: darkblue;
border: none;
background-color: transparent;
font-size: 1.5rem;
float: right;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
visibility: hidden;
opacity: 0;
border: 1px solid orange;
}
.header-bar-mobile-drop-down__icon-button:focus
+ .header-bar-mobile-drop-down__item {
visibility: visible;
opacity: 1;
margin-top: 41px;
height: 4.25rem;
background-color: palegreen;
display: inline-flex;
opacity: 1;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
}
.header-bar-utility {
height: 100%;
padding: 0 0.5rem;
display: flex;
align-items: center;
float: left;
color: pink;
background-color: transparent;
border: none;
font-size: 16px;
line-height: 1.5rem;
text-decoration: none;
cursor: pointer;
}
.header-bar-utility__icon {
display: inline;
font-size: 1.5rem;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./test.css" />
<title>Dropdown</title>
</head>
<body>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down">
<button
class="header-bar-mobile-drop-down__icon-button"
tabindex="1"
>
🎃 1
</button>
<div class="header-bar-mobile-drop-down__item">
<input placeholder="Search" />
</div>
</div>
</div>
</div>
</div>
<h1>Text overlayed</h1>
</body>
</html>
Got the answer which involves using one of new css attributes :focus-within
And moving the dropdown code above to make it a child of the clickable tag, which in my case is button
NOTE: this solution will not work for IE 11
Here is the code:
.header-bar__top {
height: 3.5rem;
background-color: greenyellow;
z-index: 100;
/* box-shadow: $header-bar-shadow; */
padding-top: 15px;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar {
min-height: 3.5rem;
box-shadow: none;
}
.header-bar-mobile-drop-down {
display: inline;
}
.header-bar-mobile-drop-down__icon-button {
color: darkblue;
border: none;
background-color: transparent;
font-size: 1.5rem;
float: right;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
visibility: hidden;
border: 1px solid orange;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.header-bar-mobile-drop-down__icon-button:focus-within
.header-bar-mobile-drop-down__item {
visibility: visible;
opacity: 1;
margin-top: 41px;
height: 4.25rem;
background-color: palegreen;
display: inline-flex;
opacity: 1;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
}
.header-bar-utility {
height: 100%;
padding: 0 0.5rem;
display: flex;
align-items: center;
float: left;
color: pink;
background-color: transparent;
border: none;
font-size: 16px;
line-height: 1.5rem;
text-decoration: none;
cursor: pointer;
}
.header-bar-utility__icon {
display: inline;
font-size: 1.5rem;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
}
.header-bar__toggle-menu {
height: 100%;
padding: 0 1rem 0 0.5rem;
display: flex;
align-items: center;
background-color: transparent;
color: black;
border: none;
font-size: 1.5rem;
min-width: 0;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./test.css" />
<title>Dropdown</title>
</head>
<body>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down">
<button class="header-bar-mobile-drop-down__icon-button">
🎃 1
<div class="header-bar-mobile-drop-down__item">
<input placeholder="Search" />
</div>
</button>
</div>
</div>
</div>
</div>
<h1>Text overlayed</h1>
</body>
</html>
so I'm trying to create my blog using the react framework, but I'm facing an issue here.
I really have been trying to tweaks settings on the css, html or even try to switch to grid instead of flexbox but I can't figure out how to make the "fixed" navbar detected by the flexbox.
Currently, the navbar works fine I guess, but the content that is supposed to be on the right, is not taking the place it should, it's taking the entire screen instead of the rigth section next to the navbar.
Some help would be highly appreciated !
body {
overflow: hidden;
height: 100vh;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.nav-tab-text{
font-size: 1.6em;
display: block;
padding: 00px 0px 50px 0px;
text-align: center;
list-style-type: none;
display: flex;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
position: fixed;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
align-self: center;
margin-top: 3%;
}
.test{
display: flex;
}
function Navbar() {
return (
<div className="flex-container">
{/*left box - Navbar*/}
<nav className="nav-tab">
Home
Articles
Archives
About
</nav>
{/*Right box - Home content*/}
<div className="home-content-container">
<div className="home-content-title">
<h3>Name</h3>
</div>
<div className="home-content-featured">
<p>1</p>
</div>
</div>
<div className="test">
<p>2</p>
</div>
</div>
);
}
export default Navbar;
import Navbar from "./components/Navbar";
function App() {
return (
<div>
<Navbar />
</div>
);
}
export default App;
body {
overflow: hidden;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.flex-container{
display: flex;
flex-flow: row;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
display: flex;
flex-direction: column-reverse;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
margin-top: 3%;
align-self: center;
}
I want to have a column of identical object center in the midle of the page. the objects id is: total-score and the container id is: results. I try to use flex but I cannot figure it out how to center it in any way. I tryed to use align-content:center and justify-content: center but they seems to dont do anything. why? I attached just the css and the html. SO does not let me attache the entire code.
#import url(https://fonts.googleapis.com/css?family=Work + Sans:300, 600);
body {
font-size: 12px;
font-family: "Work Sans", sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1 {
font-weight: 300;
margin: 0px;
padding: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="radio"] {
height: 1.6em;
width: 1.6em;
}
button {
font-family: "Work Sans", sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin: 20px 10px;
z-index: 3;
display: block;
font-size: 2em;
}
button:hover {
background-color: #38a;
}
.question {
font-size: 3em;
margin-bottom: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.answers {
margin-bottom: 20px;
text-align: left;
display: inline-block;
font-size: 3em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.answers label {
display: block;
margin-bottom: 10px;
}
.slide {
position: static;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
display: none;
}
.active-slide {
display: block;
z-index: 2;
}
.quiz-container {
position: static;
height: auto;
margin-top: 40px;
}
#results {
display: flex;
flex-direction: column;
justify-content: center;
width: 10%;
}
#total-score {
padding-top: 10px; /* Add top padding */
padding-bottom: 10px; /* Add bottom padding */
width: 100%;
height: 100%;
background: rgb(255, 0, 0);
background: linear-gradient(
90deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 140, 0, 1) 50%,
rgba(50, 205, 50, 1) 100%
);
}
#media (min-width: 500px) {
body {
font-size: 18px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="QuizTransition.css">
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="container">
<div>
<h1 id="question-numer">
Intrebarea numarul:
</h1>
</div>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
</div>
<div id="results">
<div id="total-score">
</div>
<div id="total-score">
</div>
<div id="total-score">
</div>
</div>
<script src="QuizLogic.js"></script>
</div>
</body>
</html>
First, you should not use the same id in multiple elements. It should be unique. Instead of making the wrapper #results smaller, you can set it to full width and make the children .total-score smaller. Alternatively, you could wrap the children with another container and center it.
Try changing your code to the following:
body {
font-size: 12px;
font-family: "Work Sans", sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1 {
font-weight: 300;
margin: 0px;
padding: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="radio"] {
height: 1.6em;
width: 1.6em;
}
button {
font-family: "Work Sans", sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin: 20px 10px;
z-index: 3;
display: block;
font-size: 2em;
}
button:hover {
background-color: #38a;
}
.question {
font-size: 3em;
margin-bottom: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.answers {
margin-bottom: 20px;
text-align: left;
display: inline-block;
font-size: 3em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.answers label {
display: block;
margin-bottom: 10px;
}
.slide {
position: static;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
display: none;
}
.active-slide {
display: block;
z-index: 2;
}
.quiz-container {
position: static;
height: auto;
margin-top: 40px;
}
#results {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.total-score {
padding-top: 10px; /* Add top padding */
padding-bottom: 10px; /* Add bottom padding */
width: 10%;
height: 100%;
background: rgb(255, 0, 0);
background: linear-gradient(
90deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 140, 0, 1) 50%,
rgba(50, 205, 50, 1) 100%
);
}
#media (min-width: 500px) {
body {
font-size: 18px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="QuizTransition.css">
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="container">
<div>
<h1 id="question-numer">
Intrebarea numarul:
</h1>
</div>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
</div>
<div id="results">
<div class="total-score">
a
</div>
<div class="total-score">
b
</div>
<div class="total-score">
c
</div>
</div>
<script src="QuizLogic.js"></script>
</div>
</body>
</html>
I think you need to center #result identifier.
#results {
display: flex;
align-items: center;
justify-content: center;
width: 10%;
}
#results div {
width: 100px;
height: 100px;
}
This will fix your problem. Thanks
#results {
display: flex;
flex-direction: column;
justify-content:center;
align-items: center;
width: 100%;
/* background:olive; */
}
#total-score {
padding-top: 10px; /* Add top padding */
padding-bottom: 10px; /* Add bottom padding */
width: 10%;
height: 100%;
background: rgb(255, 0, 0);
background: linear-gradient(
90deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 140, 0, 1) 50%,
rgba(50, 205, 50, 1) 100%
);
}
An element needs to be assigned position with the value of absolute, relative, fixed, or sticky in order to have z-index to function.
Flex container is the term used to refer to an element that is is assigned display: flex. If you need its descendant elements (referred to as flex items) be centered horizontally, assign the flex container justify-content: center. If you need the flex items to be stacked vertically, assign the flex container flex-direction: column or flex-flow: column {nowrap or wrap}
I revamped ... well everything because as a slider it will be very problematic should you continue with the original code. The solution to your problem (as I can best as I could tell, because the question was vague), can be found reviewing the CSS rulesets dealing with .total-score.
#import url(https://fonts.googleapis.com/css?family=Work + Sans:300, 600);
:root,
body {
width: 100%;
height: 100%;
font: 300 12px/1.5 "Work Sans", sans-serif;
color: #333;
text-align: center;
background-color: #f8f6f0;
user-select: none;
}
body {
overflow-y: scroll;
overflow-x: hidden;
padding: 0;
}
input,
button {
font: inherit;
font-size: 1rem;
}
.container {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 100%;
height: 100%;
margin: 10px auto;
}
h1 {
font-weight: 300;
margin-bottom: 20px;
}
.quiz {
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: spacer-between;
align-items: center;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
left: 0;
top: -20px;
width: 90%;
min-height: max-content;
z-index: -1;
display: none;
}
.slide.active {
display: block;
z-index: 0;
background: #fff;
}
.slide p,
.slide ol,
.slide [type=radio] {
font-size: 1.25rem;
text-align: left;
}
.slide p {
text-indent: 30px;
margin: 0 auto;
}
.slide ol {
margin: 0 auto;
list-style-type: none;
list-style-position: outside;
}
.slide ol label::before {
content: attr(for)'. ';
}
.slide [type=radio] {
width: 1.4rem;
height: 1.4rem;
}
.slide [type=radio],
.slide label {
display: inline-block;
line-height: 18px;
height: 18px;
vertical-align: middle;
}
fieldset {
border: 0;
}
button {
font-size: 1.75rem;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 1px 5px;
cursor: pointer;
display: inline-block;
text-align: center;
}
button:hover {
background-color: #38a;
}
.next,
.prev {
position: absolute;
z-index: 1;
top: 4rem
}
.prev {
left: 0;
}
.next {
right: 35px;
}
.total-score {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 0px;
padding-bottom: 10px;
background: linear-gradient( 90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 140, 0, 1) 50%, rgba(50, 205, 50, 1) 100%);
color: navy;
}
.total-score output,
.total-score b {
display: inline-block;
font-size: 1.5rem;
}
.total-score label {
width: 50%;
margin-bottom: -5px;
}
.total-score b {
width: 8ch;
text-align: left;
}
.total-score output {
width: 4ch;
font-family: Consolas;
text-align: right;
}
#media (min-width: 500px) {
:root,
body {
font-size: 18px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<form class="container">
<h1>Quiz Question <output id='number'>1</output></h1>
<fieldset class="quiz">
<button class="prev" type='button'>â—€</button>
<fieldset class='slide active' data-num='1'>
<p class='question'>This is a question?</p>
<ol class='choice'>
<li><input id='a' name='pick' type='radio' value='0'> <label for='a'>This is choice A</label></li>
<li><input id='b' name='pick' type='radio' value='0'> <label for='b'>This is choice B</label></li>
<li><input id='c' name='pick' type='radio' value='1'> <label for='c'>This is choice C and is correct (value = '1')</label></li>
<li><input id='d' name='pick' type='radio' value='0'> <label for='d'>This is choice D</label></li>
</ol>
</fieldset>
<button class="next" type='button'>â–¶</button>
</fieldset>
<fieldset class='total-score'>
<label><b>Correct:</b> <output id="correct">0</output></label>
<label><b>Total:</b> <output id="total">0</output></label>
<label><b>Score:</b> <output id="score">0</output></label>
</fieldset>
</form>
</body>
</html>
I'm having problems getting an input and button to vertically align flush. Both the same height.
I've tried float, inline-block and removed the default browser appearance too.
Cheers
https://jsfiddle.net/qLuo8jd8/
body {
background: grey;
}
.editing-form {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}
.editing-input {
-webkit-appearance: none;
width: 500px;
height: 45px;
padding: 0;
margin: 0;
padding-left: 20px;
font-size: 13px;
background-color: #fff;
box-shadow: 0;
border-width: 0;
color: #363636;
}
.editing-input:focus {
outline: none;
}
.editing-submit {
-webkit-appearance: none;
padding: 0;
margin: 0;
width: 100px;
height: 45px;
background-color: blue;
color: #fff;
border: 0;
}
.editing-submit:focus {
outline: none;
}
<form class="editing-form">
<input class="editing-input" type="text" />
<button type="button" class="editing-submit">Save Title</button>
</form>
remove display: flex; from .editing-form and check it will work
I am making a layout for one of my sites and i have a div in the middle of the page. When i type text into the div there seems to be a big gap between the border of the div and the text. i have set padding to 0 on the div and it is still applying some sort of padding. i have tested this on IE 10 and Google Chrome 29. My code is below Here is a jsFiddle.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Club Website</title>
<link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
<link rel="stylesheet" href="Assets/Stylesheets/Bootstrap/css/bootstrap.min.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Assets/Scripts/Javascript/jQuery/jQuery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
});
</script>
</head>
<body>
<div id="Wrapper">
<div id="Header">
<div id="HeaderInner">
Main Page
Other Page
Other Page
Other Page
Other Page
</div>
</div>
<div id="Body">
<div id="BodyInner">
Hi
</div>
</div>
</div>
</body>
</html>
CSS
/* Layout */
html, body, #Wrapper {
width: 100%;
min-width: 1000px;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
#Header {
width: 100%;
height: 45px;
display: block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #333;
box-shadow: 2px 2px 3px #999;
}
#HeaderInner {
width: 965px;
height: 45px;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
line-height: 45px;
text-align: center;
}
#Body {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 45px;
left: 0;
background-color: transparent;
}
#BodyInner {
width: 965px;
height: auto;
min-height: 100%;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
word-wrap: break-word;
white-space: pre-wrap;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
/* Layout */
/* Links */
.HeaderLink {
color: #999;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
cursor: pointer;
margin: 0 15px;
}
.HeaderLink:hover {
text-decoration: none;
color: #FFF;
}
.HeaderSelectedLink {
color: #FFF;
}
/* Links */
The spacing is caused by the following CSS rule:
white-space: pre-wrap;
Which renders similarly to the <pre> tag, drawing a line for every newline/line-break in the HTML source.
So with the following HTML:
<div id="BodyInner">
Hi
</div>
the whitespace before and after Hi are being drawn on-screen.
remove
white-space: pre-wrap;
BodyInner in your code,
refer this: http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-wrap