If the text in the first column is too lengthy, the second column will be shifted to the subsequent row

Using Bootstrap 3 with a layout of 2 columns in 1 row. Need to find a way to shift the content in the second column to the next row if the text in the first column exceeds one row. Below is the code snippet with "Lorem Ipsum" text staying within the boundaries of the first column, producing the desired output:

<div class="col-sm-12">
  <div class="panel panel-default">
    <header class="panel-heading">
      <i class="fa fa-folder-o text-success fa-fw"></i> Basic Info <span class="text-success pull-right">
        <b></b>In Use </span>
    </header>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-12">
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Agenci </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">What is Lorem Ipsum</span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Department </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary"> Retail Audit </span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Paid </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">10000001</span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Responsible </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">348812</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

View the working jsfiddle example: https://jsfiddle.net/od6eup8w/

If the text in the first column goes beyond one line, it currently breaks to the next line as shown in the image - not the intended result.

https://i.sstatic.net/osPMW.png

To achieve the desired display where the "Lorem Ipsum" text fills the whole line horizontally and shifts the "Department" section below, refer to this alternate visualization:

https://i.sstatic.net/RfOkU.png

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

To compare text strings using javascript, you can place the desired string in a temporary span element and then check for overflow by comparing the width of the temporary span.

If there is overflow, switch the classes in the affected elements to bootstrap classes that match your styling preferences.

For more detailed information, refer to the explanations provided in the snippet below.

Remember that in this example, bootstrap grid columns with class sm are used. To make it fully dynamic across all grid system options, adjustments would be required for each available option in Bootstrap 3.

const textEls = document.querySelectorAll('.text-primary');

// helper function
const addRemoveClassLists = (el, removeCls, addCls) => {
  el.classList.add(addCls);
  el.classList.remove(removeCls);
}

const checkOverflow = (els) => {
  els.forEach(text => {
    // create a span hold the text string so we can compare the widths
    const compDiv = document.createElement('span');
    // append it to your document body
    document.body.append(compDiv);
    // set it's textContent to the text content of the text string we wish to compare
    compDiv.textContent = text.textContent;
    // get the bounding rect width of the comparative span
    const rectCompWidth = compDiv.getBoundingClientRect().width;
    // now get the bounding rect width of the text elements parent (includes padding/margin)
    const rectParentWidth = text.parentElement.getBoundingClientRect().width;
    // now identify and set a variable to the closest rows parent element up the HTML chain
    const targetRowParent = text.closest('.row').parentElement;
    // get the title element 
    const title = text.closest('.row').children[0];
    // get the text elements parent
    const titleText = text.closest('.row').children[1];
    // a conditional to check the width of the text parent element 
    // to that of the comparative elements width
    if (rectCompWidth > rectParentWidth) {
      // run relavent elements through helper function to change classes and display as wanted
      addRemoveClassLists(title, 'col-sm-6', 'col-sm-3');
      addRemoveClassLists(titleText, 'col-sm-6', 'col-sm-9');
      addRemoveClassLists(targetRowParent, 'col-sm-6', 'col-sm-12');
    } else {
      addRemoveClassLists(title, 'col-sm-3', 'col-sm-6');
      addRemoveClassLists(titleText, 'col-sm-9', 'col-sm-6');
      addRemoveClassLists(targetRowParent, 'col-sm-12', 'col-sm-6');
    }
    // remove comparative element from DOM
    compDiv.remove();
  })
}

// run function and pass in text element
checkOverflow(textEls);
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
<div class="col-sm-12">
  <div class="panel panel-default">
    <header class="panel-heading">
      <i class="fa fa-folder-o text-success fa-fw"></i> Basic Info <span class="text-success pull-right">
        <b></b>In Use </span>
    </header>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-12">
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Agenci </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">Lorem Ipsum text here that is a bit long and overflowing</span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Department </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary"> Retail Audit </span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Paid </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">10000001</span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Responsible </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">348812</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-12">
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Agenci </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">Some short text</span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> Department </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary"> Retail Audit </span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Paid </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">10000001</span>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xs-12">
            <div class="row m-t-8 m-b-8">
              <div class="col-sm-6 col-xs-12"> PTJ Responsible </div>
              <div class="col-sm-6 col-xs-12">
                <span class="text-primary">348812</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

How to rotate text direction using JavaScript and CSS

Despite my extensive efforts, I have been unable to find a solution to a seemingly simple problem. In JavaScript, I have generated dynamic text using the following code: context.fillText('name', 10, 10, 20); Now, I need this text to be ori ...

javascriptcss

Tips for making a website display in landscape mode rather than portrait orientation

As a newcomer to web design, I am curious if it is feasible to create a website that automatically rotates to landscape view when accessed on a mobile device. The current project I am working on is fluid in design, so this feature would greatly enhance t ...

javascriptjquerycss

Guide on transforming the popup hover state into the active state in vue.js through a click event

My code currently includes a popup menu that shows up when I hover over the icon. However, I need to adjust it so that the popup changes its state from hover to active. Intended behavior: When I click the icon, the popup should appear and then disappear w ...

javascriptcssvue.js

Styling a form with CSS animation in HTML

Here is an example that showcases what I am trying to achieve: Once a user has entered information into the input area or made a selection, the current line will smoothly animate (using translate & opacity, in my understanding) and the subsequent line w ...

javascripthtmlcsscss-animationsforms

What steps can I take to expand this on a grander level?

I have a code snippet for a personality quiz, but I'm facing an issue with increasing its size. Here's the HTML code: <h3>1. What is your favorite color?</h3> <input type="radio" name="q1" value="A" /> A. Red. <input type="r ...

javascriptjqueryhtml

Ways to determine if a specific text in HTML is already assigned a class name?

How can I modify my function to highlight selected text with the mark tag, and then un-highlight it if clicked again? highLightText() { var selection = window.getSelection(); console.log('this is the selection: ', selection); var ...

javascripthtmldom

Is there a way for me to retrieve the name of a newly opened browser tab from the original tab?

I have written a code snippet to create a new tab within the same browser by clicking on a link. function newTab() { var form1 = document.createElement("form"); form1.id = "newTab1" form1.method = "GET"; form1.action = "domainname"; //My ...

javascriptjqueryhtml

more concise jQuery script

Currently, I am a beginner in jquery and still in the learning phase. Although my existing code is functional and achieving the desired outcome, it feels lengthy and inefficient. I am seeking a way to streamline it and make it more dynamic. Specifically, t ...

jqueryhtmlcss

Tips for adjusting the height of Bootstrap Mansory columns

Struggling to figure out how to adjust the height of my column to accommodate three elements in each the first and second columns. As a newcomer to design elements, I could really use some guidance. Here's the mock-up I aim to create: https://i.sstat ...

htmlcssbootstrap-4masonrybootstrap-grid

React Router Link Component Causing Page Malfunction

Recently, I delved into a personal project where I explored React and various packages. As I encountered an issue with the Link component in React Router, I tried to find solutions online without any luck. Let me clarify that I followed all installation st ...

javascripthtmlreactjsnpmreact-router

Unable to execute script tag on PHP page loading

When I make an AJAX request to fetch JavaScript wrapped in <script> tags that needs to be inserted on the current page, how can I ensure that the code executes upon insertion? Here's the snippet I'm using to add the code: function display ...

javascriptphphtmlajax

Using AngularJs: Invoking Service/Provider in app.config

I need to access my service from within app.config. While searching for a solution, I came across this question, which presented a potential solution that I attempted to implement (not the accepted answer, but the one below with the title "Set up your ser ...

javascripthtmlangularjsroutes

What is the best way to make curved lines in CSS without relying on an image?

Seeking to design a website featuring numerous curved lines and borders, as shown in the linked images. Utilizing Vue to ensure consistent appearance across both desktop and mobile platforms without relying on image files unless necessary. Visualization ...

htmlcssvue.js

Struggling to position divs within a container div in a React component

Looking for help with aligning the divs with blue borders at the top? I need CSS code to achieve this. I tried using margin but it didn't work as expected. Also, when more content is added inside these divs, they seem to expand from the bottom to the ...

javascripthtmlcssreactjs

Discover `<li>` elements whose child `<a>` element contains a blank string

Sample HTML Code <li class= "View"> <a><span>Red</span></a> </li> <li class= "View"> <a><span>Orange</span></a> </li> <li class= "View"> <a><span>Green</span> ...

javascriptjqueryhtml

Unable to reset iframe style height in IE8 using JavaScript

I am encountering an issue with resetting the height of an iframe using JavaScript. Here is the code snippet I am working with: var urlpxExt = document.getElementById('urlPx'); urlpxExt.style.height = "200px"; While this approach works well in m ...

javascriptcssdom-events

What is the most effective method for utilizing JavaScript within HTML - functions or selectors?

When it comes to handling click events, there are two different methods that can be used. <button id="click" onclick="click()">1.click me</button> <script> function click(){ alert("ok"); } </script> Alternatively, jQuery can b ...

javascriptjqueryhtml

Challenges with flex in AngularJS's Material Design layout

Having some trouble with setting the flex properties on my layout. For reference, here is a plunker link: http://embed.plnkr.co/0SrUp25FvT2PAsJDEwF3/preview <md-content flex layout="row" layout-align="center"> <div layout="column"> ...

javascripthtmlangularjsflexboxangular-material

Steps for downloading a PDF file in PHP from a MySQL-stored path

I have developed a script that allows me to write PDF files to the server. The script sends the file to a specific directory named DATA and then stores the filename in a MySQL database. $target = "data/"; $target = $target . basename( $_FILES['file& ...

phphtmlmysql

Ensuring Content Alignment to the Left in Mobile View with BootStrap Rows

I'm in the process of building a website using Bootstrap. When viewing the webpage on desktop, everything looks great. However, when I switch to mobile view, the cards are not displaying as I would like them to. In mobile view, the cards are aligned ...

htmlcssbootstrap-4