I am having trouble keeping the rows and columns line up
When is desktop mode maximum columns should be three.
When I click on “Cell Three” works fine but when I click on ”Cell Two” it does loose the three column order
When Tablet maximum columns should be two all the time.
When I click on “Cell Two” works fine but when I click on “Cell Three” it does loose the two column order
When Mobile maximum is one column.
It does work fine
I paste the whole code in one file hoping it will be easier to follow, my apologies if is hard to read
Let me know if I am clear with my explanation plz, in advance thank you for your help!
<!DOCTYPE html>
<!-- include bootstrap -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
vertical-align: top;
}
.col-fixed {
/* custom width */
width:320px;
}
.col-min {
/* custom min width */
min-width:320px;
}
.col-max {
/* custom max width */
max-width:320px;
}
.item {
width:100%;
height:100%;
border:1px solid #cecece;
padding:16px 8px;
background:#ededed;
background:-webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
background:-moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
background:-ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
}
/* content styles */
.item {
display:table;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
}
.content:before {
font-family:sans-serif;
font-size:12px;
letter-spacing:1px;
color:#747474;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
}
</style>
<div class="container">
<div class="row row-centered">
<!-- Cell One -->
<div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell One</div></div></div>
<!-- Cell Two -->
<div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content"><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'ImageMngt')">Cell Two</a></div></div></div>
<div id="ImageMngt" class="tabcontent">
<b>Content Cell Two</b><br />
Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two Content Cell Two
</div>
<!-- Cell Three -->
<div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content"><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'ImageOff')">Cell Three</a></div></div></div>
<div id="ImageOff" class="tabcontent"><b>Content Three</b><br />
Content Three Content Three Content Three Content Three Content Three Content Three Content Three Content Three Content Three
</div>
<!-- Cell Four-->
<div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Four</div></div></div>
<!-- Cell Five-->
<div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Five</div></div></div>
<!-- Cell Six -->
<div class="col-xs-6 col-centered col-fixed"><div class="item"><div class="content">Cell Six</div></div></div>
</div>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
Its hard to understand what you are trying to do as you are just adding an extra div outside the existing structure so it of course will not line up with anything,
I assume you want content of cell3 to appear in the gray cell3 box? If so then move the div inside.
e.g.
<!-- Cell Three -->
<div class="col-xs-6 col-centered col-fixed">
<div class="item">
<div class="content"><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'ImageOff')">Cell Three</a>
<div id="ImageOff" class="tabcontent"><b>Content Three</b><br />
Content Three Content Three Content Three Content Three Content Three Content Three Content Three Content Three Content Three </div>
</div>
</div>
</div>
Do the same for any other hidden content that you may want to show.
I’m not sure if that’s what you were trying to do though?
Hey PaulOB, I really appreciate your help, Thank you so much.
I had already tried that but what i want to do is to “.tabcontent” expand 100% horizontally across the page or below the three upper cells, instead of just using the 320 width. Do you have any suggestions? I believe you got what I am trying to do, let me know if you have any questions plz and again thank you
And your issue is that, when you click on Cell Two, Cell Three moves down to a second row, instead of staying in the first row? But when you click on Cell Three, it stays where it should be?
The image in post #5 shows two rows with three cells in each row and with content between the two rows apparently relating to cell #3 in the first row.
The image does not indicate that cell #3moves out of its position leaving only two cells in that upper row. Quite the contrary, it seems to indicate that clicking any cell places its respective content the full width of a row below the row with the tab that was clicked… very much like tabbed content.
The “responsive” part seems a bit tricky unless one thinks of the “cells” as menu buttons - and you realize that menus are often reconfigured so they will fit in narrow viewports - you mentioned responsive but did not show how the menu is to behave at narrow widths.
Would you mind tying your thoughts into a more cohesive set of drawings?
Hi Ronpat, thanks for taking the time to reply, i am including another screen grab when i click “Cell Two” then “Cell Three” moves out of order. How can i keep "Cell Three at its position ? When is tablet mode, it does switch to “Two Columns” and keep “.tabcontent” below the clicked cell. The souce code is also on this page. Thank you again
I see what is happening but I don’t know how to go about it while keeping things responsive as it is currently.
The “revealed” content follows each of the “cells”.
Because the revealed content is block, the cells naturally re-position themselves after it.
I don’t know how many cells there are or if it would “work” for what you are wanting to do, but maybe having revealed content display before the first cell?
Could you have an empty <div> after each row and then use JavaScript to insert the appropriate content into that div depending on which link is clicked?
I’m thinking this can be done with a little smoke and mirrors and possibly a dash of JS, if you are inclined to use it IF the number of cells in each row does not have to change with the width of the viewport. In other words, the content can be hidden beneath each row and selectively displayed when the respective button is clicked, rather than trying to shift content from the button to the area beneath the row.
In my read of the issue, I am interpreting “responsive” to mean “fluid”.
I specified that the number of cells in a row had to remain fixed like his image… the OP didn’t disagree. If that is indeed acceptable, the JS seems like it would be simple: click a button to hide a visible content box in the rwo below the button row (if any are showing) and show the box whose button was clicked. Hide (reset) any visible content box if a visible content box is clicked or click an “X” in the corner. Like a tabbed display.
If he indeed wants the number of buttons in the row of buttons to change, then I have no idea how that might be done.
I’ve come up with what is more proof of concept than polished code.
* the “resize” should be throttled or removed entirely. I added it because I got tired of reloading the page while testing
