Breaking information into sections to be spread across various columns

Scenario:

Your CMS allows users to control the content displayed, which includes multiple columns with links underneath. Here is an example layout:

Column name
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10

Column name2
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10
Column name3
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10

Column name4
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10

If the list becomes too long, the content will be split into 2 columns. Currently, this is achieved through CSS3 in Mozilla and a jQuery library for IE.

CSS

.columns {
 -moz-column-count: 2;
 -moz-column-gap: 30px;
 -webkit-column-count: 2;
 -webkit-column-gap: 30px;
 column-count: 2;
 column-gap: 30px;
}


### WEB FORM
<!--[if lte IE 9]>
<script src="/Estate/Scripts/Libraries/autocolumn.min.js" type="text/javascript"></script>
<script type="text/javascript">
 if (Estate.Sitefinity.IsInEditMode() == false) {
  jQuery('#MultiColumn').columnize({
   columns: 2,
   buildOnce: true
  })
 }
</script>
<![endif]-->

This client-side approach splits the text without considering the column structure.

Here is the current effect:

The content is now split client-side, but is there a server-side solution that can create two balanced columns? How would you address this issue?

jquerycsslayout

Answer №1

When working with a non-monospaced typeface (where all characters do not have the same width), counting characters to evenly distribute them in columns may not produce consistent results due to the varying widths of the characters. In this case, using CSS3 and a JavaScript fallback could be a more reliable approach.

Incorporating CSS3 and a JavaScript fallback can help achieve the desired layout even with a non-monospaced typeface.

Answer №2

After considering your feedback on Hannes' response, a strategic server-side approach involves dividing the content into groups (such as categorizing "centrum senioren" as one group), removing any formatting to prevent skewing results, and calculating the character count for each group. This method allows you to establish a general guideline for determining where to insert column breaks.

I concur with the prior commenter that addressing this issue on the client-side is more effective. Utilize column-break-inside: avoid in CSS to handle column breaks within your groups.

Answer №3

One method to achieve this server-side involves tallying the characters/words/links and dividing at some point in the center, but keep in mind this will only provide an estimate. If your text is sufficiently lengthy, this approach may be suitable.

Based on the orange-text image you provided, it appears that long words are present within constrained columns. As a result, splitting the content server-side could lead to notable discrepancies.

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

Adjust the dimensions of the initial cell

I need to adjust the size of the initial "generated" cell in a grid. The grid is not present in the HTML markup until JavaScript prints RSS information on it, making it difficult to target specific rows or cells directly. Note: The first element is hidden ...

javascripthtmljquerycsscss-grid

Designing a dynamic wizard layout using Bootstrap 4 tabs, however encountering issues with the button functionality limited to a

My goal is to create a seamless navigation experience between tabs. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/b ...

cssbootstrap-4

Issue with CSS pseudo-elements :before and :after in Internet Explorer

I am attempting to create a heading with lines on both sides, but I am facing an issue where it only seems to work on the left side in IE. Check out the code here h2 { position: relative; overflow: hidden; text-align: center; } h2:before, h2:afte ...

htmlcssinternet-explorer

The search filter on the bootstrap card failed to display the intended image

When I am searching for a specific image by name, the rest of the row's name keeps showing up. However, I only want to display the data relevant to my search. See the image below: Display: Select all data from the database. <?php $checkQuery = &qu ...

phphtmlcssanimation

The ashx file is triggered with every server control postback in jqgrid

I have an asp .net webforms page with a jqgrid, as well as several other server controls. The jqgrid is populated using an ashx file which retrieves data from the database and binds it successfully. Challenge Whenever a postback occurs (such as from a dro ...

javascriptc#jqueryasp.netjqgrid

How can we implement a function on every table using jQuery?

I have created a custom jQuery function for implementing pagination. However, I encountered an issue where when I load the function on a page with multiple tables, the pagination system gets applied to all tables. This means that the number of pages refle ...

jqueryhtmlhtml-tableeach

What is the method for inserting a clickable link into a data-image line of code using CSS3?

Recently, I delved into the world of CSS and am still getting the hang of it, Below is a snippet of code that I have been working on, <div id='ninja-slider'> <ul> <li> <div data-image="images/md/1.j ...

javascripthtmlcssslider

Tips for appending the id of an active element to a URL

My goal was to include the id value of the active element in a URL and then redirect to that URL with a button click. HTML <div class="icon" tabindex="0" id="company"> <img src="company.png"> </div> <button type="submit" onclick= ...

javascriptjqueryhtmlcss

AngularJS enables tab highlighting by responding to button selections

In my application, there are 3 tabs set up as follows: <li ng-class="{ active: isActive('#one')}"><a data-toggle="tab" class="tab-txt-color" href="#one" ng-click="selectTab('fruits') ...

htmlcssangularjs

Set up four divs in a cascading arrangement across four separate columns

Looking to set up 4 cascading divs that create the appearance of being in 4 columns. Here is the given html structure (unable to be modified) <div class="col1"> 1111 <div class="col2"> 2222 <div cl ...

htmlcss

Creating a default menu within a specific route in Ember.js is a crucial step in

I have created a JSBin code for my Ember.js application which can be found here: When I click on Item A, I want the ABCD menu on the left to remain visible and not disappear. Thank you. ...

javascriptjquerycssember.js

The integration of ag-grid webpack css is not reflecting on the website as intended

I'm facing an issue with ag-grid in my react application where I can't seem to get the CSS working properly with webpack. The grid is currently displaying like this: image: https://i.sstatic.net/RPKvH.png const path = require("path"); var webp ...

cssreactjswebpackag-gridag-grid-react

Processing Wordpress forms using Ajax and PHP

Currently, there is a form on my website that sends data to a PHP file. When the form is submitted, users are taken to a blank PHP file. I would like the form to either submit via AJAX or redirect after processing the mail function. Thank you for any help! ...

phpajaxwordpressjquery

Is there a way to format Persian words in a Left-to-Right direction?

When attempting to write Persian words in a left-to-right format for math formulas in a textarea using HTML and CSS, I am struggling to make it work with properties like direction:ltr;. I have tried various solutions but none have fixed the issue. I have ...

htmlcsstext-direction

Enable vertical scrolling within the table body to display entire rows

Encountering an issue with using overflow-y inside tbody. Attempting to set the maximum height of the tbody results in it shrinking into a single column, as shown in image 1. Seeking assistance in resolving this problem. Thank you. Below is the HTML code: ...

htmlcssoverflowbootstrap-5

What measures can be taken to keep the rightmost element from moving when hovered over?

While I am generally happy with the layout, there seems to be a slight jump to the left when hovering over the right-most image (you need to click "show images" to view them). Strangely, this issue does not occur with the last row of images. Any suggestion ...

javascriptjqueryhtmlcss

Guide to aligning form data with Bootstrap

Struggling to align my form data in the center below. I have attempted various online solutions without success. The use of bootstrap and offset is causing issues with the title for the form and the actual form itself. Any suggestions would be highly appre ...

htmlcssformstwitter-bootstrap-3centering

How to access a component attribute in a JavaScript library method in Angular 8

Within my Angular project, I am utilizing Semantic UI with the code snippet below: componentProperty: boolean = false; ngOnInit() { (<any>$('.ui.dropdown')).dropdown(); (<any>$('.ui.input')).popup({ ...

javascriptjqueryangulartypescript

Get the value of the button that has been clicked

I have a query regarding building a website that can be started via PowerShell. The PowerShell HTML code I am using is: $proxys = "" foreach ($email in $ADObj.proxyAddresses){ $proxys += "<button id='$email' name='alias&apo ...

javascripthtmljquerypowershellbootstrap-5

Perform an Ajax request to a C# Controller Function

In my javascript file named "data handling.js" within a folder labeled "JS", you'll find the following piece of code: document.getElementById('submit-new-project').addEventListener("click", function () { var ProjectName = document.getEl ...

javascriptc#jqueryasp.netajax