I am working on one react component in which I need to use calc function in styles
const styles = {
spotImg:{
maxWidth:"100%",
maxHeight:"100%"
},
spotCont:{
width: /*here want to use calc with screen width*/
}
}
I want to use screen width with calc function in the above style code in react js component.
const styles = {
spotImg:{
maxWidth:"100%",
maxHeight:"100%"
},
spotCont:{
width: "calc(100vw)",
fallbacks:["-moz-calc(100vw)",
"-webkit-calc(100vw)",
"-o-calc(100vw)
]
}
}
Put the calc function in double quotations, and then you can use the CSS's vw to access screen width. Ie, 100vw provides you with the entire screen width. 100vw - 250px provides you with 250px less than the screen width, for example.
EDIT: Added fallbacks based on OP's comment about browser not accepting calc function.
Related
For various reasons, I am creating a site (not online yet) that has separate pages for mobile. I want to add something to the "monitor" site which says "if the browser width is less than X pixels, view *mobilepagename.html instead of this page. What code can I add to the main site CSS to do this?
You can't switch pages with only CSS. You can do media queries to change styling based on screen size though.
#media screen and ( min-width: 'px' ) and ( max-width: 'px') {
/* Mobile Styles */
}
Or you can use
#media screen and ( max-width: 'px' ) {
/* Mobile Styles */
}
max-width and min-width don't need to be in pixels either. You can use a variety of units like vw, em, etc.
If you want to switch pages based on screen size you'll need to use Javascript.
if ( window.outerWidth < x ) {
window.location = 'newpage.html';
}
Edit
Combine the above Javascript with a resize event.
window.addEventListener('resize', function(e) {
if ( window.outerWidth < 1024 ) {
window.location = 'yourmobilepage.html';
}
});
I need to use bootstrap 12 columns grid to get a responsive form based on the parent div's size.
As an exemple, whatever the size of the screen, the content need to see the div A's width and base the bootstrap's responsive design on that width.
My goal is to base my responsive design on the size of a modal window (in dhtmlx). If the user resize the modal window, the row should follow the rules (e.g. col-xs-12, col-sm-6, etc, but based on the size of the modal window, not the screen).
This fiddle show a modal window with some bootstrap form inside. I need the form to be responsive to the size of the modal form, not the screen size.
class="col-xs-12 col-sm-6"
As #makshh mentionned in the comment, it does not seem to be possible to do this right now. The only way I found is from another stack overflow question by #tsdexter:
$(document).ready(function(){
$('.somecontainer').on('resize',function(){
if ($('.somecontainer').width() < 640) {
$('.somecontainer').addClass('m');
} else {
$('.somecontainer').removeClass('m');
}
});
});
I just managed to make the grid system inside a modal act responsive to the modal's breakpoints in Bootstrap 4 with scss. Since the modal's max-width is responsive itself on some breakpoints, we need to generate new css on those breakpoints for that specific modal size (sm, md, lg, xl) which just overrules the Bootstrap's css media queries
Just copy/paste everything into a separate scss file, activate it and you are good to go
// This is a stripped version of the original "make-grid-columns" mixin from Bootstrap
#mixin make-modal-grid-columns($breakpoints) {
#each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
#include media-breakpoint-up($breakpoint, $breakpoints) {
#for $i from 1 through $grid-columns {
.col#{$infix}-#{$i} {
#include make-col($i, $grid-columns);
}
}
}
}
}
$breakpoint-sm: 576px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
.modal {
// Overrules all .col css inside .modal-sm to a single col
.modal-sm {
#include make-modal-grid-columns((
xs: 0
));
}
// modal-md (no specific class is also modal-md)
#include make-modal-grid-columns((
sm: $breakpoint-sm
));
.modal-lg {
#include make-modal-grid-columns((
md: $breakpoint-lg
));
}
.modal-xl {
#include make-modal-grid-columns((
md: $breakpoint-lg,
lg: $breakpoint-xl
));
}
}
FYI: it generates 350 lines of code
I obviously have a lot to learn about CSS!
I'm using VS2015 and Cordova to develop a mobile application. I'm using ngMap (http://ngmap.github.io/) to wrap Google maps. I really like the library! The problem is that it defaults the size of 300px, and my CSS skills are too poor to correctly override that.
I know that ngMap defaults to 300px, and that you can specify default-style="false" and then provide overrides in CSS that specify position: absolute; height:100%; width:100% - which should make the map fill the page.
When I try to do that, I end up with this:
When I accept the default behavior, I have a working map, but it's only 300px tall:
Here's a Plunker that's simple, but demonstrates the issue I'm experiencing:
http://plnkr.co/edit/8qfGaLBMgXFtluELZhCs?p=preview
Note that the CSS has the recommended overrides. When those are omitted, the map is visible - but only 300px tall. I know this should not be so hard, and I know others have had success following the instructions listed above. I just can't get it to work.
For what it's worth, the behavior is the same when I deploy it to my Samsung S5: I see the lower left-hand corner of the map. Any help appreciated!!
Adding some CSS and triggering "resize" event you can achieve your goal:
CSS:
body, html {
height:100%;
width:100%;
}
.map {
position:absolute;
height:100%;
width:100%;
}
.scroll {
height: 100%;
}
JS:
NgMap.getMap({ id: "splashSearch" }).then(function (map) {
vm.map = map;
$timeout(function() {
google.maps.event.trigger(map,'resize');
}, 200);
});
Forked your plunker: http://plnkr.co/edit/7dVCO8FpWxmLVVSMtqjH?p=preview
Essentially what the title says - need to make this wider. Tried several solutions, neither work. Note that the "backdropClass" is applied perfectly and works, but the windowClass doesn't, nor the "size" option. I have tried them independently, nothing. CSS is in the same folder as the working backdrop class"
$modal.open({
templateUrl: 'myTemplate.html',
controller: 'controllingControllerCtrl',
backdrop: 'static',
backdropClass : 'blackBackgroundModal ' +
'blackBackgroundModal.fade blackBackgroundModal.fade.in',
windowClass: 'resizeModalWindow' +
'resizeModalDialog',
size: 'sm'
});
}
}
CSS:
.resizeModalWindow .resizeModalDialog {
width: 5000px;
}
What needs to be done for at least the "size" option to register - I don't really need custom widths.
Edit: Forgot checked links!
Checked this Q first
Then this
And of course docs
bootstrap css has media queries defining the width of a modal based on screen size. to globally overwrite them use !important
like this
.modal {
size: 5000px !important;
}
You should have white space between those two classes will recognize by the css rule.
windowClass: 'resizeModalWindow ' +'resizeModalDialog',
^^^added space here
Add this to your CSS:
.resizeModalDialog .modal-dialog{
width: 5000px;
}
Add the property where you instance the modal
windowClass:'resizeModalDialog',
windowClass will not resize another way.
I'm trying to use something like the boostrap framework to selectively choose which css class to apply to a given element, based on the window size.
For example, in bootstrap, is there a way to choose which class to apply based on which of the xs, sm, md and lg divisions the browser falls under?
Is there any easy way to do this? Do I need to use javascript? Should I look towards something other than bootstrap?
It sounds like you need a media query.
They will allow you to selectively apply styling depending on the window size.
For example:
#media all and (max-width: 1000px) {
.element {
color: blue;
}
}
The above would apply a color of blue to the text of any html tag which has a class of element ONLY when the screen size width is below 1000px.
you can use css media queries or use javascript like
$(document).ready(function() {
var hei = $(window).height();
var wid = $(window).width();
if (hei <= 640 || wid <= 360) {
$('element').css('property','value');
}
});