I just upgraded Bootstrap from 2.x to 3.x and found that modal dialog(http://getbootstrap.com/javascript/#modals) do not have vertical scroll bar anymore for large content body. How to set modal body max height and enable scroll bar?
You can set a height and enable the scrollbar using:
#myModal .modal-content
{
height:200px;
overflow:auto;
}
If you don't want the scroll bar on the entire modal, use modal-body instead:
#myModal .modal-body
{
height:200px;
overflow:auto;
}
Demo: http://bootply.com/88983
Related
I'm trying to keep the v-select menu attached to the v-select but in the meantime also have it over the dialog when open, in the bellow codepen you can see that the Age dropdown is hidden inside its container and I can't figure out how to make it visible
I have this hierarchy of v-dialog -> v-stepper -> v-select
<v-select
attach
:items="['0-17', '18-29', '30-54', '54+', '60', '77']"
label="Age*"
required
></v-select>
https://codepen.io/amaieras/pen/VwWRzpL?editors=101
P.S. I don't want to remove the attach, the client wants it to be glued to the v-select :)
Stepper component in vuetify has overflow: hidden style by default. You can change this property to visible in CSS:
.v-stepper,
.v-stepper__wrapper,
.v-stepper__items {
overflow: visible;
}
You can visit this codepen too.
Because Modal has a fixed size.
And your v-select is almost at the bottom of modal.
If you move that field to top or middle, it will work for you.
Or you can make modal height larger than now.
Please add this css.
.v-menu__content .theme--light .menuable__content__active {
position: initial !important;
}
this will work for you.
When I try to do a transition using the default "w-#" options in Tailwind, my transitions don't apply. When I hard code in my own classes for width, it works fine. Is there something weird with Tailwinds CSS and how it handles width that would cause this?
Here's the HTML text. The main part here is the dynamic class "sidebarWidth" which switches when the button is clicked. The transition-all, slowest and ease are all things I extended in Tailwind.
<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-all transition-slowest ease" :class="sidebarWidth">
Here's the JS code in the computed properties of the Vue component
sidebarWidth: function() {
if (this.$store.getters.isSidebarCollapsed) {
return "w-14 invisible md:visible";
} else {
return "w-64";
}
}
If I swap out w-14 and w-64 for the following classes, it works great.
<style scoped>
.width1 {
width: 100px;
}
.width2 {
width: 400px;
}
</style>
I basically want my sidebar nav to slide in when I click a button. In mobile, the sidebar nav is hidden and I want it to slide out. In the desktop, it should be a small nav and then slide out to a full screen nav. It works, but the slide transition doesn't work. Also, the margin change between mobile and desktop does animate properly.
You need to perform a few steps to activate the behaviour you are looking for.
The first one is about extending you Tailwind theme via tailwind.config.js. You need to add the transitionProperty for width.
module.exports = {
...
theme: {
...
extend: {
...
transitionProperty: {
'width': 'width'
},
},
},
}
The changes above create the transition-width class. Simply apply this one to your nav tag. In your specific case you can overwrite the transition-all class.
<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-width transition-slowest ease" :class="sidebarWidth">
The last step is quite easy: ensure that Tailwind is recreating the CSS. Afterwards you should see a smooth width transition in your project.
Background to the Problem
By default, the width and height transitions are not activated in Tailwind CSS. Here is the CSS that will be applied when using transition class.
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
Like you can see width and height are missing in transition-property.
You can find more information about it in the Tailwind documentation.
You can make your own transition property like in tailwind.config.js :
Multiple properties :
module.exports = {
theme: {
extend: {
transitionProperty: {
multiple: "width , height , backgroundColor , border-radius"
}
}
}
One property :
module.exports = {
theme: {
extend: {
transitionProperty: {
width: "width"
}
}
}
I use react-native-snap-carousel and I want to have this style:
but in android z-index cannot be animated.
What should I do?
I'm getting stuck at scroll the content with Animated. When I click on the arrow button, only the Animated tag scrolls up but the content inside it.
Here is my detail image:
And when I click the button:
And here is my code:
This is my function:
This is render:
And this is my style:
You're animating the view's height rather than scroll position.
Instead, try animating the y offset of scrollTo({x: 0, y: 0, animated: true})
more info here...
https://facebook.github.io/react-native/docs/scrollview.html#scrollto
`
I need to use v-carousel without the bottom control panel. It's useless when number of images more than 20. Is it possible to hide it?
You just need to add the hide-delimiters prop. You can find all carousel props here: VuetifyJS API
<v-carousel hide-delimiters>
[...]
You can do that with css:
.carousel .carousel__controls { display: none; }