I am looking for a help to adjust the height of range slider depends on the target value?
As much as the user will drag the ball of the range, the left side's height will increase. It will be like filling the range. Could you help me how I can achieve this like in the UI has attached to this post.
This is the UI
Here is my code below:
HTML:
<div class="range-container">
<input type="range" name="range" id="range" min="0" max="100" value="0" />
<label for="range">DRAG</label>
</div>
CSS:
.range-container {
position: relative;
display: flex;
align-items: center;
}
#range {
width: 80%;
margin: 90px auto;
-webkit-appearance: none;
}
#range:focus {
outline: none;
}
#range::-webkit-slider-runnable-track {
background: var(--theme-col);
width: 100%;
height: 3px;
cursor: pointer;
}
#range::-webkit-slider-thumb {
-webkit-appearance: none;
height: 12px;
width: 12px;
background: blue;
border-radius: 50%;
border: 1px solid blue;
margin-top: -4px;
cursor: pointer;
}
Related
My search suggestion box is not flowing all the way into the section below rather it is resizing the whole navbar. The search input is in the navigation bar. I want the search suggestions to just flow in the divs below. I have tried all the overflow property values but it is not giving me what I want.
.search-box {
position: relative;
}
.nav-search {
width: 260px;
}
.autocom-box {
background-color: white;
color: black;
width: 260px;
/* padding: 10px 8px; */
max-height: 280px;
overflow-y: auto;
border-radius: 5px;
/* opacity: 0; */
/* pointer-events: none; */
}
.search-box li {
list-style: none;
padding: 8px 12px;
cursor: default;
border-radius: 3px;
width: 100%;
/* display: none; */
overflow: auto;
}
.search-box li:hover {
background: #efefef;
}
.search-btn {
height: 38px;
width: 38px;
line-height: 38px;
position: absolute;
top: 0;
right: 0;
text-align: center;
cursor: pointer;
color: black;
margin-right: 10px;
border: none;
background: none;
}
<form class="d-flex ms-auto" action="/" method="post">
<div class="search-box">
<input
class="form-control me-2 nav-search"
autocomplete="off"
name="search"
placeholder="Type to Search..."
/>
<div class="autocom-box">
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
</div>
<button class="search-btn" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</form>
I've tried giving the full navbar max-height but then it tries to keep everything inside of it so it just pushes the search-box so high up it disappears.
And I've also tried position: absolute; but even that doesn't work it just messes everything up.
Adding position: absolute; to the pop-out window (.autocom-box) should just about do the trick:
.search-box {
position: relative;
border: 2px solid black;
}
.nav-search {
width: 260px;
}
.autocom-box {
position: absolute; /* This is the change */
background-color: white;
border: 2px solid red;
color: black;
width: 260px;
/* padding: 10px 8px; */
max-height: 280px;
overflow-y: auto;
border-radius: 5px;
/* opacity: 0; */
/* pointer-events: none; */
}
.search-box li {
list-style: none;
padding: 8px 12px;
cursor: default;
border-radius: 3px;
width: 100%;
/* display: none; */
overflow: auto;
}
.search-box li:hover {
background: #efefef;
}
.search-btn {
height: 38px;
width: 38px;
line-height: 38px;
position: absolute;
top: 0;
right: 0;
text-align: center;
cursor: pointer;
color: black;
margin-right: 10px;
border: none;
background: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<form class="d-flex ms-auto" action="/" method="post">
<div class="search-box">
<input
class="form-control me-2 nav-search"
autocomplete="off"
name="search"
placeholder="Type to Search..."
/>
<div class="autocom-box">
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
</div>
<button class="search-btn" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</form>
(The black border is the nav bar itself, the red border is the search window)
I created radio buttons via css. Just styled on the pseudo-elements like this:
https://codepen.io/emily-green/pen/MWYQZqz
Here is the html
<label class="wrapper">
<input type="radio" />
<div class="label">Text</div>
</label>
<label class="wrapper wrapper--checked">
<input type="radio" />
<div class="label">Text</div>
</label>
Here is my css
input {
display: none
}
.wrapper {
font-family: "arial";
align-items: center;
color: #00f;
display: flex;
font-size: 12px;
font-weight: 600;
justify-items: center;
padding: .5rem 0 .5rem 1.3rem;
position: relative;
vertical-align: middle;
white-space: nowrap;
&::before,
&::after {
border-radius: 50%;
box-sizing: border-box;
content: '';
display: inline-block;
height: 14px;
left: 0;
position: absolute;
width: 14px;
}
&::before {
border: 2px solid #00f;
}
&::after {
background: #000;
transform: scale( 0 );
}
// checked
&--checked {
color: #000;
&::after {
transform: scale( .4 );
}
}
}
My problem:
When I zoom with the browser and on Windows Edge, the inner circle is misplaced or the outer circle gets oval. Does anyone have a solution for it?
I didn't found a solution for it so I changed it to an inline SVG. Inline because otherwise, the SVG get quite pixelated on some browsers
In my code (see below) I want to set the colour of placeholder i.e Username and Password and a margin below it to white.
Means the Username and password text should be of white colour and border below it should also be of white colour as i am using a dark back-ground colour.
How can I achieve that?
Html
<mat-card class="login">
<form >
<mat-form-field color="accent" autocomplete="off" class="form">
<input class="inputField" maxlength="10" matInput [placeholder][1]="Enter Username" [formControl]="">
</mat-form-field>
<br>
<mat-form-field color="accent" autocomplete="off" class="form">
<input class="inputField" maxlength="10" type="password" matInput placeholder="Enter Password" [formControl]="">
</mat-form-field>
<div>
<button mat-button class="otp-btn" type="submit">Login</button>
</div>
<br>
</form>
</mat-card>
CSS
.example-container {
display: flex;
flex-direction: column;
}
.login {
margin-top: 80px;
height: 450px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #274c7c
}
.material-icons {
margin-left: 2%;
margin-bottom: 10px;
}
.otp-btn {
margin: 30px 30px 30px 30px;
margin-left: 10%;
width: 80%;
font-size:30px;
height: 55px;
color:white;
border-radius: 10px;
background-color: #f6b319;
}
:host {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
img {
height: 16%;
width: 174px;
margin-left: 15%;
margin-right: auto;
padding: 10px;
}
div.input {
position: relative;
}
.form {
display: block;
position: relative;
flex: auto;
min-width: 0;
width: 245px !important;
margin-left:15px;
}
.inputField
{
width: 90%;
font-size: 20px;
}
div.input label {
position: absolute;
top: 0;
transform: translateY(-50%);
left: 10px;
background: white;
padding: 5px 2px;
color: white;
}
div.input input {
padding: 10px 20px;
font-size: 25px;
outline: 0;
color: white;
}
div.input {
margin-top: 20px;
color: white;
}
.example-container > * {
width: 100%;
}
See stackBliz for more details.
Add this to css
::ng-deep .mat-form-field-underline, ::ng-deep .mat-form-field-ripple {
background-color: white !important;
color: white !important
}
::ng-deep .mat-form-field-empty.mat-form-field-label {
color: white;
}
After focusing on the input, you can insert the following code to stylize the placeholder after the animation:
::ng-deep .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
color: beige;
font-family: lobster;
}
Recently I try to fit textbox for publishing post. Main problem - textbox doesn't want to fit properly, even if it obviously should. Here is the image:
and here is the JSFiddle file I prepared for this question:
https://jsfiddle.net/Ch3shireDev/u0j5rgud/4/
It looks like a textbox is naturally expanded to the right.
body {
margin: 0;
height: 100%;
width: 100%;
}
.post {
display: flex;
background-color: lightgrey;
border-radius: 10px;
/* width: auto; */
height: 300px;
padding: 5px 5% 5px 5%;
margin: 20px;
box-shadow: #888888 1px 1px 1px 1px;
}
.background {
margin: 5px;
border: 1px solid;
padding: 0;
}
textarea {
resize: none;
width: 80%;
margin: 10px;
}
.titlebox {
height: 20px;
}
.message {
height: 100px;
}
.background {
width: 100%;
padding: 10px;
}
textarea {
margin: 0;
height: auto;
width: 100%;
}
.input {
background-color: red;
padding: 5px;
}
.buttons {
float: right;
padding-top: 5px;
padding-left: 5px;
margin-bottom: 0;
margin-right: 0;
padding-right: 0;
}
<div class=post>
<div class=background>
<div class=title>
<h3>
Publish post
</h3>
</div>
<div class=input>
<form>
<textarea class=message cols=50></textarea>
</form>
</div>
<div class=buttons>
<input type="submit" value="Preview" />
<input type="submit" value="Send" />
</div>
</div>
</div>
What should I do to get textbox fitting right?
For your textarea, just add box-sizing: border-box;.
textarea{
resize:none;
width:80%;
margin: 10px;
box-sizing: border-box;
}
https://jsfiddle.net/u0j5rgud/6/
border-box: The width and height properties (and min/max properties) includes content, padding and border
You have 2 textarea rules in your css, try deleting the one with the wodth set to 100%
Remove the padding from your textarea
textarea {
padding: 0;
}
I want to create a button as close to this image attached, with the border and a clear separation between it and the input box. Is this possible with css?
Here's a quick and easy way to accomplish this:
label {
border: 2px solid tan;
padding: 2px;
display: inline-block;
}
input {
background: tan;
border: 0;
width: 200px;
height: 20px;
padding: .5em;
font-size: 1.25em;
color: white;
}
<label>
<input />
</label>