How can I change the height and width of modal window in yiistrap extension bootstrap.widgets.TbModal. One way is changing height and width parameters in bootstrap.css .modal-container but that will change the height and width of all modal windows. I want to change the height and width of only one modal windows while for other modals it should default one. How can I achieve this?
Simply specify the width of the modal with CSS of your own (don't forget to also set margin-left to negative half the width so that the modal appears centered on screen).
For example, you could apply an additional class to the modal:
$this->widget('TbModal', [
'htmlOptions' => ['class' => 'modal-wide']
]);
and use this CSS:
.modal.modal-wide { width: 800px; margin-left: -400px }
Or you could even use inline styles:
$this->widget('TbModal', [
'htmlOptions' => ['style' => 'width: 800px; margin-left: -400px']
]);
Related
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 am using Vuetify and Electron to make an app to help me with certain tasks at my job. I have disable the browserWindow frame and made my header the draggable area with a button to close the window. I am using the electron vuetify template
vue init vuetifyjs/electron
My problem is the scrollbar reaches all the way to the top but I would like it below my fixed header.
I have tried playing with overflow properties on the html, body, app div, and content div tags but i have not been successful.
How would I accomplish this?
This is purely a CSS question really as you can see this behaviour in the browser too with similar layouts. The easiest way to fix this is using a flex layout:
HTML:
<div class="container">
<div class="titlebar"></div>
<div class="content">
<h1>So much content we scroll</h1>
<h1>So much content we scroll</h1>
<!-- etc -->
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.titlebar {
background-color: blue;
height: 35px;
flex-shrink: 0;
}
.content {
flex-grow: 1;
overflow-x: auto;
}
Check out this out in this CodePen
I'd like to offer a Vuetify specific answer for this question, this should apply whether or not Electron is involved.
Vuetify's default styles make this a bit more difficult than a simple CSS solution can give you, especially when the layout gets more complex.
For this example I'm using the complex layout from Vuetify's pre-defined themes here
Vuetify ships with an overflow-y: scroll on the html element so the first step is adding an override for this.
html {
overflow: hidden;
}
This will get rid of the bar on the right side that spans the whole height of the app.
Next you will want to set your v-content area as the scrollable area. There are a few gotchas to watch out for when you're setting this area:
Display flex is already declared
Vuetify sets padding in the style attribute so you'll need to override depending on your case
You'll need a margin the height of your header(only matters if you're changing header height from 64px)
You'll need to remove the header height from the height of the content container using calc(Same as above)
If you have a nav drawer on the right side you'll need to bind a class to take care of this.
My CSS for v-content looks like this, you will need an important to override the padding since it is set by Vuetify through style binding:
main.v-content {
width: 100vw;
height: calc(100vh - 64px);
flex-direction: column;
overflow: scroll;
margin-top: 64px;
padding-top: 0 !important;
}
I also have a class bound to the state of the temporary right drawer on the v-content tag in the template, this makes sure that the scroll bar doesn't disappear underneath the right nav drawer when it's open:
<v-content :class="{ draweropen: drawerRight }">
And the CSS for that bound class, once again you'll need an important to remove the default right padding Vuetify puts on v-content when the drawer is open:
.draweropen {
width: calc(100vw - 300px) !important;
padding-right: 0 !important;
}
You can optionally set the flex-direction to column-reverse if your content is bottom loaded like a chat which is what I'm doing in this CodePen Example
I built a little component that wraps the v-main and moves the scrollbar to the main container instead of the default (the entire html).
Simply replace v-main with this and you're done.
<template>
<v-main class="my-main">
<div class="my-main__scroll-container">
<slot />
</div>
</v-main>
</template>
<script>
export default {
mounted: function() {
let elHtml = document.getElementsByTagName('html')[0]
elHtml.style.overflowY = 'hidden'
},
destroyed: function() {
let elHtml = document.getElementsByTagName('html')[0]
elHtml.style.overflowY = null
},
}
</script>
<style>
.my-main
height: 100vh
.my-main__scroll-container
height: 100%
overflow: auto
</style>
How can I apply a dynamic width and height to a react-bootstrap modal window?
I have checked the react-bootstrap docs here but could not figure out how to do that.
Actually the value of width and height props would be dynamic (could be any values) as this will be a reusable component in my app (to be used on many pages) thus can't apply width/height through some CSS class.
'bsSize' property as mentioned in docs also not working, although predefined sizes of xs, md, lg is not what I exactly want, rather I need width and height to be set on modal via props.
Here is my sample JSX code:
var MyWindow = React.createClass({
getInitialState() {
return { show: true };
},
close() {
this.setState({ show: false });
},
open() {
this.setState({ show: true });
},
save() {
},
render: function () {
var Button = ReactBootstrap.Button,
Modal = ReactBootstrap.Modal,
ModalBody = ReactBootstrap.ModalBody,
ModalHeader = ReactBootstrap.ModalHeader,
ModalFooter = ReactBootstrap.ModalFooter,
ModalTitle = ReactBootstrap.ModalTitle;
return (
<Modal show={this.state.show} onHide={this.close}>
<ModalHeader closeButton>
<ModalTitle>My Cool Window</ModalTitle>
</ModalHeader>
<ModalBody>
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus</p>
</ModalBody>
<ModalFooter>
<Button onClick={this.close}>Cancel</Button>
<Button bsStyle="primary" onClick={this.save}>Save</Button>
</ModalFooter>
</Modal>
);
}
});
React.render(<MyWindow width={700} height={400} />, mountNode);
According to its documentation, you have to customize your own css class to achieve the style you want via modal's prop dialogClassName.
So we might have my.jsx code below:
<Modal dialogClassName="my-modal">
</Modal>
With my.css below:
.my-modal {
width: 90vw /* Occupy the 90% of the screen width */
max-width: 90vw;
}
Then you will have your custmized modal!
.my-modal{
min-width: 50%
}
Works for me!!!
The other mentioned solution only works for setting the width.
For editing the height, you need to add your custom css class to the contentClassName attribute.
For Example:
<Modal contentClassName="modal-height"></Modal>
Css Class:
.modal-height {
height: 70%;
}
For editing the width you need to add your custom css class to the dialogClassName attribute.
For Example:
<Modal dialogClassName="modal-width"></Modal>
Css Class:
.modal-width {
width: 70%;
}
Possible Issues:
Sometimes you will have to use !important to over-ride bootstrap imposed CSS, so experiment with that as well.
Credits: Found the solution here.
When I call the simplemodal method, I do that like so:
jQuery("#stats").modal({
maxWidth: 400,
maxHeight: 300,
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.data.hide();
dialog.container.fadeIn('slow', function () {
dialog.data.slideDown('slow');
});
});
},
onClose: function (dialog) {
dialog.data.fadeOut('slow', function () {
dialog.container.hide('slow', function () {
dialog.overlay.slideUp('slow', function () {
jQuery.modal.close();
});
});
});
}
});
However, when the modal is rendered, both max values are ignored. The resulting element with inline styles is
<div id="simplemodal-container"
class="simplemodal-container"
style="height: 697px; width: 1861px; left: 231px; top: 85.5px; position: fixed; z-index: 1002;">
Is there an issue with the way I specified the max values? Or, is there an issue with simplemodal?
Thanks! E
I think those min/max settings are used to just set the actual height/width for SimpleModal. The modal's container will be sized according to the content as long as the content's size is within the min/max settings. Otherwise, the modal container size will be set at to the min/max values. That's all it does. For example, if the content is bigger than maxHeight & maxWidth settings, then there will be scroll bars:
See this fiddle here
Your content
<div id="stats" style="width:400px; height:400px;">
Your content will show in modal with scroll bars,
because it is bigger than maxWidth, maxHeight.
</div>
The modal
jQuery("#stats").modal({
maxWidth: 300,
maxHeight: 300,
minWidth: 100,
minHeight: 100,
...
If you don't want the modal to shrink/expand with the content, you can force the modal to stay at a specified width & height. Some people even swap out classes (one for normal modal, one for long modal, etc.):
#simplemodal-container {
height: 360px;
width: 600px;
}
If you dynamically change the content of the div (like from an ajax call) you can also do this:
$("#simplemodal-container").css('height', 'auto'); //Resets container height
$("#simplemodal-container").css('width', 'auto'); //Resets container width
$(window).trigger('resize.simplemodal'); //Refresh the modal dialog
I recently discovered the emptyText config value for lists in Sencha Touch to display when the store is empty. The problem I am having is that this text appears in the top left corner and I can't seem to find a way to place it in the middle of the screen.
The emptyText property accepts HTML. Example:
CSS:
.emptyText {
text-align:center;
color: #999;
}
JS:
emptyText: '<div class="emptyText">No members yet</div>'
For vertical centering you will have to use the CSS3 Flexible box model
Example CSS:
//vertical and horizontal centering based on fixed height
height:200px;
display:-webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align:center;
-webkit-box-pack:center;