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>
Related
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" />
I am trying to implement a horizontal scroll bar to display images , but the width of the wrapper (scroll-container) container is overflowing. I also need to use FlexBox grid to make it responsive for different screen sizes.
Structure for HTML & SCSS is as given below. The container must be inside a mat-tab-group (Angular Material).
div 'item' will contain multiple items.
I am running it on chrome and have checked the inspector, apparently the mat-tab-body-wrapper display: flex property is causing this issue.
Is there any work around for this issue?
HTML
<mat-tab-group>
<mat-tab label="First">
<div class='row scroll-container'>
<div class='col-xs-5 col-sm-8 col-md-9 col-lg-12'>
<div class='horizontal-slider'>
<div class='slider-container'>
<div class='item'>
<img src='' alt=''>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
SCSS
.scroll-container {
margin: 8px 0 0 0;
.horizontal-slider {
display: flex;
overflow-y: hidden;
max-width: inherit;
overflow-x: scroll;
box-sizing: border-box;
.slider-container {
.item {
display: flex;
margin-right: 8px;
img {
width: 124px;
height: 124px;
}
}
}
}
}
The most effective solution would be as shown below. Alongside the flex-nowrap you need to set the overflow attribute to prevent the whole page expanding.
With overflow property:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h6>Bootstrap 4 horizontally scrollable card groups</h6>
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
</div>
I'm new to Vuetify (first project ever) and I'm trying to set a card inside a column sticky top. Unfortunately is not working as supposed. I've also tried using the v-scroll directive from vue-sticky-directive and the result is still the same.
Here the simplified snippet:
<v-row>
<v-col class="sticky-container">
<v-card class="sticky-card">This should be sticky top 90px</v-card>
</v-col>
<v-col>
content
</v-col>
</v-row>
.sticky-container{
overflow-y: auto;
}
.sticky-card{
position: sticky;
top:90px;
align-self: start;
}
I know I can achieve a similar result using position:fixed, but the behavior is different and the final result is not the one I'm looking for.
Did someone already faced this issue and have a some insights to share with me?
To achieve this you need to set position to fixed. As fixed is a kind of absolute positioning you can than set the top position via top: 90px -
and with fixed positioning you'll loose all fluid features of that card as well as the centering. For instance max-width won't work so you have to use width instead and center by yourself.
<div id="app">
<v-app id="inspire">
<v-row>
<v-col cols="12">
<v-card
class="mx-auto sticky-card"
max-width="344"
color="primary"
>
<v-card-text>
<b>This should be sticky top 90px</b>
</v-card-text>
</v-card>
</v-col>
<v-col>
<v-card
class="mx-auto after-sticky"
max-width="344"
>
<v-card-text>
Card with much content - past large text inside of it
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-app>
</div>
CSS:
.sticky-card {
width: 344px;
position: fixed;
top: 90px;
z-index: 1;
/* centering */
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.after-sticky {
margin-top: 90px;
}
This works for me(pug syntax):
v-row(no-gutters)
v-col(sm='0' md='0' lg='1')
div(position: -webkit-sticky; position: sticky; top: 100px')
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.
I am displaying some list of ids as follows
<li>
<label> Nest</label>
<select id="NestId" class="Select input-validation-error" name="NestId" data-val-required="Please select nest name." data-val-number="The field Nest ipId must be a number." data-val="true">
<span data-valmsg-for="NestId"></span>
<div class="formError NestshipId" style="top: -69px; left: 202px; opacity: 0.8;">
</li>
The arrow of the ddl is working fine before showing the requirefield erorr msg.Once its shown, some part of it is shadowig over the ddl arrow.
so the arrow is not clickable through the erorr message
When I inspect the code through firebug, I could see the element like this
<li>
<label> Relation</label>
<select id="NestId" class="Select input-validation-error" name="NestId" data-val-required="Please select relation." data-val- number="The field NestId must be a number." data-val="true">
<span data-valmsg-for="NestId"></span>
<div class="formError NestId" style="top: -69px; left: 202px; opacity: 0.8;">
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
<div class="formError NestId" style="top: -69px; left: 202px; opacity: 0.8;">
<div class="formErrorContent">Please select relation.</div>
</div>
I think the arrow is not clickable because of the presence of field message over it.
Can anybody please help me to find a solution for this.
The message should be visible as well as the ddl arrow should work
You can also try setting the position of the error message to the left, in this case it will not be overlapping on the dropdown arrow.
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
position:relative;
left:20px;
}