How do you change the color of a card border using Daisy UI?
I can see that bordered adds a black border around my cards. But when I try various tailwind css classes, such as border-white the border does not change.
In the docs, you can see the example using card-bordered. You can add border-white to that.
<div class="card card-bordered border-white">
<figure>
<img src="https://picsum.photos/id/1005/400/250">
</figure>
<div class="card-body">
<h2 class="card-title">Top image
<div class="badge mx-2 badge-secondary">NEW</div>
</h2>
<p>Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.</p>
<div class="justify-end card-actions">
<button class="btn btn-secondary">More info</button>
</div>
</div>
</div>
Related
I want to have multiple of this Tailwind card component that I found. I'm trying to get ride of the weird gap between the two cards, I'm not sure whats causing it. I added the gap-0 to the parent div so I don't understand why it's still there. I'm also having trouble understanding why the content is not in the middle of page and starting at the top left.
Here is the Tailwind playground link: https://play.tailwindcss.com/wPqTqYp1jr
The m-4 in each component is causing margin between the two cards. You can remove the gap by adding mr-0 in the first and ml-0 in the second card.
Below is the code
<div class="grid grid-cols-2 gap-0">
<!-- component -->
<div class="m-4 mr-0 my-20 max-w-md rounded-lg bg-pink-100 py-4 px-8 shadow-lg">
<div class="-mt-16 flex justify-center md:justify-end">
<img class="h-14 w-14 rounded-full border-2 border-indigo-500 object-cover" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" />
</div>
<div>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
</div>
<div class="mt-4 flex justify-end">
Bob Smith
</div>
</div>
<!-- component -->
<div class="ml-0 my-20 max-w-md rounded-lg bg-blue-100 py-4 px-8 shadow-lg">
<div class="-mt-16 flex justify-center md:justify-end ">
<img class="h-14 w-14 rounded-full border-2 border-indigo-500 object-cover" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" />
</div>
<div>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
</div>
<div class="mt-4 flex justify-end">
Virginia Lucas
</div>
</div>
</div>
Use tailwind play and check the above code there . Also added bg-color to differentiate between the two cards.
EDIT -1
Just remove the grid grid-cols-2 gap-0 from the main div and add flex flex-row to that div. Then you will not see any gap even in fullscreen also.
Please preview here
This is my proposition:
Instead of grid i suggest using flexbox. I used additional properties to center the cards items-center justify-center h-screen
Remove all margin and padding from the first divs of the card: m-4 my-20 & py-4 px-8. Later, You can adjust it as desired.
You can now use gap property as much as You want ;-) In parent div.
Good Luck and Best regards !
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen gap-0">
<!-- component -->
<div class="max-w-md rounded-lg bg-white shadow-lg">
<div class="-mt-16 flex justify-center">
<img
class="h-14 w-14 rounded-full border-2 border-indigo-500 object-cover"
src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"
/>
</div>
<div>
<p class="mt-2 text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae
dolores deserunt ea doloremque natus error, rerum quas odio quaerat
nam ex commodi hic, suscipit in a veritatis pariatur minus
consequuntur!
</p>
</div>
<div class="mt-4 flex justify-end">
Bob Smith
</div>
</div>
<!-- component -->
<div class="max-w-md rounded-lg bg-white shadow-lg">
<div class="-mt-16 flex justify-center">
<img
class="h-14 w-14 rounded-full border-2 border-indigo-500 object-cover"
src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"
/>
</div>
<div>
<p class="mt-2 text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae
dolores deserunt ea doloremque natus error, rerum quas odio quaerat
nam ex commodi hic, suscipit in a veritatis pariatur minus
consequuntur!
</p>
</div>
<div class="mt-4 flex justify-end">
<a href="#" class="text-sm font-medium text-indigo-500"
>Virginia Lucas</a
>
</div>
</div>
</div>
</body>
</html>
In my Angular 8 app I have a PrimeNG DataView element. In this element, simple I would add a row with the name of the fields at the bottom of the header.
So, I tried to add a <div> tag in every possible position of the html code of this component to understand how to do and: or this tag was too hight (it was visible, but not at the bottom of the header, but i.e. between search row and paginator row), or it was hidden. It was impossible to me, add a div tag in correct position, making this div visible.
I attach an image (please, consider the only point 1) and the code.
<p-header>
<div class="ui-helper-clearfix">
<div class="ui-g">
<div class="ui-g-12 ui-md-4">
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By" (onChange)="onSortChange($event)" [style]="{'min-width':'140px'}"></p-dropdown>
</div>
<div class="ui-g-6 ui-md-4 filter-container">
<div style="position:relative">
<input type="search" pInputText placeholder="Search by brand" (input)="dv.filter($event.target.value)">
</div>
</div>
<div class="ui-g-6 ui-md-4" style="text-align:right">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div>
</div>
<!-- A div at this exact position is visibile but is not at the bottom of header -->
</div>
<!-- A div at this exact position, maybe the better and more logic one, is unvisible -->
</p-header>
<!-- End of the header, start of data row; a div at this exact position is unvisible -->
<ng-template let-person pTemplate="listItem">
<div class="ui-g-12">
<div class="car-details">
<div>
<div class="ui-g">
<div class="ui-g-12">Vin: <b>{{person.id}}</b></div>
<div class="ui-g-12">Year: <b>{{person.name}}</b></div>
<div class="ui-g-12">Brand: <b>{{person.surname}}</b></div>
<div class="ui-g-12">Color: <b>{{person.officeNumber}}</b></div>
</div>
</div>
<button pButton type="button" icon="pi pi-search" (click)="selectPerson($event, person)"></button>
</div>
</div>
</ng-template>
As per my understanding from your question, I have added a row for you. Please see the screenshot for reference. For your convenience I have highlighted in lightblue background color.
To Achieve this: In your component.html Please see the lorem block
<p-dataView
#dv
[value]="cars"
[paginator]="true"
[rows]="20"
paginatorPosition="both"
filterBy="brand"
[sortField]="sortField"
[sortOrder]="sortOrder"
>
<p-header>
<div class="ui-helper-clearfix">
<div class="ui-g">
<div class="ui-g-12 ui-md-4">
<p-dropdown
[options]="sortOptions"
[(ngModel)]="sortKey"
placeholder="Sort By"
(onChange)="onSortChange($event)"
[style]="{ 'min-width': '140px' }"
></p-dropdown>
</div>
<div class="ui-g-6 ui-md-4 filter-container">
<div style="position:relative">
<input
type="search"
pInputText
placeholder="Search by brand"
(input)="dv.filter($event.target.value)"
/>
</div>
</div>
<div class="ui-g-6 ui-md-4" style="text-align:right">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div>
<div class="ui-g white-bg">
<div class="ui-g-6 ui-md-4">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Accusamus cupiditate dolores esse id ipsam omnis
reiciendis repellat, temporibus voluptas? Consequuntur
dolor inventore natus, porro quis tempore veniam.
Consectetur consequatur deleniti esse ex molestiae rem
sed temporibus voluptates! Ad aliquam, aspernatur cum
cumque fugiat harum ipsa, ipsam laudantium modi nemo
perferendis perspiciatis quis, quos rerum veritatis?
</div>
</div>
</div>
</div>
</p-header>
Step 2: In your component.css:
:host ::ng-deep {
.white-bg {
background-color: lightskyblue;
}
}
You can follow the same approach if you want to display the row below the pagination.
I am building a card with Tailwind CSS and Vue.js. I want to fill a space on my card with text and truncate any remaining text that doesn't fit with an ellipsis.
I have applied Tailwinds .truncate class however it only allows me to have 1 line of text before the ellipsis. I have also looked into the line-clamp property but I was hoping there would be a nicer way to do this with Tailwind.
<template>
<div class="p-6 w-full bg-white rounded-lg overflow-hidden shadow-lg border">
<div class="flex flex-col sm:flex-row">
<img src="img/card-default.jpg" class="mx-auto" alt="Card">
<div class="mt-4 overflow-hidden sm:ml-4 flex flex-col justify-between">
<div>
<h2 class="text-gray-900 font-semibold text-lg">Title</h2>
<p class="truncate mt-2 text-gray-700 max-h-full">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Tempore repellat labore distinctio maxime, debitis autem perferendis dolore,
deleniti doloribus quia vel! Amet nisi, a vel modi officiis sapiente fugiat,
illum delectus, incidunt repellendus suscipit. Delectus iusto eligendi, doloribus amet et fugiat,
atque perspiciatis eveniet, ipsum inventore sed placeat sapiente maiores.
</p>
</div>
<div class="flex justify-around mt-4 mx-2 sm:mx-0">
<button class="mx-2 bg-indigo-600 p-2 rounded-lg text-white hover:bg-indigo-500 sm:mx-0">Button 1</button>
<button class="mx-2 bg-indigo-600 p-2 rounded-lg text-white hover:bg-indigo-500 sm:mx-0">Button 2</button>
</div>
</div>
</div>
</div>
</template>
Short answer: Nope their isn’t a nicer solution for this.
tailwind is meant to be cover the ‘basics’ like padding, margin, grid etc for developers/designers so they can create easily and fast pages/components.
What you are using/asking is totally custom for your situation only.
Possible solution for your problem:
Write a tailwind plug-in that extends the default tailwind css
Extend tailwind.scss with your custom css
Or just css (in-line or just your custom css file)
Use the #tailwind/line-clamp plugin
<p className="line-clamp-n"> where n stands for the number of lines you want before truncating
A solution that worked for me was to put a max-height on the <p> tag
I need to place an image outside the container, so that the right margin stays the default container (responsive), and the image always stays together with a button.
Follow the image below to exemplify:
I tried to use container-fluid (Example 2 - using container-fluid in html), but I can't use the same margin as the container on the right side. I can change by css, but would have to change for all breakpoints, has another way?
I tried to use the container itself (Example 3 - using container and margin-left: 0px in html) and remove the margin-left without success.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Examples</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<h2>Example 1</h2>
<div class="">
<div class="container">
<div class="row">
<div class="col-6 row">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="ex1 mt-5">
<h3>Example 2 - using container-fluid</h3>
<div class="container-fluid">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="mt-5">
<h3>Example 3 - using container and margin-left: 0px</h3>
<div class="container" style="margin-left: 0px">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
</body>
</html>
Would anyone know any way to do it without me having to change this margin-right on all breakpoints?
I don't think you can do this in bootstrap.
If you give your button position:relative then it will no longer flow with the rest of the grid and can always be to the right of the image/text
https://www.w3schools.com/css/css_positioning.asp
is a good tutorial on different position options
Well you can always make use of
display: flex;
which would allow do what you have above easily.
Checkout how to use flex
When I add padding around an image at the top of a card when in dev tools mobile view, the image doesn't keep aspect ratio. When I go back to full size view the aspect ratio is fine.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>
My code
Image of how it looks in dev tool mobile
The thing is if I go to my code pen in dev tools mobile view it seems to be working as it should, but from my file it isn't. This is the reason I'm so confused about it.
You wanted to maintain aspect ratios, does this work for you ?
.card { display:block !important; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>