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.
Related
I have a div containing other div and I need to dynamically refresh this kind of parent div.
To do that im using jquery to load a php file with args.
This php file creates 2 others divs inside the first one.
The first one contains items of the same size and is basically around 600px on a usual screen.
The second one could contains very long text and i want to resize it accordingly to the first div height cause on large screen, both div are side by side.
The parent div :
<div id="modStart" class="row mt-5 pt-3">
The first dynamic div :
<div id = "modC" class="col-xl-5 col-lg-12 mb-4">
<div class="tm-bg-gray p-5 h-100">
<?php
//embed a video,a title and a button. Almost constant height but still depending on title length.
?>
</div>
</div>
The second dynamic div (that I need to resize):
<div id = "modbC" class="col-xl-6 col-lg-12 mb-4">
<div id = "modb2C" class="tm-bg-white p-5 h-100" style="overflow-y: scroll;">
<?php
// very long dynamic text
?>
</div>
</div>
And the js function i'am calling to refresh the parent div
function refreshMod(nMod)
{
$("#modStart").load("form_CSifr.php?currMod=" + nMod.toString(),function()
{
var offsetHeight = document.getElementById("modC").offsetHeight;
//DBG
alert(offsetHeight.toString());
// always the height of the very long content of the second div ...
// so i guess it's too late here.
// I tried this code before filling the second div content but same rsult.
document.getElementById("modbC").style.height = offsetHeight + "px";
document.getElementById("modb2C").style.height = offsetHeight + "px";
});
}
I tried to get size and resize of different items. But I'm stuck now. No more ideas.
Im new to bootstrap and all those div are contained in
<div class="container-fluid">
<div id="content" class="mx-auto tm-content-container">
Maybe I can't do that here.
Last thing, it used to work before i separet the code in another php file to reload only this div.
Thanks for reading.
Since you are using jQuery, you can simply use method height() without any parameters to get first div height and apply it to the other div, again using height() method this time with parameter:
const leftDivHeight = $('#modC').height();
$('#modbC').height(leftDivHeight);
Do anyone have idea how to fix elements in div with class="row" ?
How it should look like: Good view, Click: Live show(example without angular)
How it looks like: Bad view
Switch component is repeated in lights component
When i remove <div class="row"></div> elements looking good, but the are under themselves
<div class="row">
<app-switch *ngFor="let switch of switches" [switch]="switch"></app-switch>
</div>
Link to my repository: SmartPi-Client
It is because Bootstrap 4 is using Flexbox. app-switch selector is between .row and .col divs so the correct bootstrap style wasn't applied to them.
You can make the browser to ignore this app-switch selector using the following css code.
:host {
display: contents;
}
I added a working example here.
https://stackblitz.com/edit/angular-ho3q4q
Instead of adding .col-sm-12 .col-md-6 .col-xl-4 to child div of app-switch, add it to app-switch.
<div class="row">
<app-switch class="col-sm-12 col-md-6 col-xl-4" *ngFor="let switch of switches" [switch]="switch"></app-switch>
</div>
The thing is that the style for the columns is applied to the direct child/ren of the html element with the ‚row‘ class.
You could add that class to your app-switch component tag or use a wrapper around it to define the col design
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.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
First, you have to look at the situation. Here is the link- LINK. As you can see the sidebar is at the bottom side. I want the sidebar just below the header. It works perfectly when I open a post, but not at the home page. I tried changing margins, but no luck. I think an element is restricting the sidebar to be at the top. Can anyone give me a clue?
Change your structure to this -
<div id="content-wrapper">
<div id="main-wrapper">...</div>
</div>
<div id="rsidebar-wrapper">...</div>
Change your css to this -
.index #content-wrapper {
margin: 0 auto;
width: 1200px;
}
.index #main-wrapper {
float: left;
max-width: 767px;
}
According to other answers about CSS horizontal aligning, you should change the order of the float elements so they are the first ones. Ej.
<div id="main-wrapper">
<div class="margin-1200">
<div id="rsidebar-wrapper">...</div>
</div>
</div>
<div id="content-wrapper">
<div id="main-wrapper">
<div class="margin-1200">...</div>
</div>
</div>
<div id="main-wrapper">
<div class="feature-posts">...</div>
</div>
Also, if you can afford the time and effort (and extra bandwith), the recommended way to align things in a page is using a framework with a grid system like pure, bootstrap or skeleton in which you can style divs like:
<!-- Bootstrap 3 example, based on a 12 column grid -->
<div class="container">
<div class="row">
<div class="col-md-8">Main content</div>
<div class="col-md-4">Sidebar</div>
</div>
</div>
To have a main content column covering two thirds of the page and then a sidebar covering the other third.
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.