fbpx
Welcome, Guest
Username: Password: Remember me

TOPIC: Same height columns in inner-row element

Same height columns in inner-row element 3 weeks 6 days ago #30874

  • iorbita
  • iorbita's Avatar
  • Offline
  • Premium Member
  • Posts: 96
  • Thank you received: 1
  • Karma: 0
Hi,
honestly with JDBuilder I thought speed up my development with flex rules, but I realize that it slows me down… :huh:

Could you tell me how to keep the same height for columns having different content?
In JDBuilder it's like this:



Usually in my code if I want to get the same height for three columns side by side here are the rules I assign:
  • assign display:flex; to the row.
  • assign display:flex; and flex-direction: column; to the columns.
  • … and finally assign flex-grow: 1; to element wrapping other elements

Check my code here please:
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<title>Same height</title>
	
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
	
	<link rel="stylesheet" href="style.css">
	<style>
		body {
		background-color: rgb(228, 225, 221);
		}
		
		.my-column {
		flex-grow: 1;
		}
	</style>  
</head>
<body>
	<div class="container mt-5">
		<div class="row pt-5">
			<div class="col-md-4 d-flex flex-column">
				<div class="bg-info my-column p-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ducimus assumenda laboriosam quos iste voluptatem, iure dignissimos dolores minima adipisci consequuntur molestiae dolore distinctio laborum vel suscipit similique quasi est necessitatibus debitis illo. Dolor, fugit saepe vero ullam officiis est debitis magni, pariatur facilis velit sint, recusandae eligendi officia iste distinctio reiciendis possimus. Eligendi harum magni omnis atque doloribus consectetur nostrum tempora? Atque voluptatum non natus perferendis repellat sapiente numquam deserunt quisquam quidem hic! Ipsam aspernatur molestiae praesentium quaerat accusantium suscipit dolorem dicta, rem hic obcaecati deserunt doloribus veniam perspiciatis vitae minus libero rerum autem ducimus incidunt soluta, dolores delectus!</div>
				
				<button class="btn btn-primary mt-3">Click me!</button>
			</div>
			
			<div class="col-md-4 d-flex flex-column">
				<div class="bg-info my-column p-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. In, minima?</div>
				
				<button class="btn btn-primary mt-3">Click me!</button>
			</div>
			
			<div class="col-md-4 d-flex flex-column">
				<div class="bg-info my-column p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima pariatur dolore animi quia optio necessitatibus nisi nobis error officiis impedit nostrum aperiam itaque beatae, libero nesciunt perspiciatis numquam fuga dolores.</div>
				
				<button class="btn btn-primary mt-3">Click me!</button>
			</div>
		</div><!-- /row -->
	</div><!-- /container -->
</body>
</html>



Could you please explain me how to proceed with inner-row element in JDBuilder?

Many thanks,
Lorenzo
Last Edit: 3 weeks 5 days ago by iorbita.
The administrator has disabled public write access.

Same height columns in inner-row element 3 weeks 1 day ago #30930

  • iorbita
  • iorbita's Avatar
  • Offline
  • Premium Member
  • Posts: 96
  • Thank you received: 1
  • Karma: 0
Hi, I expected an answer on this issue :dry: how is it possible that in JD Builder flex display is not supported correctly?
The administrator has disabled public write access.

Same height columns in inner-row element 2 weeks 5 days ago #30949

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 759
  • Thank you received: 101
  • Karma: 27

File Attachment:

File Name: same-heigh...umns.zip
File Size:2 KB

Hello,

Sorry for late reply.
H have attached a json file here for you, import it in JD builder & check the inner row spacing and custom css of inner row.
you will know how i did it.

Thanks,
Lalit
Thank You,
If you like our support and products, tweet us at JoomDev and let the world know about it.
The administrator has disabled public write access.

Same height columns in inner-row element 2 weeks 5 days ago #30950

  • iorbita
  • iorbita's Avatar
  • Offline
  • Premium Member
  • Posts: 96
  • Thank you received: 1
  • Karma: 0
Hi and thanks for your reply,
... how to import a json file into JDBuilder? Do you have any documentation on this?
The administrator has disabled public write access.

Same height columns in inner-row element 2 weeks 5 days ago #30951

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 759
  • Thank you received: 101
  • Karma: 27
How to import a json file into JDBuilder

See here: docs.joomdev.com/article/export-import-a-page/

Thanks,
Lalit
Thank You,
If you like our support and products, tweet us at JoomDev and let the world know about it.
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.602 seconds
Cron Job Starts