The place holder was appearing before on the right hand side and was working properly. I am using it to show suggestions to the user. Also in debugging mode ive checked that the text is present there in the placeholder value of the div but is not visible.
* {
box-sizing: border-box;
padding-bottom: 5px;
margin-bottom: 10px;
}
:host #fBar {
position: absolute;
display: block;
}
:host div {
position: relative;
overflow: hidden;
width: calc(100% - 10px);
margin: 0 5px;
height: 30px;
background-color: white;
/*border-bottom: solid 2px #1f1f1f;*/
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
font-size: 15px;
justify-content: center;
font-weight: 200px;
align-items: center;
line-height: 25px;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
}
:host div[contenteditable=true]::after {
position: absolute;
line-height: 25px;
right: 5px;
content: attr(placeholder);
pointer-events: none;
opacity: 0.6;
color: blue;
border: 1px solid red;
}
<div contenteditable="true" placeholder="I AM A PLACE HOLDER"></div>
Changes: removed :host from :host div[contenteditable=true]::before
<style>
* {
box-sizing: border-box;
padding-bottom: 5px;
margin-bottom: 10px;
}
:host #fBar {
position: absolute;
display: block;
}
:host div {
position: relative;
overflow: hidden;
width: calc(100% - 10px);
margin: 0 5px;
height: 30px;
background-color: white;
/*border-bottom: solid 2px #1f1f1f;*/
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
font-size: 15px;
justify-content: center;
font-weight: 200px;
align-items: center;
line-height: 25px;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
}
div[contenteditable=true]::before {
position: absolute;
line-height: 25px;
right: 5px;
content: attr(placeholder);
pointer-events: none;
opacity: 0.6;
color:blue;
border:1px solid red;
}
</style>
<div contenteditable="true" placeholder="I AM A PLACE HOLDER"></div>
Related
I'm trying to remove the ring around a material icon that I'm using as a close icon on a draggable element.
Here's a picture of the element (I've changed the background to red for you to highlight the problem), I want to remove the red outer circle so the nice border of the element goes all the way to the edge of the grey circle:
Here's the HTML and CSS for the element and the icon:
HTML:
<div class="print-element">
Tag Number
<mat-icon class="resize-circle">highlight_off</mat-icon>
</div>
CSS:
.print-element {
min-width: 175px;
min-height: 45px;
border: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
border-radius: 4px;
margin-right: 25px 25px 15px 0px;
cursor: move;
position: relative;
z-index: 1;
box-sizing: border-box;
padding: 10px 50px 10px 10px;
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.resize-circle{
position: absolute;
top: -10px;
right: -10px;
background-color: white;
border: .1px solid white;
border-radius: 50%;
color: #aaa;
cursor: pointer;
}
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
Now I can change the size of the mat-icon, but that results in the below:
using:
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 20px;
width: 20px;
}
yields:
Here's a stackblitz all set up and ready to go: https://stackblitz.com/edit/angular-m7wwvr?file=src%2Fstyles.scss
Here's what I want it to look like:
Even pointers in the right direction would help.
Check edited URL for the changes in HTML and CSS
https://stackblitz.com/edit/angular-m7wwvr-xrmyje?file=src/styles.scss
Ok here is an answer. I used #Srinivas Bendkhale answer to reach this result.
what I did was wrapping the icon with a span and give it a fix hight and width then all I had to do was to hide the overflow .
That's how it looks in my browser.
.print-element {
min-width: 175px;
min-height: 45px;
border: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
border-radius: 4px;
margin-right: 25px 25px 15px 0px;
cursor: move;
position: relative;
z-index: 1;
box-sizing: border-box;
padding: 10px 50px 10px 10px;
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.resize-circle {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: .1px solid white;
color: #aaa;
cursor: pointer;
}
span {
width: 20px;
height: 20px;
background: white;
position: absolute;
top: -7px;
border-radius: 50%;
right: -7px;
overflow: hidden;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="print-element">
Tag Number
<span><i class="material-icons resize-circle">highlight_off</i></span>
</div>
Why wont my css styling of background color ,width, and height work on my last div >gameover ?
this first part is my html code:
<head>
<title>Maths Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=yes">
<link rel="stylesheet" href="styling.css">
</head>
<body>
<div id="container">
<div id="score">Score: <span id="scoreValue">0</span></div>
<div id="correct">Correct</div>
<div id="wrong">Try Again</div>
<div id="question">7x7</div>
<div id="instructionBox">Click on the correct answer</div>
<div id="choices">
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
<div id="box4" class="box">4</div>
</div>
<div id="startReset">start Game</div>
Im guessing right here below is where it started getting messed up:
<div id="timeremaining">Time remaining:<span id="timeRemainingValue">
60</span> sec</div>
<div id="gameOver">
<p>Game Over!</p>
<p>Your score is __</p>
</div>
</div>
this second part is my css code and only the last style "game over" isn't working;
html {
height: 100%;
background: radial-gradient(circle, white, grey);
}
#container {
height: 440px;
width: 550px;
background-color: #9DD2EA;
margin: 100px auto;
/* this line directly above centers the container top and bottom 100px and left and
right to auto so that margin keeps getting
bigger and bigger on both sides till the element is center */
padding: 10px;
border-radius: 20px;
/* above line curves corners of element */
box-shadow: 4px 4px 6px 6px purple;
-webkit-box-shadow: 4px 4px 6px 6px purple;
-moz-box-shadow: 4px 4px 6px 6px purple;
/* [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]
*/
position: relative;
}
#score {
background-color: yellow;
padding: 10px;
position: absolute;
left: 475px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
}
#correct {
position: absolute;
left: 240px;
background-color: green;
color: white;
padding: 10px;
display: none;
}
#wrong {
/* line 45 makes it to where this element does not interact with other elements and
other elements behave as if it doesent exist*/
position: absolute;
left: 240px;
background-color: red;
color: white;
padding: 10px;
display: none;
}
#question {
margin: 55px auto 10px auto;
height: 150px;
width: 420px;
background-color: rgb(184, 53, 240);
box-shadow: 0px 4px purple;
font-size: 100px;
text-align: center;
font-family: Arial, Helvetica, sans-serif, sans-serif;
line-height: 150px;
color: black;
border-radius: 5px;
position: relative;
}
#question:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px
}
#instructionBox {
height: 60px;
width: 420px;
background-color: blue;
margin: 1px auto 1px auto;
text-align: center;
line-height: 55px;
box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
border-radius: 5px;
position: relative;
/* transition: all 0.2s; line 71 & 72 with line 77 make the transition happen on click
*/
}
#instructionBox:active {
box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
top: 4px;
}
#choices {
/* background-color: sandybrown; */
height: 100px;
width: 420px;
margin: 10px auto;
color: black;
text-align: center;
line-height: -50px;
margin: 10px auto;
border-radius: 5px;
}
.box {
/*these boxes are within a choices div to help them size together*/
margin-right: 26px;
width: 85px;
height: 85px;
background-color: white;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 80px;
position: relative;
/* with position relative and .box:active { top: 4px; the box moves down 4px}*/
/* transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s; */
}
.box:hover,
#startReset:hover {
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
.box:active,
#startReset:active {
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
}
/* #box1{
margin: 10px 10px;
background-color: red;
width: 30px;
height: 30px;
}
#box2{
margin: 10px 10px;
background-color: white;
width: 30px;
height: 30px;
}
#box3{
margin: 10px 10px;
background-color: blue;
width: 30px;
height: 30px;
}*/
#box4 {
margin-right: 0;
}
#startReset {
/*these boxes are within a choices div to help them size together*/
margin-left: 230px;
width: 100px;
height: 45px;
background-color: rgb(255, 255, 255, 0.5);
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
/* instead of writing these same pargraphs of code just at the element id to the similar
code alrady made like above */
/* #startReset:hover{
background-color: grey;
color: white;
box-shadow: 0px 4px purple;
-webkit-box-shadow: 0px 4px purple;
-moz-box-shadow: 0px 4px purple;
}
#startReset:active{
box-shadow: 0px 0px purple;
-webkit-box-shadow: 0px 0px purple;
-moz-box-shadow: 0px 0px purple;
top: 4px;
} */
#timeremaining {
/*these boxes are within a choices div to help them size together*/
visibility: hidden;
/* display: none; */
margin-left: 10px;
width: 200px;
height: 45px;
background-color: greenyellow;
float: left;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 4px grey;
-moz-box-shadow: 0px 4px grey;
-webkit-box-shadow: 0px 4px grey;
line-height: 45px;
text-align: center;
position: relative;
}
this below is the broken part with the >gameover style or gameOver div:
#gameOver {
height: 200px;
width: 500px;
background-color: linear-gradient(blue, green);
font-size: 1.0em;
}
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
In the above code I want to insert the blue arrow to the middle right of the .wrapper-dropdown-3. As of now it is situated on the top right near the Transport span. I am not sure how I can move it to the very right middle? Any suggestions?
You can use absolute positioning against container:
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
position: relative;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
position: absolute;
right: 5px;
top: calc(50% + 6px / 2); /* 6px here is border-width value to compensate a fact that arrow is made from border */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
Simply use positionning like this :
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
/*Code added*/
position:relative;
/**/
}
.wrapper-dropdown-3:after {
/*Code added*/
position:absolute;
right:5px;
top:50%;
/**/
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
I have a question about html and css. I am trying to make an div with text---slider--text. Here is the photo of how it supposed to look.
This is my current situation.
I hope someone can help me with getting this elements on 1 line.
.information_seperator {
height: 4vh;
background-color: #ffffff;
}
.divider {
width: 50vw;
background-color: #ffc539;
margin-top: 0px;
margin-bottom: 0px;
}
.divider:after {
content: " ";
width: 5px;
height: 5px;
position: relative;
top: 0;
right: 10px;
background-color: #ffc539;
}
<div class="information_seperator">
<!--<div class="row">-->
<span class="text_info">AMS</span>
<hr class="divider">
<!--<input data-provide="slider" id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="20"/>-->
<!--<span style="color: #ffc539">●</span>-->
<span>JFC</span>
<!--</div>-->
</div>
You can do this with Flexbox and JQuery UI
$('.circle').draggable({
axis: "x",
containment: ".line"
});
.slider {
display: flex;
align-items: center;
}
.line {
flex: 1;
height: 4px;
background: #FBC538;
position: relative;
margin: 0 10px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: #FBC538;
position: absolute;
left: 0;
top: -8px;
}
span:not(.circle) {
font-size: 30px;
font-weight: bold;
font-family: Sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="slider">
<span>AMS</span>
<div class="line"><span class="circle"></span></div>
<span>JFC</span>
</div>
I think you need to read up on
display: inline-block
To align elements next to one another use : display:inline;
Example :
span,
div {
display: inline;
}
//Slider
input[type=range] {
-webkit-appearance: none;
margin: 18px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<span>text</span>
<div>
<input type=range />
</div>
<span>text</span>
This question already has answers here:
transparent shape with arrow in upper corner
(2 answers)
Closed 7 years ago.
I have this custom shape made with css. I need to give a border to it but I have unsuccessful so far. How can I give it a border?
.comment-input-container {
width: 96%;
float: left;
}
input[type='text'] {
border: 0px !important;
box-shadow: none;
background-color: #f2f2f2;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1);
padding: 5px;
}
.arrow-left {
float: left;
width: 0;
height: 0;
border-bottom: 10px solid #fff;
border-right: 10px solid #f2f2f2;
}
<div style="width: 300px;">
<div class="arrow-left">
</div>
<div class="comment-input-container">
<input type="text" placeholder="Reply to comment..." />
</div>
</div>
Also, another problem is that the arrow and input break for smaller devices, that is, the input gets stacked underneath the arrow. Is there a better way of creating this shape that is also responsive and stays intact?
Thanks to Harry, I was able to work out a laregely responsive solution:
.comment-input-container {
position: relative;
width: 100%;
border-left: none;
/* not required as the shape needs to be transparent */
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.comment-input-container:before {
position: absolute;
content: '';
top: 0px;
left: -7px;
height: 26%;
width: 10%;
background-color: #f6f7fb;
border-top: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
-webkit-transform-origin: bottom right;
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.comment-input-container:after {
position: absolute;
content: '';
left: -7px;
height: 74%;
width: 5%;
max-width: 15px;
bottom: 0px;
border-left: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
background-color: #f6f7fb;
}
input[type="text"] {
border: 1px solid #e6e6e6;
border-left: none;
box-shadow: none;
background-color: #f6f7fb;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1) !important;
margin: 0px;
padding: 10px;
outline: none;
}
input[type="text"]:focus {
border: 1px solid #e6e6e6;
border-left: none;
box-shadow: none;
background-color: #f6f7fb !important;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1) !important;
padding: 10px;
outline: none;
}
.comment-box {
margin-left: 50px;
height: 50px;
}
<div class="comment-box">
<div class="comment-input-container">
<input type="text" placeholder="Reply to comment..." />
</div>
</div>
I assume the special shape is the last one? It's 0px x 0px, but you should see something since you gave it a 10px border. Unfortunately, The border is white so it blended in with the white background. I made the shape 1px x 1px and the background black so you can see the shape better.
body { background: black; }
.comment-input-container {
width: 96%;
float: left;
}
input[type='text'] {
border: 0px !important;
box-shadow: none;
background-color: #f2f2f2;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1);
padding: 5px;
}
.arrow-left {
float: left;
width: 1px;
height: 0px;
border-bottom: 10px solid rgba(0, 0, 0, 0.0);
border-right: 10px solid #f2f2f2;
box-shadow: inset 4px 2px 22px 6px rgba(0,0,0,0.57);
outline: 2px inset rgba(0, 0, 0, .35;
}
<div style="width: 300px;">
<div class="arrow-left">
</div>
<div class="comment-input-container">
<input type="text" placeholder="Reply to comment..." />
</div>
</div>