Ensuring uniform column heights with Semantic UI

I came across the "equal height" classes in Semantic UI, but I'm having trouble applying them to inner divs, like the "ui segment" for example. More details can be found here.

Take a look at my screenshots below:

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

<div class="ui container indent border shadow">
  <div class="two column stackable ui grid ">
    <div class="equal height row">
      <div class="column">
        <h2 class="ui header center aligned ">Lorem</h2>
        <div class="ui segment ">
          <div class="ui list ">
            <div class="item">
              <i class="checkmark icon"></i>
              <div class="content">
                Lorem
              </div>
            </div>
            <div class="item">
              <i class="xmark icon"></i>
              <div class="content">
                Lorem
              </div>
            </div>
          </div>
   		</div>
      </div>
      <div class="column">
        <h2 class="ui header center aligned ">Lorem</h2>
        <div class="ui segment ">
          <div class="ui list">
            <div class="item">
              <i class="checkmark icon"></i>
              <div class="content">
                Lorem
              </div>
            </div>
           <!-- more items here -->
            
          </div>
        </div>
      </div>
    </div>
htmlcsssemantic-ui

Answer №1

To create a visually appealing layout, consider utilizing ui cards as outlined in this guide. The example provided in your JSFiddle does not currently support equal height cards with flexbox functionality. By updating to the latest version, you will access this capability.

For a demonstration, check out this sample: https://jsfiddle.net/5kL2pf7q/1/

Answer №2

As mentioned in this discussion, one potential solution is to utilize this plugin for matching column heights.

After experimenting with html using Semantic UI classes like the example below:

 <div class="ui container">
  <div class="ui three column doubling stackable grid container">
      <% camps.forEach(function (e) { %>
        <div class="column">
          <h1 class="ui header"><%= e.name %> </h1>
          <img src="<%= e.image %>" alt="" class="image small ui">
          <p> <%= e.description %></p>
          <div class="extra"><div class="ui label">
            <a href="/campground/<%= e._id %>">Read More</a>
          </div></div>
        </div>
        <% })  %>
      </div>
  </div>

I came to the realization that the columns already have uniform height, as demonstrated here.

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

Increase the size of the grid system column upon clicking on a Bootstrap icon

I am using Google Maps in a tab with Bootstrap, but the map is too small. I would like to change the Bootstrap grid system when I click on a FontAwesome icon: the first column should turn into col-md-8, and the second column should become col-md-4. Here i ...

javascriptjqueryhtmlcssbootstrap-4

Material design for Angular applications - Angular Material is

Recently, I decided to explore the world of Angular and its accompanying libraries - angular-material, angular-aria, and angular-animate. I'm eager to experiment with this new styling technique, but it seems like I've hit a roadblock right at the ...

javascripthtmlcssmaterial-designangular-material

Edge and Internet Explorer fail to recognize the :focus CSS selector

I am utilizing CSS to make our placeholders jump up when clicked inside, but Edge is not recognizing the CSS. It works fine on every other browser except for Edge. I've tried various solutions but none seem to work on Edge. Any thoughts on what might ...

cssinternet-explorerfocusmicrosoft-edge

Designing a sleek border for form input fields

Seeking assistance in finding a solution as my extensive online search has been unsuccessful. Currently, I have this code to style my form labels: label { display:inline-block; height: 15px; width: 350px; float: left; padding: 5px; ...

css

When the canvas is in full screen mode, my div elements are hidden

Currently, I am immersed in a 360-panorama project, utilizing panolens.js and three.js. While Panolens offers fullscreen mode functionality, the problem arises when entering this mode as the canvas conceals all of my div elements. One particular div elemen ...

javascripthtmlcssthree.js

Tips for integrating SASS from the Bulma package into an Angular application

I'm currently working on implementing Bulma into my project. The documentation suggests using NPM to obtain it. yarn add bulma Further in the documentation, there is an example provided with code snippets like the ones below. <link rel="styles ...

cssangularnpmsass

Instantly magnifying on the initial point regardless of the zoom type chosen is a feature of Chart.js zoom

Despite adding zoom functionality to my line chart, I am facing an issue where it automatically zooms in to the first point and does not allow me to zoom back out, except for using the reset zoom function. The zoom out function is also not working properly ...

javascripthtmlchart.js

Ways to retrieve dictionary keys as an array in Angular

Here is an example of an Angular dictionary: { ARRAY1: [{...}, {...}, {...}] ARRAY2: [{...}, {...}, {...}] ARRAY3: [{...}, {...}] ARRAY4: [{...}] } I want to show all the keys of arrays from this dictionary on an HTML page. I attempted to do ...

javascripthtmljsonangulartypescript

Achieving horizontal alignment for divs in CSS can be challenging

Struggling to align three circular divs on my webpage, here's the code: <div class="row"> <div class="large-9 push-2 columns"> <div class="green"></div> <a href="#">Donnez</a> </div> <div cl ...

htmlcsszurb-foundation

The correct method for including a CSS file in a Vue.js application

How can external CSS files be properly added in a Vue.js Application? I have come across multiple methods for adding CSS files in a Vue.js Application. One suggestion is to use the following code: <link rel="stylesheet" type="text/css" href="/static/b ...

javascriptcssvue.js

fa icons moving the elements aside

I'm attempting to design a navigation menu with tabs, but I'm facing an issue where the tabs containing "fa icons" are consuming too much space, causing other elements to be shifted to the right or below (if there were more lines). How can I pre ...

javascripthtmlcssfont-awesomebootstrap-4

What are some strategies for dividing a webpage evenly between an image and a text-containing div?

I am currently working on emulating a layout that I came across on another website ( if you scroll down past the video and profiles). The layout involves splitting the page 50/50 with a picture that is responsive and maintains its size when the page is res ...

htmlcssreactjsmaterial-ui

Troubleshooting issues when utilizing flexbox in Firefox and Chrome version 48

Chrome 47 Behavior: The .scroll div scrolls correctly in Chrome 47, taking up 100% height using flex. Firefox Behavior: In Firefox, the .scroll div does not scroll properly and instead uses the content height. What is the solution that works across diffe ...

htmlcssscrollflexbox

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

csstwitter-bootstrap

MANDATORY activation of CONFIRMATION

Hello everyone, I'm seeking assistance with my code. Below is the form code I need help with: <form action="input.php" method="POST"> <input type="text" class="input" name="firstname" placeholder="First Name" required> <input t ...

javascripthtmlcssformsvalidation

Can the browser doc mode be switched frequently?

My web application is built using AngularJS, but we also have a legacy web app that functions only in quirks mode and is included via an iframe on one of our pages. The challenge is to make this legacy app work within our main browser-based application, wh ...

javascripthtmlangularjsinternet-explorerinternet-explorer-8

Select the radio button by hovering the mouse over it

Is there a way to check my radio buttons when hovering over them without having to click? I want to display photos based on the selected radio button. I attempted this using JQuery, but I am still learning and consider myself a beginner. ...

jqueryhtmlcss

What is the best way to add a color swatch image using Javascript?

I'm facing a challenge in Shopify where I need to assign corresponding background images to color swatches. Currently, my icons are set up with the correct links for each color, but they are missing their respective images, similar to this example. I ...

javascripthtmlcssshopify

The Facebook like button disappears after being used just once

I've encountered an odd issue that hopefully someone can help me understand. WEBSITE: ISSUE: Initially, the like button functions properly. However, upon refreshing the page or navigating away and returning to the homepage, the like button mysterio ...

htmlcachingfacebook-like

"Implementing a full page refresh when interacting with a map using

Here is an example of how I display a map on the entire page: <div id="map_canvas"> </div> UPDATE 2: I have successfully displayed a menu on the map, but there is a problem. When I click on the button, the menu appears briefly and then disapp ...

javascriptjquerycsslinq