So I have an episerver block for form. On desktop and large screens, the form is displayed with an image to its right. On smaller screens the image is hidden.
When the image is hidden, I would like to make the form wider to fill up the missing space. The image does not have its own div class. It is the background image of the containing div.
<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(#Url.ContentUrl(Model.CurrentBlock.Image))">
<div class="row">
<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(#Url.ContentUrl(Model.CurrentBlock.Image))">
<div class="row">
<div class="#(!ContentReference.IsNullOrEmpty(Model.CurrentBlock.Image) ? "col-sm-7 col-md-8" : "col-sm-12 col-md-12")">
<div class="whitepaper">
</div>
</div>
</div>
</div>
</div>
</div>
I have also modified the above so that when a form is not included in the page through the EPIserver editor that the row should be full width by default.
My css for .gatedbg
#media (max-width: 960px) {
.gatedbg {
background-image: none !important;
}
}
Is there a method either in EPIserver or ASP.Net/MVC to detect when the background image is hidden from view in the browser?
If I understood correctly, I cannot use javascript in this razor page because it is server side code?
These pb-5 pt-3 classes presumably are part of some grid system, that is responsible for the column widths? Do the 960px correspond to one of the responsive breakpoints used by that system?
If so, you probably just need to set different classes (that make the form take full width, and hide the “image” column completely);
otherwise you might need to overwrite the width coming from those classes explicitly in your stylesheet.
Related
I am trying to display divs side by side on a page. However, if there is only one col-xs-12 col-md-6 div class on the page, then I am trying to display it full width(100%) rather than 50%. Currently it's using only 50% even if there is only one col-xs-12 col-md-6. The HTML is coming from MVC, so this HTML is fixed. Is there a way to do this using CSS or JavaScript/jQuery? I was thinking the following javascript(below) will do the trick but it doesn't.
Here is the my HTML and CSS:
<div class="col-xs-12 col-md-6 textcontent">
</div>
<div class="col-xs-12 col-md-6 service">
</div>
<div class="col-xs-12 col-md-6 textcontent">
</div>
CSS
.col-md-6{
width50%;
}
JavaScript
if ($('.col-xs-12.col-md-6').length == 1) {
$('.col-xs-12.col-md-6').toggleClass(".col-xs-12.col-md-12")
}
The Bootstrap grid system is based in a 12 column model. You can just use col-12 to say a column fill all container width.
Try this:
<div class="col-12 textcontent">
</div>
<div class="col-12 service">
</div>
<div class="col-12 textcontent">
</div>
Here the documentation about grid system with bootstrap and breakpoints if you want to apply different column configuration depending of the device screen width.
Sorry that you're locked into Bootstrap. This could easily be done with Flexbox. Addressing your specific question and code you posted, there's just a small error with your class toggle.
if ($('.col-xs-12.col-md-6').length == 1) {
$('.col-xs-12.col-md-6').toggleClass("col-xs-12 col-md-12");
}
When adding the class names, you don't want to add the "." and you want the class names separated just like they appear in the HTML. What you were doing was trying to add class=".col-xs-12.col-md-12" instead of class="col-xs-12 col-md-12".
I presume since you're using Bootstrap, you also won't need that css definition for .col-md-6 since Bootstrap should already have that defined for you.
What you actually need to do in JavaScript is remove the class "col-md-6".
if ($('.col-xs-12.col-md-6').length == 1) {
$('.col-xs-12.col-md-6').removeClass("col-md-6")
}
The .col-xs-12 applies to every screen size from xs up, and is overrode by .col-md-6 for screen size md and up. So you just stop the override from happening by removing the class.
I'm not able to change the height of the div when showing the error messages after submitting the form so that there is no overflow. I can set the height property to 1100px so that there is no overflow anymore but it looks quite ugly having so much white space.
I created a JSFiddle because it is a lot of code and since most of the code is relevant for the problem it is quite difficult to reduce it.
<div class="contact-form-wrap">
<div class="contact-form-wrap-left">
<div class="col full-width"><ul class="error-message"></ul></div>
</div>
<div class="contact-form-wrap-right ">
</div>
</div>
I tried to set the height to auto with a min-height of 760px. The div still does not grow. I changed the display property of contact-form-wrap-left to display: inline-block but since float is used this seems not to work.
https://jsfiddle.net/ArisMartinAccola/ud8x5e9o/
I hope someone can help me.
Change place of divs like this
<div class="col full-width"><ul class="error-message"></ul></div>
<form action="config.php" method="post" class="contact-form">
After that set col full-width with position relative and contact-form to relative as well. Of course, use create ID's for both of those
I use materializecss to create a slider.
However the image is full width, but not full height(its more than full height, so i get scrollbars). What do i need to change to make the slider fill out my screen with no scrollbars? I also use $('.slider').slider({full_width: true});
<div class="navbar-fixed">
<!-- some stuff-->
</div>
<div class="container-fluid">
<div class="carousel carousel-slider center">
<a class="carousel-item"><img class="responsive-img" src="http://lorempixel.com/800/400/food/1"></a>
</div>
</div>
If you just want to hide scrollbars then add
overflow: hidden;
To container which is having the scroll
Are you using the correct JavaScript?
On Materialize's site (I've used Materialize before, and thought something looked off about your code) it has this as the way to initialize a slider as "full_width:"
$('.carousel.carousel-slider').carousel({full_width: true});
In fact, your slider doesn't even have the .slider class; it only has .carousel-slider and .carousel.
I'm thinking if you use the above JavaScript you should be alright.
I'm curious if it is correct to replace
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
with
<div class="col-xs-12">...</div>
<div class="col-xs-6" style="display:none;">...</div>
with javascript?
All I need is to hide the second div and display 100% for the first div properly and by javascript. what is actually done. The question is if it is a proper way from Twitter Bootstrap prospective.
Bootstrap by itself is a responsive framework. You can achieve the above result without using Javascript.
Instead of writing
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
You can write
<div class="col-sm-6 col-xs-12">...</div>
<div class="col-sm-6 hidden-xs">...</div>
Here you can use sm, md and lg for small, medium and large layouts respectively.
When your screen gets resized to xs, the above code displays 100% of the first div and the second div is hidden.
This is a better approach when using Bootstrap.
I am using bootstrap, but the question is relevant to any responsive framework
I have a responsive page that looks (in a simplistic way) like this
<div class="wrap">
<div class="row page">
<div class="col-xs-12 col-md-6">
some stuff
</div>
<div class="col-xs-12 col-md-6">
some other stuff
</div>
</div>
</div>
I want to use this layout but to have the scope of the responsiveness be on some parent div (.wrap in this case) and not on the window, meaning if the parent div is at same specific sizes, force the responsive breakpoints to be in effect.
So this way, I can place this 'template' anywhere in the page and the results will be different according the wrap size and not on the screen/window size
Is there a way to do this? Or am I in outer space?
I think there is now way to check for the containers div width (using CSS), but yes you can try checking for the browser size and add/remove some class width which can give similar results.
#media (max-width: 768px){
.wrap{
width:1170px
}
}
#media (min-width: 767px){
.wrap{
width:767px
}
}
Or even better, you can use jQuery. var $widthOfWrap = $('.wrap').width()