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.
Related
I am using a VueMapbox with markers and trying to display it in a parent container. I added this CSS because without this the map has 0 height and width:
.mapboxgl-map {
position: relative !important;
}
I want the width to be 100% of the parent, so I added this which DOES work:
.mapboxgl-canvas {
height: 100% !important;
width: 100% !important;
}
HOWEVER, when you drag the map or zoom in, the markers move around as if the map is the default size. I've tried messing around with the CSS and I haven't had any success.
I've also tried calling map.resize() after the map gets loaded. The function gets called but doesn't do anything and once you zoom in to the map, the background disappears. Here is my component:
<template>
<MglMap :accessToken="accessToken" :mapStyle="mapStyle"
:center="coordinates"
#load="onMapLoaded"
>
<MglMarker v-for="team in teams"
:key="team.id"
:coordinates="[team.lng, team.lat]"
>
</MglMarker>
</MglMap>
</template>
<script>
import Mapbox from "mapbox-gl";
import { MglMap, MglGeojsonLayer, MglMarker, MglPopup } from "vue-mapbox";
export default {
components: {
MglMap,
MglGeojsonLayer,
MglMarker,
MglPopup
},
mixins: [teamHelper],
data() {
return {
accessToken: ...,
mapStyle: "mapbox://styles/mapbox/streets-v11",
coordinates: [-50.549668, 39.014],
map: null,
mapbox: null
}
},
props: {
teams: []
},
created() {
this.mapbox = Mapbox
},
methods: {
onMapLoaded(event) {
this.map = event.map;
this.map.resize(); // does not work
},
}
};
</script>
Once you resize the window it works as expected, so if there were a way to trigger that properly, then I feel like it should work. I've also read all of the similar questions on this I could find, and none helped, AND I read the documentation which does not mention anything about this.
I'm using Vue ^2.5.17 and vue-mapbox ^0.4.1
Alright well I found a somewhat hacky workaround. You just have to render the map component inside an IFrame, set the size of the IFrame to 100% of the parent and you're good to go.
If you need to pass data from the parent component to the child, you can do something like this: http://blog.pixelastic.com/2017/09/12/sending-data-to-an-iframe-with-vue-js/
If you have a better solution or know why the resizing wasn't working then please respond.
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"
}
}
}
For a button, by default Bootstrap 4 allow you to set default button "size" between : xs, sm, md, lg, xl.
So, in my code, small screen first, i use sm size for screen <576px :
<button type="button" class="btn btn-success btn-sm"></button>
But for xl screen ≥1200px, need i to change size attribute or something else with Bootstrap to adjust button size ?
I don't really understand Bootstrap responsive behavior for button and 'size' attribute between small and large screen.
Thanks.
I don't think there's anything built out of the box for responsive buttons in bootstrap, you'd probably be better off extending the existing bootstrap button sizes in sass/media queries ie
.responsive-button {
#media (min-width: 576px) { #extend .btn-sm }
#media (min-width: 768px) { #extend .btn-md }
}
I haven't tested this so may need to research a bit further but hopefully this gets you on track :)
According to the Vue.js documentation, i had finally computed my CSS class dynamically according to window.onresizeevent call in mounted () function.
Example :
Here is my Bootstrap button :
<b-button :size="nsize" variant="outline-success" class="my-2 my-sm-0">
<font-awesome-icon icon="search"/>
</b-button>
Here is my function in App.vue file:
<script>
export default {
name: 'topnavbar',
data () {
return {
nsize: "sm",
mediaWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
}
},
mounted () {
if (window.addEventListener) {
window.addEventListener("resize", this.updateSize, false);
} else if (window.attachEvent) {
window.attachEvent("onresize", this.updateSize);
}
},
methods : {
updateSize: function (){
let sizeEl = "md";
let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if(width <= 576){
sizeEl = "sm";
}
this.nsize = sizeEl;
}
}
}
</script>
Sources:
Get the browser viewport dimensions with JavaScript
https://fr.vuejs.org/v2/guide/class-and-style.html
I'm using the react-native-dimension library for making my UI responsive as follows:
const{width,height} = Dimensions.get('window');
and in my style.js file :
imageBackgroundLandscape:{
width:height,
height:width
},
imageBackgroundPortrait:{
width:width,
height:height
}
The problem is that when I rotate the screen, the width and height variables have got previous values!
For example in the portrait mode my variables are:
width : 800
height: 1280
and when I rotate the screen my variables are:
width : 800 // previous value
height: 1280 // previous value
In addition, I use the react-native-orientation to determine the mode of the screen.
I want to know how can I change the values of them (width, height) automatically when I rotate the device, or are there any other libraries for this?
Thanks in advance.
I usually handle the height, width confusion with the following code:
//Dimensions.js
import {Dimensions} from 'react-native';
const {height, width} = Dimensions.get('window');
const actualDimensions = {
height: (height<width) ? width : height,
width: (width>height) ? height : width
};
export default actualDimensions;
Instead of requiring the height and width from Dimensions, use the actualDimensions and for managing the orientation gracefully you should give a try to this library as well.
The Dimensions are loaded before the JS bundle gets loaded into the app so it is recommended to fetch the height, width dynamically for every render
You can read this here
I usually used Flexbox to arrange the layout for my components. It helps them to be responsive. Maybe you could give a try too.
Layout with Flexbox
You can use these steps to make your UI responsive.
1: use percentage whenever it's possible
2: use the power of flexbox to make your UI grow and shrink
3: use Dimension API
Actually, you do right but half of the task. you got the width and height from Dimensions and it is right, but how react-native understand your orientation changes?
First, your code should understand the change of orientation, then you set a call-back function to change the state of your application for implementing new width and height.
Awfully, I don't know the react-native can understand a change of orientation with its built-in functions or not. So I'm using this library to understand orientation changes and then I use setState to re-render the codes.
Absolutely, I put the width and height inside state of the component.
If you wanna lock the orientation change, use this library.
Firstly:
You are facing that issue is because you forgot to call const{width,height}
= Dimensions.get('window'); again when the orientation has changed.
In order to get the latest value of width and height after the orientation change you would have to call the Dimensions.get('window') function again and get width and height from it's output.
Secondly:
Instead of using multiple libraries, you can just use one library(react-native-styleman), that lets you handle this type of stuff very easily:
Here is how the code would look like using react-native-styleman.
import { withStyles } from 'react-native-styleman';
const styles = () => ({
container: {
// your common styles here for container node.
flex: 1,
// lets write a media query to change background color automatically based on the device's orientation
'#media': [
{
orientation: 'landscape', // for landscape
styles: { // apply following styles
// these styles would be applied when the device is in landscape
// mode.
backgroundColor: 'green'
//.... more landscape related styles here...
}
},
{
orientation: 'portrait', // for portrait
styles: { // apply folllowing styles
// these styles would be applied when the device is in portrait
// mode.
backgroundColor: 'red'
//.... more protrait related styles here...
}
}
]
}
});
let MainComponent = ({ styles })=>(
<View style={styles.container}>
<Text> Hello World </Text>
</View>
);
// now, lets wire up things together.
MainComponent = withStyles(styles)(MainComponent);
export {
MainComponent
};
I am using react-native-responsive-screen. it is working also with orientation change
USAGE
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
listenOrientationChange as lor,
removeOrientationListener as rol
} from 'react-native-responsive-screen';
class Login extends Component {
componentDidMount() {
lor(this);
}
componentWillUnmount() {
rol();
}
render() {
const styles = StyleSheet.create({
container: { flex: 1 },
textWrapper: {
height: hp('70%'),
width: wp('80%')
},
myText: { fontSize: hp('5%') }
});
return (
<View style={styles.container}>
<View style={styles.textWrapper}>
<Text style={styles.myText}>Login</Text>
</View>
</View>
);
}
}
export default Login;
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