I am using the daisy UI with astro static site generator for creating a blog, the card component of daisy UI is used and the problem is cards adjacent to each other get different size based on the content length in each card, is there a way I can stretch adjacent card with lesser content grow to the height of the largest content card in the same row so that the UI looks consistent and of same size.
Below is the card component code I am using.
<article class="m-2">
<div class="card card-bordered w-96 bg-base-100 border-yellow-600">
<figure><img src="https://placeimg.com/400/225/arch" alt={post.frontmatter.title.split(" ").splice(0,4).join(" ")}/></figure>
<div class="card-body">
<h1 class="card-title">{post.frontmatter.title}</h1>
<p>{post.frontmatter.description.split(" ").splice(0,4).join(" ")}</p>
<div class="card-actions justify-end">
Read More....</button>
</div>
</div>
</div>
</article>
I would expect that the height of the adjacent card is same and the maximum height is decided by the largest content card in the row.
Related
I have a fixed aspect ratio area in my layout using Tailwind 3. It is defined like so...
<div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-1">
<div class="text-xl text-gray-700 lg:text-lg [&>p]:py-5 [&>p]:pl-5">
<p>Lorem ipsum</p>
</div>
<div class="grid place-items-center">
<div class="aspect-9/16 w-full bg-blue-300 lg:min-h-full lg:w-auto">
<div>
wevs
wevs
wevs
</div>
</div>
</div>
</div>
It looks like this, which is what I want, the bottom parallel with however long the text on the left happens to be. If I add more text on the left the fixed aspect area on the right scales to the height of the content on the left.
So I want that fixed aspect ratio area to contain its contents without changing size but when I put some extra content into it the whole container grows. Admittedly it grows in the fixed aspect ratio I have set so that is nice, but I'd rather it didn't grow at all!
Here is a link to a full example on Tailwind Play: https://play.tailwindcss.com/oNjWgFb2AW
With a wide screen (1440px) if you keep adding "wevs" you will see the effect.
I've tried a bunch of way to fix the width and also tried playing with limiting the height fidgeting with the grid values but I'm not having any luck. Everything I've tried seem to either break the aspect ratio part, or the container still scales up with the content. 🙏
I added max-h-0 and it works
...
<div class="max-h-0 aspect-9/16 w-full bg-blue-300 lg:min-h-full lg:w-auto">
...
here is with the example of your playcode https://play.tailwindcss.com/32quTcDj51?size=1440x803
I'm using this carousel:
https://mdbootstrap.com/snippets/jquery/ascensus/135508#html-tab-view
If you resize the window to phone size, you see there is only ONE card displaying.
Now when you look at the next it's not actually the next card but the next first card from the second slide.
This is because all but the first card in a slide have
<div class="col-md-4 clearfix d-none d-md-block">
instead of
<div class="col-md-4">
the clearfix d-none d-md-block will hide the element for all screen sizes except on medium. When I don't use it, it shows all 3 even on small screens.
Is there any way to show every card after another and not just the first from each slide?
I'm attempting to have two equal-width columns stack between computer and tablet sizes. I'm doing this in semantic-ui-react, but here's what I have so far in rendered HTML:
<div class="ui stackable two column grid">
<div class="row">
<div class="eight wide computer sixteen wide mobile sixteen wide tablet column">
<div class="ui segment">
<img src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" class="ui image" />
</div>
</div>
<div class="eight wide computer sixteen wide mobile sixteen wide tablet column">
<div class="ui segment">
<img src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" class="ui image" />
</div>
</div>
</div>
</div>
(jsfiddle)
The issue I've run up against is that there is no vertical gutter at tablet size, but there is one at mobile size.
I assume I should not be using the stackable property since it is hard-coded to impact mobile size only. What should I do in its place?
You are mixing your column size definitions. So the first thing is I would remove the size definition on your Grid component.
You are correct that stackable specifically targets mobile, so if you want different behavior, you should remove that from your Grid component too.
Because of what you are trying to do, it probably makes more sense to move the sizing definitions down to your Grid.Column components exclusively. You can technically achieve the same "stackable" behavior by just defining the mobile column width to sixteen. Defining your sizing at the Grid.Column level gives you the most control.
Basically, if what you have defined on your Grid.Column components right now is explicitly defining what you want, removing "stackable" and "columns" props from your Grid component should give you what you want since you are controlling widths at the more precise Grid.Column level.
I have two main columns in a bootstrap website. The first is the sidebar column and the second is the main content column. In Desktop they appear fine but in Mobile the sidebar doesn't go under the main-content area.
You could see a live example for this in one of the regular nodes of my site, just view the site in mobile mode, browse downwards a bit, and you will see this.
Please help,
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
http://getbootstrap.com/examples/grid/
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
http://getbootstrap.com/css/
To address your issue
In Desktop they appear fine but in Mobile the sidebar doesn't go under the main-content area.
You should not modify the bootstrap grid, but you can use the existing bootstrap grid to achieve what you want.
For example
Remove any CSS which modifies the grid and change this...
<div id="primary" class="content-area col-sm-8">
...
</div>
...
<aside id="sidebar" class="col-sm-4" role="complementary">
...
</aside>
To...
<div id="primary" class="content-area col-xs-12 col-sm-8">
...
</div>
...
<aside id="sidebar" class="col-xs-12 col-sm-4" role="complementary">
...
</aside>
This tells the browser
If the viewport is less than 750px wide, the columns should take the entire width, else they should be displayed side by side
Changing column widths
Grid system
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
When you have define the columns using the prefixes, col-xs- col-sm- col-md- and col-lg-, the numbers following the prefix must add up to 12 for each row.
Four examples
If you would like two columns of the same width you would use
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
6 + 6 = 12
If you would like three columns of the same width you would use
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
4 + 4 + 4 = 12
If you would like two columns where one column is twice the size of the first you would use
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
4 + 8 = 12
If you would like two columns where one column is three times the size of the other you would use
<div class="col-sm-3"></div>
<div class="col-sm-9"></div>
3 + 9 = 12
And so on and so forth
Remove you CSS changes and Use col-lg-9 on primary and col-lg-3 on sidebar instead of current code.
Primary
<div id="primary" class="content-area col-lg-9">
Sidebar
<aside id="sidebar" class="col-lg-3" role="complementary">
I just started to use angular ui-layout to allow splitting panes in a UI.
I'm trying to create a sidebar that has this blue element on the bottom
Is there a way to trick the ui-layout directive to achieve this? I tried doing size, but that just does absolute sizing, I want the bluebox just take up some space (showing 100% of its content) and the element above it needs to scroll and take up the rest of the vertical space.
EDIT: added the HTML
<ui-layout options="{ flow: 'row' }">
<div ui-layout-container> top part </div>
<div ui-layout-container> blue box</div>
</ui-layout>
I don't know why you want to use ui.layout, but I would not recommend to use it to achieve what you want.
ui.layout uses flex box model and you can use it by yourself without using another invasive javascript layout. You can fully achieve what you want using css only.
This is what I did to achieve what you want only using CSS. http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview.
<div class="container flex flex-column">
<div class="top flex flex-row flex-auto flex-stretch">
<div class="flex-auto">Top</div>
<div class="sidebar">sidebar</div>
</div>
<div style="background:blue">Bottom</div>
</div>
If you are very interested in using Flex layout, I would recommend to use Angular Material Design, and it is advanced and makes more sense than ui.layout.
To know more about flex box, you can see this example.
http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview.