If no other columns are present, ensure a column with a width of 9 fills the entire width

While working with Foundation 6, I encountered a situation where I had a large-3 column next to a large-9 column. The issue was that sometimes the large-3 column might not be present. In such cases, I wanted the remaining column to expand and fill up the entire row as if it was a large-12 column. I thought this should be a built-in feature in Foundation, but couldn't find any information about it in the documentation. Any suggestions on how I could achieve this manually would be greatly appreciated.

Answer №1

TL:DR; - The Foundation framework does not have built-in support for this feature, however, after reviewing your question, I have come up with some possible solutions:

  1. To control the presence of the large-3 columns, you can check if a certain condition is met and echo the relevant HTML div tags using a scripting language like PHP or Python. For example:

    if (some_condition === true) {
        echo '<div class="large-3 columns">...</div>';
        echo '<div class="large-9 columns">...</div>';
    } else {
        echo '<div class="large-12 columns">...</div>';
    }
    
  2. If you need to hide the div in specific screen resolutions, you can utilize the grid system's built-in functionality like so:

    <div class="row">
      <div class="large-3 show-for-large columns"><!-- ... --></div>
      <div class="large-9 medium-12 columns"><!-- ... --></div>
    </div>
    
  3. Another option is to dynamically remove or add the div using jQuery's remove() method:

    $( ".large-3" ).remove();
    

I hope these suggestions are helpful. Please feel free to share any code snippets for further assistance.

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

Store a video file on your device's memory

Currently, I am storing simple strings in local storage. However, I am now facing the issue of wanting to save videos and images to local storage. Due to the limitations of localStorage supporting only strings, I am unsure of how to achieve this. If you h ...

Why does HTML validation matter after the webpage has finished loading?

After coming across an article recommending a workaround for a method that isn't considered strictly valid (using target="_blank") by using JavaScript to apply the rules after the page has loaded, I began contemplating if this approach is ethical. It ...

Left-hand navigation panel that complements entire screen

Web Design .sidenav { height: 100%; position: relative; overflow-y: scroll; background: #000000; width: 15%; } Ensuring the menu covers the full screen correctly by setting its height to 100% is effective, but it may appear awkward wh ...

The issue of responsive spacing (such as mb-lg-2 mb-sm-3, etc) not functioning as expected has been identified in Bootstrap

Previously in Bootstrap 4, these classes were effective. However, I am finding that they are not functioning properly in Bootstrap 5. Any insights as to why this might be happening? Note: d-block d-lg-flex , text-center text-lg-start text-md-end seem to s ...

Tips for effectively showcasing dynamic data retrieved from a database

I need to showcase my dynamic data from a database in a specific format that can accommodate anywhere from one to five variables. https://i.sstatic.net/pPQZE.png https://i.sstatic.net/gSJw6.png How can I effectively display and present the data using HTML ...

Ways to remain on the same page even after submitting a form

I've been searching for a solution to my specific issue for days, but haven't had any luck. Can anyone provide assistance? I have a form on my website that is supposed to send an email when clicked, while also converting the div from a form to a ...

Utilize Bootstrap columns to maximize vertical space efficiency

I recently came across a bootstrap layout like this: In this setup, there is a single .row that contains 8 .col-lg-3 divs. However, I noticed that there is excessive vertical whitespace present, which not only looks undesirable but also makes the layout a ...

filtering elements with selectable functionality in jQuery UI

I'm trying to exclude the <div> children from being selected within this list item and only select the entire <li>. The structure of the HTML is as follows: <ul id="selectable"> <li> <div id="1"></div> ...

What happens when a browser can support multiple versions of a font - which one does it choose

If I have two versions of a font, customFont1.woff2 and customFont1.woff, and I list the woff2 version first followed by the woff version in the font declaration file, what happens when the browser supports both formats? Will it download both fonts or ju ...

Dim the brightness of an image on Internet Explorer

I discovered this code on another site and it functions flawlessly in Chrome and FF, however, IE (version 11.0.9) doesn't seem to like it. -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); fil ...

What steps can be taken to achieve a smooth scrolling speed adjustment?

Upon discovering this website, I was impressed by its smooth scrolling features. The seamless scroll on the site creates a peaceful and calming experience without any abrupt jumps. It responds effortlessly to my mouse wheel, arrow buttons, and spacebar, p ...

Using Javascript to display an element when scrolling within a specific container and each item of an array reaches the top

I'm just starting out with JavaScript and I'm attempting to create a scrollable div that includes items from an array. As the user scrolls and each item reaches the top, I want a hidden element to be displayed. Here's what I have so far: ...

How to vertically center text with button label in Bootstrap 4

I have a simple objective: I want to align a line of text to the left and a button to the right, with the text vertically aligned to the button's label. I've tried adjusting padding and margins without success. I feel like there must be an easy s ...

Is it possible to update only the inner text of all elements throughout a webpage?

Scenario After coming across a thought-provoking XKCD comic, I decided to craft a script that would bring the comic's concept to life: javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+ ...

JavaScript - Modify the proposed content prior to inserting it into the input field

In my current project, I have implemented a feature using jQuery UI - v1.11.4, where an HTML textbox utilizes a JavaScript autocomplete functionality. The suggested string for the textbox is created by concatenating several columns (patient_no, patient_nam ...

PHP - display the modified page with the updates applied

I currently have an HTML page where users can input information and submit a form to change database information. Typically, the submit button calls a PHP file on the server to process the data. However, I am looking for a way for this PHP file to return t ...

Unable to modify variable values in AngularJS

I'm currently utilizing AngularJS along with the "Angular Material" implementation (found here: https://material.angularjs.org/latest/#/) One of the components I'm using is the SideNav component: https://material.angularjs.org/latest/#/demo/mate ...

Aligning container divs at the center in various screen resolutions

I recently constructed a portfolio website using Bootstrap and Isotope JS. In my layout, I have a container div which works perfectly when viewed on a desktop browser - displaying 3 divs in one line. However, the issue arises when the resolution changes an ...

Best way to eliminate empty options from dropdown and ensure that required validation is functioning in AngularJS?

My dropdown is populated with owners from the owners data, but it includes an extra blank option. I need to eliminate this blank option. However, when I make the necessary changes to remove it, the required validator stops working properly. <md-input-c ...

Hover over the drop-down menu to enable tab on hover mode

Is it possible to make the tab switch to hover mode when I rollover the drop down sub-menu without using JavaScript, and only using CSS? <li id="anchor" class="title dropdown"><a href="#">Main Tab</a> <div class="co ...