Row-eq-height does not function properly with the layout of my webpage when trying to bootstrap equal column heights

I am currently building a webpage and struggling with keeping the left orange div at the same height as the right div. The navigation is represented by the orange div, which contains links. Upon clicking a link, a preview of a .pdf file appears in the right div, causing it to be higher than the left navigation. I want the orange div to adjust its height accordingly when a link is clicked.

I attempted using the .row-eq-height class from Bootstrap, as well as referencing these posts: Same height column bootstrap 3 row responsive Bootstrap equal column heights using row-eq-height

Unfortunately, these solutions did not work for me as they disrupted the order specified by Bootstrap.

Check out my code here

If you have any suggestions or solutions, I would greatly appreciate your help. Thank you!

jqueryhtmlcssrowequals

Answer №1

To adjust the height of the orange div and apply it to another div with the class "right", you can use the jQuery method .height().

Here is the JavaScript code snippet:

 var height = $("div#left").height();
    $("div#right").css("height", height);

$("#nav li:has(ul)").children("ul").hide();
$("#nav li:has(ul)").find("div").click(function() {
  var parent = $(this).parent()
  parent.siblings().find("ul.showSubnav").removeClass("showSubnav");
  parent.find("ul:first").toggleClass("showSubnav");
  parent.siblings().find("div.ordnerOffen").removeClass("ordnerOffen");
  parent.find("div:first").toggleClass("ordnerOffen");
});

var height = $("div#left").height();
$("div#right").css("height", height);
/*Main Container-----------------------------------*/

div.container {
  width: 100%;
  font: 12px Verdana, Arial;
  clear: both;
  /*border:1px solid silver;*/
}
/*Wrapper -----------------------------------*/

div#wrapper {
  width: auto;
  height: auto;
  margin-left: 6%;
  margin-right: 6%;
  border: 1px solid silver;
}
/*Header-----------------------------------*/

header {
  padding: 1em;
  color: white;
  clear: left;
  background-image: url(Hintergrundbild.jpg);
  background-repeat: no-repeat;
  text-align: left;
}
/*Top-Level Navigation-----------------------------------*/

div#top_nav {
  font: bold 10px Verdana, Arial;
  clear: both;
  background-color: white;
  text-align: right;
  color: #FFFFFF;
  padding: 5px;
  padding-left: 0px;
  padding-right: 0px;
}
div#top_nav a {
  text-decoration: none;
  color: white;
}
#navigation_ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
#navigation_li {
  float: left;
}
#navigation_li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#navigation_li a:hover {
  background-color: #111;
}
.active {
  background-color: #FCC330;
}
/*Navigation Links-----------------------------------*/

div#left {
  float: left;
  min-width: 35%;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  background-color: #FF8700;
...
/*Footer-----------------------------------*/

div#footer {
  padding: 1em;
  color: white;
  background-color: #333;
  clear: left;
  text-align: left;
}
#right {
  background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>
  MiniTec Intranet</title>

<!-- Body -->

<body>

  <div class="container">

    <div id="wrapper">

      <!-- Header -->

      <div id="header">
        <header>
          <img src="logo.png" alt="Logo">
        </header>
      </div>

      <!-- Top-level Navigation -->

      <div id="top_nav">
        <ul id="navigation_ul">
          <li id="navigation_li"><a class="active" href="#home">Home</a>
          </li>
          <li id="navigation_li"><a href="#Documents">Documents</a>
          </li>
          <li id="navigation_li"><a href="#mapping_tables">Mapping Tables</a>
          </li>
          <li id="navigation_li"><a href="#preface">1. Preface</a>
          </li>
          <li id="navigation_li"><a href="#managementsystem">2. Management System</a>
          </li>
          <li id="navigation_li"><a href="#flows">3. Flows</a>
          </li>
          <li id="navigation_li"><a href="#appendix">4. Appendix</a>
          </li>
          <li id="navigation_li"><a href="#wiki">Wiki</a>
          </li>
        </ul>
      </div>

      <!-- Left Navigation -->

      <div id="left">

        <!-- Home -->
        <p></p>

        <div id="home">Home/Documents</div>
        <p></p>

        <!-- Left Navigation -->
        <div id="Navigation_Links">

          <ul id="nav">
            <li class="expand">
              <div class="folder">&nbsp;&nbsp;&nbsp;&nbsp; About IQB</div>
              <ul>
                <li><a href="PDF/installation_declaration_2006-42-EC_template.pdf" class="embed-link">» Installation Declaration_2006-42-EC_Template</a>
                </li>
                <li><a href="PDF/a.pdf" class="embed-link"> » Installation Declaration_2006-42-EC_Template </a>
                ...

        </div>

        <!-- Right Column/PDF Display -->

        <div id="right">

          <!-- End Right Column -->
        </div>

        <!-- Footer -->

        <div id="footer">
          <footer>Footer</footer>
        </div>

      </div>
    </div>

</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing listview appearance in asp.net with css and enhancing with javascript

When I print, the css class is not being used although it appears when using the program <script type="text/javascript"> function printDiv() { var divToPrint = document.getElementById('DivIdToPrint'); ...

javascriptasp.netcssprinting

Switch off any other currently open divs

I'm currently exploring a way to automatically close other div's when I expand one. Check out my code snippet below: $( document ).ready(function() { $( ".faq-question" ).click(function() { $(this).toggleClass('open'); $(this ...

javascriptjqueryhtmlcss

Problem with flickering in Chrome when hovering over a div element

My JavaScript code generates dynamic elements using JSON data as input. $(function () { var list = JSON.parse(@ViewBag.NomineeList); var counter = 1; var tr; $(list).each((function () { if (counter % 2 !== 0) ...

javascriptjquery

What is the reason for Bootstrap requiring both a class name and an ID name for collapse functionality?

When implementing the collapse effect in Bootstrap, why do buttons need to refer to the data-toggle=collapse class and the data-target=#collapseExample ID of the panel for the effect? Wouldn't simply targeting the ID be enough to toggle its state? Co ...

jquerycsshtmltwitter-bootstrap

Guide on displaying traceback message on a new line in Python

When using HTML email, I'm utilizing .format() for string to pass in the arguments. Here is the Python code I've written: import sys try: print(5 / 0) except Exception as e: send_error_email(exp_message=format_exc()) Afterwards, I retr ...

pythonhtml

Implementing Bootstrap Datepicker within the dynamically generated table rows

I am currently in the process of developing a data grid for a project and I am encountering an issue with implementing Bootstrap Datepicker on the Date field within the table. The problem arises when trying to use the datepicker on subsequent rows that are ...

javascriptjquerycsstwitter-bootstrapdatepicker

Is there a way to format wrapped lines with indentation in an unordered list?

Is there a way to indent the wrapped lines of text in an unordered list? The current layout is not quite what I want, as shown in the first image below. Ideally, I would like it to look more like the second image. I attempted to use margin-left: 56px; and ...

javascriptjqueryhtmlcssword-wrap

Is there a way I can add opacity to a div without impacting the other elements contained in it?

When I set the opacity of a div, it seems to affect all the other elements inside that div by making them transparent too. However, I am looking for a solution where the child elements do not inherit the opacity of their parent. Any assistance on this is ...

css

Adapting padding based on the height of the browser to ensure optimal layout

I'm interested in adjusting the padding value of a button element based on the height of the browser window, not its width. I want to make sure that the padding adjusts proportionally to the browser window's height. Is this achievable using CSS? ...

htmlcssbrowser

Seeking a window-adjustable table with stationary headers

I have been searching high and low for a solution to my issue but have come up empty-handed. My goal is to create a table with fixed headers that remain visible while scrolling through the rest of the table. The catch is, I also need it to align properly w ...

javascriptjquerycsshtml-tablefixed-header-tables

Masking elements using CSS3 filters

Is it feasible to apply CSS3 filters as a mask? For example, I would like to blur only 30% of a div from the top. How can this be accomplished? I have created a small jsfiddle to demonstrate what I am attempting to achieve: http://jsfiddle.net/uxCXa/2/ ...

css

Optimizing Image Size According to the Container, Not the Screen Size: A Guide

After exploring various resources on responsive images, I have come across a challenge that has me stumped. It seems like it should be simple, but I can't quite figure it out: How can I serve the appropriate image size based on container width rather ...

htmlcssimageimage-processingresponsive

Adjusting the height of a CSS div to be 0 while also modifying the

I have encountered a unique dilemma <div class="parent"> <p>stuff stuff stuff</p> </div> Using CSS, I set the width and height of parent = 0; because I intend to modify it when a button is clicked. However, for this purpose, I ...

css

What is the most effective way to send an email in PHP with a table format

<?php $result = mysqli_query($con, "SELECT * FROM cse"); $mail_data = ""; while ($row = mysqli_fetch_array($result)) { $Hallticket_No = $row['Hallticket No']; $Name = $row['Name']; $Email_ID = $row[&apos ...

phpjavascriptjqueryhtmlmysql

Using ASP.NET MVC to dynamically display JSON data in a grid that is only determined during runtime

After spending a considerable amount of time attempting to solve this issue without success, I am faced with the challenge of handling a dynamic JSON dataset retrieved through a jQuery GET request in my MVC view. The dataset's columns and datatypes ma ...

jqueryasp.net-mvcjsonjqgridtelerik-mvc

The importance of scope in ng-style

I am attempting to dynamically change the font color in an input field based on the value entered into that field. However, I have encountered an issue with using ng-style as it is not recognizing the value of the scope and therefore the color does not upd ...

cssangularjs

How come e.target.value always shows the most recent value?

Starting out in HTML and I have a question regarding input. Here is the HTML code I am working with: <input type="text" value="abc" onChange={(e) => { console.log(e.target.value); }}/> I am puzzled because even though the default v ...

htmldom-events

Render just one pie chart using Highcharts.js manually

Is it possible to customize the colors of a single pie in a PieChart? In the documentation, I noticed that you can format the "dataLabels" by using a function. I would like to have similar control over customizing the color of a specific pie in a PieChart ...

javascriptjqueryhighcharts

Steps to verify the timepicker for accuracy and consistency throughout different time periods

I am currently working on validating a time picker for a project. I found a helpful example for date validation at http://jqueryui.com/resources/demos/datepicker/date-range.html but I need to adapt it for a time picker. Specifically, I need to ensure tha ...

javascriptjqueryjquery-ui

What is the best way to ensure my buttons hide or display correctly when clicked?

I have been working on setting up an edit button that toggles the visibility of save and cancel buttons. However, I encountered a problem where all the buttons disappear when I click on the edit button. This issue did not occur with my other buttons, and t ...

javascripthtmlcss