How I can transform a range of Bootstrap in vertical? - user-interface

I have the following code that makes a horizontal range in Bootstrap:
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
I need to know how I can transform it in a vertical "range".

Try the code below and check if it solve your problem:
input[type=range][orient=vertical]
{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 175px;
padding: 0 5px;
}
<input type="range" orient="vertical" />

Related

Can't resize gap, widht and height on sass with media query

I'm resizing a card with media query but the labels I've created inside it gets weird because of the gap from the parent div. I know I can fix it changing the gap of the parent div and the widht and height of the labels, but I'm not beeing able to do that.
It stays like this
I want it to be like this
I'm using SASS and bootstrap 5.3.0.
This is a challenge from Frontend Mentor btw.
HTML:
<div class="card" id="submitCard">
<div class="star"><img src="images/icon-star.svg" alt=""></div>
<p class="cardTitle">How did we do?</p>
<p class="cardDescription">Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!</p>
<form id="ratingForm">
<div class="inputs">
<input type="radio" name="rating" id="rating1" value="1"></input>
<label for="rating1">1</label>
<input type="radio" name="rating" id="rating2" value="2"></input>
<label for="rating2">2</label>
<input type="radio" name="rating" id="rating3" value="3"></input>
<label for="rating3">3</label>
<input type="radio" name="rating" id="rating4" value="4"></input>
<label for="rating4">4</label>
<input type="radio" name="rating" id="rating5" value="5"></input>
<label for="rating5">5</label>
</div>
<button class="submitBtn">Submit</button>
</form>
</div>
CSS:
#submitCard{
#ratingForm{
color: var(--text-color);
margin-top: 10px;
.inputs{
display: flex;
justify-content: space-between;
gap: 20px;
label{
display: grid;
place-content: center;
background-color: var(--btn-color);
border-radius: 50px;
width: 50px;
height: 50px;
padding-top: 5px;
}
input[type="radio"]{
display: none;
&:checked + label {
background-color: var(--btn-selected-color);
color: var(--white);
}
&:hover + label{
background-color: var(--primary);
color: var(--white);
cursor: pointer;
}
}
}
}
}
Media query:
#media (max-width: 430px){
.card{
width: 360px;
padding: 25px;
border-radius: 15px;
}
#submitCard {
#ratingForm{
.inputs {
gap: 0;
label{
width: 45px;
height: 45px;
}
}
}
}
}
Well.. The thing is: I placed my media query before the styles I was trying to change. I guess i'm going back to practice. 😂🤡
I found the answer by this post: Css id's don't change on media queries

vuetifyjs form label location

I can't arrange vuetify form label location. Below is my code:
<template>
<v-container>
<form #submit.prevent="signup">
<v-col>
<v-text-field
v-model="form.name"
label="Хэрэглэгчийн нэр"
type="text"
required>
</v-text-field>
</v-col>
</form>
</v-container>
</template>
The result looks in the below figure:
Is this label available look on the left?
Try to override rtl style in labels by adding your custom style
<style>
.v-label {
left: 0 !important;
right: auto !important;
}
</style>
Thi would make ALL labels move to left. If you want to apply this only on some inputs:
<style>
.ltrLabel label {
left: 0 !important;
right: auto !important;
}
</style>
And on the inputs you want the label to be on the left:
<v-text-field
v-model="form.name"
label="Хэрэглэгчийн нэр"
type="text"
class="ltrLabel" <--- add ltrLabel class
required>
</v-text-field>

SASS theme - placeholder style inconsistency

Is it a style bug or how can I make placeholder to be consistent between input with k-textbox style and textbox with icon:
<input class="k-textbox" placeholder="lighter color and shadow on focus" />
<span class="k-textbox k-space-right">
<input placeholder="same color and no shadow on focus" />
<span class="k-icon k-i-search"></span>
</span>
Demo:
https://dojo.telerik.com/UmuwUYeJ
The placeholder color issue could be resolved by adding the k-input class to the nested element:
<input type="text" class="k-input" placeholder="placeholder..."/>
The box-shadow issue is more tricky, as when the nested element is focused, its parent box-shadow should be set. This can be achieved in two ways:
With JavaScript(Dojo example):
$(document).ready(function() {
$(".k-textbox input").focus(function() {
$(this).parent().css("box-shadow", "0 2px 2px 1px rgba(0,0,0,.06)");
});
$(".k-textbox input").focusout(function() {
$(this).parent().css("box-shadow", "none");
});
});
With CSS(Dojo example):
.k-textbox:focus-within {
box-shadow: 0 2px 2px 1px rgba(0,0,0,.06);
}
The above used focus-within select has limited browser support, thus take this into consideration in case you would like to use the CSS approach.

Why is my text still wrapping under a floated div?

I have a render component which renders out some text and an image. The component is a DIV containing two divs. The first div contains an image, this div is floated to the right. The next div contains various text strings. I have overflow: hidden on the parent div, but my text is still wrapping around the div containing the image. The only way I can fix this currently is by setting the height to 100% for the div containing the image. However, if I do this I can't add a border / background to this div because it extends the entire page.
In short, I have a div containing two divs. I want my text in a column, and the image in the other. I do not want the text to wrap under the image. I've visited the other text wrapping questions, but overflow hidden or adding span tags doesn't seem to be solving my problem.
Below is the render function and the SASS/CSS that goes with it.
render() {
const renderHelpFile = this.props.data.filter(obj => {
return this.props.name === obj.name;
}).map((obj, idx) => {
return (
<div key={idx} className="fadingDiv">
<div className="divImg">
<img src={`${obj.image}`} className="helpFileImg"></img><br />
</div>
<div className="displayLineBreak">
<h3 style={upperStyle}> {obj.name} </h3>
<b>Path:</b> {obj.path} <br /><br />
{obj.content} <br /><br />
<b>Troubleshooting:</b> {obj.troubleshoot} <br /><br />
<b>Video:</b> {obj.video} <br />
</div>
</div>
);
});
css
.fadingDiv {
text-align: justify;
overflow:hidden;
-webkit-animation: divFadeIn .75s ease-in forwards;
animation: divFadeIn .75s ease-in forwards;
}
.displayLineBreak {
white-space: pre-line;
}
.divImg {
width: 35%;
float: right;
padding: 5px;
background: #0080ff;
border: 2px solid black;
border-radius: 2px;
//height: 100%;
}
.helpFileImg {
width: 100%;
height: auto;
}
That's how float is supposed to work - text "floats" around it.
Instead of using float, you could either define both containers as inline-block, with according widthsettings, or you could put display: flex on the container element.
If you know the width of the image, you can use that for a fixed width on the image container and use calc for the width of the text container, like width: calc( 100% - XXpx );, where XX stands for the width of the image.

css - container div fit content to image

I'm wondering if it is possible to specify a div (example div2) or another sourrounding element of an image to fit the height and width to its child.
Besides, the image should resize (keep aspect ratio) to the full available space (div1) of the div2's parent.
As the image and therefore the aspect ratio, image orientation, hieght and width can change dynamically, no fixed sizing is possible
Here is an example fiddle:
http://jsfiddle.net/rp7u3u2r/1/
<div style="width:200px; height: 200px;">
<div style="max-height: 100%;max-width:100%;">
<img style="max-height: 100%;max-width: 100%;" src="..."/>
</div>
</div>
Expected behavior:
I already tried 'object-fit', 'fit-content', 'display: table-cell', 'display: inline-block', but nothing seems to work as expected.
updated fiddle http://jsfiddle.net/rp7u3u2r/3/
<div style="background-color:red; width:200px; height: 200px; font-size:0; line-height: 0;">
<div style="background-color: green; display: inline-block;">
<img style="width: auto; height: auto; max-height: 200px;max-width: 200px;"
src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
</div>
Use these styles:
#div1 {
width: 200px;
height: 200px;
}
#div2 {
box-sizing: border-box;
height: 100%;
float: left;
}
img {
height: 100%;
}
Both div2 and img will be constrained to the height of div1.
box-sizing allows you to add border and padding to div2 without overflowing div1.
Fiddle

Resources