How do I set max width for a TextField? By default, the width is set to maximum size
You can set the max-width property of the component by implementing your own styles function as done in this Codepen example.
const getStyles = () => {
return {
root: {
maxWidth: '100px'
}
}
};
<TextField
id='myTextField'
spellcheck={ false }
name='bar'
placeholder='Placeholder text'
defaultValue='Default text'
styles={ getStyles }
/>
More documentation about this approach can be found at https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#styles-prop.
You can add style attribute to a <TextField> component:
<TextField
...
style={{maxWidth: '100px'}}
/>
I hope it will help you.
Try to use max-width to set the maximum width the container should have.
.text-field{
width: 100%;
max-width: 500px;
height: 50px;
border: 2px solid black;
}
<div class="text-field">
<p>example<p>
<div>
Related
I want to increase the size of whole vuetify v-switch component,as it is not listed in v-switch api
i tried to change the sass variables but it change the entire switches that the application have
click to see the current size
When you are changing SASS variables, it must affect all the elements in the application.
To change the only one v-switch, you can write something like:
<template>
<v-switch
v-model="switch1"
class="custom-switch"
:label="`Switch 1: ${switch1.toString()}`"
></v-switch>
</template>
<style>
.v-input--switch__track {
border-radius: 15px;
width: 48px;
height: 29px;
top: -2px;
}
.v-input--switch__thumb {
left: 6px;
}
.custom-switch .v-input__slot .v-label {
left: 6px !important
}
.v-input--selection-controls__ripple {
height: 0;
width: 0
}
</style>
CodePen demo is here.
The slider I am building have the active slider bigger than the others. I managed to make it work without the animation with flkty.reposition(). However, I am trying now to add the animation where the next slide grows in and the active decrease out. For The animation I am using GSAP.
The issue I am facing is to overwrite the left property with gsap so that it continuous animate. As of now, the left property (controlled by Flickity) does not take into account the final size (controlled by GSAP) of the selected slide.
https://codepen.io/stefanomonteiro/pen/VwzwjLw?editors=0010
As the left property of each slide is controlled by Flickity, we could use margin-left with a minus value as an alternative property to pull the selected slide to the left. I know margin is not a good property to animate but it works in this case without digging too deep into the Flickity core.
Here is the GSAP code:
gsap.to(slides, {
duration: 1,
width: "220px",
height: "336px"
});
gsap.to(selectedSlide, {
duration: 1,
marginLeft: "-248px", // the empty space calculated by newWidth - oldWidth
width: "468px",
height: "630px",
onComplete: () => {
// once all animations have been settled, we reset the margin
gsap.set(selectedSlide, { marginLeft: "" });
// and tell Flickity to update
flkty.resize();
flkty.reposition();
}
});
And the snippets
const animate = () => {
const flkty = Flickity.data(".carousel");
const selectedSlide = flkty.selectedElement;
const slides = flkty.getCellElements();
// remove the selected slides
slides.splice(flkty.selectedIndex, 1);
gsap.to(slides, {
duration: 1,
width: "220px",
height: "336px"
});
gsap.to(selectedSlide, {
duration: 1,
marginLeft: "-248px", // the empty space calculated by newWidth - oldWidth
width: "468px",
height: "630px",
onComplete: () => {
// once all animations have been settled, we reset the margin
gsap.set(selectedSlide, {
marginLeft: ""
});
// and tell Flickity to update
flkty.resize();
flkty.reposition();
}
});
};
new Flickity(".carousel", {
cellAlign: "right",
wrapAround: true,
percentPosition: false,
on: {
ready: () => animate()
}
});
const nextButton = document.querySelector(".flickity-button.next");
nextButton.addEventListener("click", () => animate());
/* external css: flickity.css */
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.carousel {
background: #EEE;
}
.carousel-cell {
width: 220px;
height: 336px;
margin-right: 20px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
.carousel-cell.is-selected {
width: 468px;
height: 630px;
z-index: 1;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(carousel-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
<link href="https://npmcdn.com/flickity#2/dist/flickity.css" rel="stylesheet" />
<script src="https://unpkg.co/gsap#3/dist/gsap.min.js"></script>
<script src="https://npmcdn.com/flickity#2/dist/flickity.pkgd.js"></script>
<h1>Flickity - wrapAround</h1>
<!-- Flickity HTML init -->
<div class="carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
And the Codepen
You can also notice that we have to wait until the animation is finished until we perform the next click, otherwise, it would mess up the whole process. This is predictable. Hence, I personally will try not to manipulate this Flickity slider for this kind of animation. Just want to give you a solution, anyway.
I'm new to Vue.js and I have a (block) element that should be initially hidden on page load. I'm coming from a pure JS mixed with JQuery background so normally I would initially set display:none on the element use JQuery's show/hide methods etc.
I have the showing and hiding working correctly with Vue but a side effect is that the element flashes on the screen briefly on page load until the Vue setup is complete and it knows to hide the element. Setting display:none breaks the show/hide presumably because the elements class prop has higher precedence. Setting opacity:0 also seems to be overriding anything Vue is doing so that breaks the show/hide too. !important on the Vue animation classes does not help either.
The embedded sandbox below might not be the best way to reproduce this, and I suppose it might be system dependent too (speed, memory etc.) but surely this must be a common enough situation with some solution that I've missed.
VUE = new Vue({
el: '#app',
data: {
showFullpageSpinner: false
}
});
setTimeout(function() {
VUE.showFullpageSpinner = true;
setTimeout(function() { VUE.showFullpageSpinner = false; }, 1500);
}, 1500);
.fullpage-spinner-underlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.65);
z-index: 9999;
}
.fullpageSpinner-enter-active, .fullpageSpinner-leave-active {
transition: opacity .25s;
}
.fullpageSpinner-enter, .fullpageSpinner-leave-to {
opacity: 0;
}
.css-spinner {
position: absolute;
display: inline-block;
}
.css-spinner:before {
content: 'Loading...';
position: absolute;
}
.css-spinner:not(:required):before {
content: '';
border-radius: 50%;
border-top: 3px solid #daac35;
border-right: 3px solid transparent;
animation: spinner .7s linear infinite;
-webkit-animation: spinner .7s linear infinite;
}
#keyframes spinner {
to {-ms-transform: rotate(360deg);}
to {transform: rotate(360deg);}
}
#-webkit-keyframes spinner {
to {-webkit-transform: rotate(360deg);}
to {transform: rotate(360deg);}
}
#-moz-keyframes spinner {
to {-moz-transform: rotate(360deg);}
to {transform: rotate(360deg);}
}
.fullpage-loading-spinner {
left: 50%;
top: 45%;
margin-left: -40px;
margin-top: -55px;
}
.fullpage-loading-spinner:BEFORE {
width: 55px;
height: 55px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<transition name="fullpageSpinner">
<div v-if="showFullpageSpinner" class="fullpage-spinner-underlay">
<div class="css-spinner fullpage-loading-spinner"></div>
</div>
</transition>
</div>
Your problem seems to be solvable with the v-cloak directive.
This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.
Example:
[v-cloak] {
display: none;
}
<div v-if="showFullpageSpinner" class="fullpage-spinner-underlay" v-cloak>
<div class="css-spinner fullpage-loading-spinner"></div>
</div>
Since I am new to Vue and JS. I have some difficulties to making dynamic progress bar. This bar is kind of indication of how many quiz already take. according to he photo below.
Below is my CSS and HTML of creating bar.
.progressbar {
width: 100%;
height: 5px;
background-color: #eee;
margin: 1em auto;
transition: width 500ms;
}
HTML
<div class="progressbar">
<div class="progressbar text-center"
style="background-color: green; margin: 0; color: white;"
:style="{width: progress + '%'}">
{{ progress }}
</div>
</div>
how can I make it increase?
Place progress into the data and its working for me:
data() {
return {
progress: 70,
}
}
If you don't know how to calculate the progress just do it like so:
methods: {
updateProgres() {
this.progress=completedSteps/totalSteps*100
}
}
I'm trying to get a button that changes its color when pressed on it. When it is pressed again, it should change back to its original color. What am I doing wrong?
The Button in my template:
<th><Button v-bind:class="{'white': !clicked, 'blue': clicked}" v-on:click ="!clicked" ></Button></th>
<script>
export default {
data: {
clicked: false
}
}
</script>
<style>
.white {
background-color: white;
width: 200px;
height: 200px;
}
.blue {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
You should set clicked property explicitly by #click="clicked = !clicked":
<th>
<Button
v-bind:class="{'white': !clicked, 'blue': clicked}"
v-on:click ="clicked = !clicked"
/>
</th>