I have a div with id=group1port.
Inside this div are multiple divs, one being id group1porteq.
I am using the equal heights to make the div's the same height however, with what I have, it currently changes the heights of all the div's, when I only want it to effect the div group1porteq. I have tried ('#group1port div.group1porteq') but this doesn't work. I have also tried removing the "div" completely and that also doesn't work. Also have tried changing it to ('#group1porteq div') and then that just makes all the div's inside that div equal.
The "div class="portlet light bordered" id="group1porteq"" is the two div's i need to have equal height
I have div's that all have multiple div's inside, and I am trying to just get equal height for 1 div. Here is a sample of the script.
<script>
if($(window).width() > 800){
$('#group1port div').equalHeights();
}
</script>
Here is a sample of the code
<div class="row" id="group1port">
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered" id="group1porteq">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Bulletin</span>
</div>
</div>
<div class="portlet-body">
text
</div>
</div>
</div>
</div>
I'm not sure I fully understand what div's you're trying to find, but this find's both 'group1porteq' divs nested within the 'group1port' div.
$('#group1port').find('#group1porteq').each(function() {
// Do equal height stuff
});
I don't know what equalHeights(), but it sounds like your issues are all related to the selectors. You can find a full list of selector options here https://api.jquery.com/category/selectors/
You have a duplicate id: id="group1porteq" on two divs. You cannot have an id be the same on a page. Try changing it to a class as a first step. Can you add some CSS to this bit of code? it would seem that you are trying to break a table apart. Try adding "display: block" to the class: class="group1porteq" once you change that and see if it breaks the table model so you can get individual heights again.
Related
I just want to be sure about some basic HTML structuring.
Most HTML page body layouts start with a <div class="container"> which of course contains all the HTML in with boostrap v4 it contains rows and columns.
All nice and easy there.
My question is, am I "correct" or not to place columns and rows within separate containers?
This is what I mean:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
</div><!-- end body -->
I think the answer to my question is that "it is ok" because for example what happens if you want a full-page width div container then you'd use a separate container for those elements.
I just want to be sure, thanks!
As per your example, if the content has to be inside the container, then using multiple containers is redundant. Use a single container and then separate the rows.
This approach also depends heavily on the design.
Full page width div, YES, the separate container is correct.
Note : For full width
Use container-fluid for full width, and remove the padding as well.
container-fluid class has padding-left : 15px and padding-right: 15px.
You can remove it to cover the div end to end. You can use pl-0 and pr-0, classes provided by bootstrap to set padding-left and padding-right to 0, respectively.
From 2 hours I'm looking for what error is on my page because I have a huge blank space...the width is too big and I don't want to have that space. Could you help me to fix my code ?
Here is my website where you can check : https://andrei-my-codepen.000webhostapp.com/
I don't know if it's because of an unclosed tag, or from CSS. But, when I wanted to fix this problem, I saw that, at some divs with class row, if I cancel margin-left: -15px, that space disappear, maybe is because I have too much row class?
Use below code as using row as a child of class="reservation1" should resolve your problem.
<div class="reservation1">
<div class="row">
<div class="col-md-4">
<p class="menu-reservation">you want to stand here?</p>
</div>
<div class="col-sm-6 reservation-div">
<div class="button-reservation ">
<p class="reservation-text1 text-center">seat reservation</p>
<p class="reservation-text2 text-center">Reserve a place in "Good Food" restaurant</p>
</div>
</div>
</div>
</div>
I'm trying to position sidebar on the right side in a site based on Bootstrap grid.
Well, this is very simplified layout that I've made - jsFiddle
I admit it's not the good use of bootstrap classes (rows etc.) but it works.
The problem is: the sidebar html code must be under the text and content (because of SEO), so it must be somehow positioned next to content (class .content).
I tried positioned it as an relative element but didn't have any luck.
The text in .text div does not have static height, it will change
The .content will have same height every time
Is this more what you were after?
<div class="container">
<div class="row">
<div class="col-xs-9 pull-right">
<div class="col-xs-12 content">Main</div>
<div class="col-xs-12 text">Lorem</div>
</div>
<div class="col-xs-3 sidebar pull-left">
<p>sidebar</p>
</div>
</div>
</div>
jsFiddle
Basically I've split your entire container 3 to 9, and then made your 'content' and 'text' blocks children of the '9' column. I then applied both the pull-left and pull-right class to the relevant containers.
I also fixed up your HTML a bit as it was missing a div tag. I also got rid of some of the text to make the code more readable to me!
I'm attempting a layout in bootstrap that is positioned using the following image.
I have two rows, the top half and the bottom half both containing two separate background gradients. The rows are both divided into 50% wide columns, with the right-most columns containing content and the left-most columns containing a single image.
My problem is that I'm unsure of how to get an element to span two rows vertically while still retaining it's fluid layout. I've positioned it absolutely but once the window scales down it doesn't stack properly. My layout is as follows. Getting rid of the rows and splitting the page into two vertical columns results in me being unsure of how to split the background into two separate horizontal gradients. Any help would be appreciated. Thanks!
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
<img src="wooo-im-an-image">
</div>
<div class="col-md-6">
content of a mostly blabberous nature here
</div>
</div>
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
emtpy
</div>
<div class="col-md-6">
more content of a mostly blabberous nature here
</div>
</div>
I'm not sure if I quite understand but I did put together an example using your picture. Pardon the CSS skills and let me know if it helps you.
<div class="row gradient">
<div class="col-md-6"><div class="well inheritback">IMG<br><br><br><br><br></div></div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
</div>
</div>
Live Demo
http://www.bootply.com/116896
I have a layout built using CSS display:table (inline, row, cell, etc). I'm doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.
http://jsfiddle.net/fNNKT/
You can see the HTML and CSS at the jsFiddle above. It's actually not working there either, so maybe I'm doing something wrong, and can use help with that.
<div class="cabinet-container">
<div class="mode-bar">
<div class="mode-bar-left">
<div class="mode-bar-item">logo</div>
<div class="mode-bar-item active">Dispense</div>
<div class="mode-bar-item">Inventory</div>
</div>
<div class="mode-bar-right schedule">
<div class="mode-bar-item">Sign-Out</div>
</div>
</div>
<div class="table"></div>
<div class="left-container"></div>
<div class="center-container">
<div class="search-container">
<div class="table-cell">
<div class="search-field"></div>
</div>
</div>
<div class="nav-button-center-container">
<div class="table-cell">
</div>
</div>
<div class="list">
<div class="table-cell">
<div class="list-item-center-container"></div>
<div class="list-item-center-container"></div>
<div class="list-item-center-container-partial"></div>
</div>
</div>
<div class="nav-button-center-container-down-active">
<div class="table-cell"></div>
</div>
</div>
<div class="footer">
<div class="button-group table-border-5">
<div class="button-secondary">Dispense Non-Drug</div>
<div class="button-secondary">Sort By: Last Name</div>
</div>
<div class="button-group-right table-border-5">
<div class="button-primary">New Clinical Order</div>
</div>
</div>
</div>
Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there's whitespace between the tags in the code, there will be whitespace displayed in the browser.
Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).
Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.
On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).
Are you using any javascript/jQuery? On a recent project of my own, I was having a similar issue and all I had to do was move my custom lightbox script from the to right before the tag, and it seemed to fix the issue. Sometimes javascript can be wonky like that. I don't understand why, but that's the way it is.