I'm working on a project in Bootstrap 3 and I'm having a little problem with the text in extra small view. The text is basically flowing out of its container, but it's meant to stick and break accordingly. I've tried breaking the text with different CSS properties, such as word-wrap, word-break, text-wrap. None of these worked.
This is how it looks like:
This is how the code looks like:
<div class="comments-area row">
<div class="user-info col-lg-2 col-md-2 col-sm-2 right">
<img src="{{ S_AVATAR_PATH }}" height="75px" alt="Avatar" class="comment-avatar valign-top img-circle cream-thick-border" />
</div>
<div class="col-lg-1 col-md-1 col-sm-1" style="width: 2%;"></div>
<div class="comment-rag col-lg-9 col-md-9 col-sm-9 left" style="padding: 0;">
<div class="comment-content">
<span class="small">
Posted by <strong>Username</strong>
<span class="grey">
/ 30 likes
• 30 dislikes
/ 30 days ago
</span>
</span>
<span class="pipe-hide"> | </span>
<span class="comment-options">
<span class="comment-option glyphicon glyphicon-thumbs-up"></span>
<span class="comment-option glyphicon glyphicon-thumbs-down"></span>
<span class="comment-option glyphicon glyphicon-minus-sign"></span>
</span>
<br />
<span class="break">Lorem ipsum dolor sit amet, fastidii dissentiunt et pro, pri eu rebum omnes nusquam, has et iudico facilis forensibus. In wisi facete deterruisset has. Eirmod option officiis vis ad, mea no dicta ornatus scriptorem, vim te primis option. Stet invenire vis te. Per at omnis commodo, quot debet recteque duo id. Ius aeterno ponderum platonem an. Reque deleniti ei cum. Ut probo liberavisse pri, graeci saperecommodo, quot debet recteque duo id. Ius aeterno ponderum platonem an. Reque deleniti ei cum.</span>
</div>
</div>
</div>
And this is the little .break class:
.break {
word-wrap: break-word !important;
word-break: break-all !important;
text-wrap: suppress !important;
}
Why isn't Bootstrap taking care of breaking my text correctly? What's wrong?
What is the CSS of the comment-content?
When I try it with a fix-width of the comment-content class, everything work great.
Here is an example.
Related
I am working on a table using Tailwind CSS, I have a long string, which I would like to truncate, but when I apply truncate the layout breaks
<div>
<!-- START TABLE ROW -->
<div
id="tableRow"
class="grid grid-cols-5 gap-4 border-2 border-transparent hover:border-2 hover:border-me-green hover:rounded-lg"
>
<!-- 1. Table column -->
<div class="px-6 py-4">
<div class="flex items-center space-x-3">
<div>
<p class="font-bold text-black my-2">ProtoPrograma</p>
<p class="text-gray-400 text-sm font-roboto truncate w-[950px]">
[Normal text] Suspendisse nec libero id ligula mollis
ullamcorper quis vitae dui. Mauris vel. Neque porro quisquam est
qui dolorem ipsum quia dolor sit...123, blah, blah, blah, blah, blah
</p>
</div>
</div>
</div>
<!-- 2. Table column -->
<div class="px-6 py-4">
<div>
<p class="text-xl font-roboto font-medium text-black">
1.3.2019 - v6
</p>
<p class="text-me-gray text-sm font-roboto"></p>
</div>
</div>
<!-- Draw line -->
<div class="w-full border-t border-me-gray-2"></div>
<!-- Draw line -->
<!-- END TABLE ROW -->
</div>
Here is an example: https://play.tailwindcss.com/pEpWLfzCvl
The layout (when text is truncated) should look like
this
but as soon as I apply truncate property, and assign insame width (there is probably a better way, then asigning large widths, maybe number of words or something,which I don't know)
the table layout gets completly broken
How can apply truncate so it will truncate text and not break the layout along the way?
Thanks for Anwsering and Best Regards
Adding w-full on the parent div and delete the fixed width 950px fix the problem.
If you need to truncate with multiple line you can npm install #tailwindcss/line-clamp and adding line-clamp class.
If you do not want to install extra package, you can just add -webkit-line-clamp property into css stylesheet.
Example:
<div class="w-full">
<p class="my-2 font-bold text-black">ProtoPrograma</p>
<p class="font-roboto text-sm text-gray-400 line-clamp-6">[Normal text] Suspendisse nec libero id ligula mollis ullamcorper quis vitae dui. Mauris vel. Neque porro quisquam est qui dolorem ipsum quia dolor sit...123, blah, blah, blah, blah, blah</p>
</div>
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>
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've been searching for an answer all day and have not quite found one.
Using Bootstrap 4, how does one wrap text around an image using d-flex or flex-wrap in with the grid layout with columns and rows. I have provided my code and two image examples. I hope this is possible.
I have viewed this example - https://www.codeply.com/api/run but it's quite different whereas the image is fixed sizing but we need the image to be responsive.
Cheers and thanks in advance.
Example image here with photo
Example diagram here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container" style="margin-top: 30px;">
<div class="row" style="border: 1px solid #ddd;">
<div class="col-sm-6 col-lg-6 col-xl-5">
<div class="imagebox">
<figure>
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-6 col-xl-7">
<div class="row">
<div class="col-12"><small>BPP Rating - 88%</small></div>
<!-- this below line will wrap on all screens -->
<div class="col-6"><small>Online Rating - 88% </small></div>
<div class="col-6 text-right"><small>Total Beds - 50</small></div>
</div>
<hr style="margin: 0.5rem 0;">
<div class="row">
<div class="col-sm-6 col-6"><small>Share Rooms from NZD $30</small></div>
<div class="col-sm-6 col-6 text-right"><small>Private Rooms from NZD $60</small></div>
</div>
<div class="row">
<div class="col-12 d-none d-lg-block d-xl-block">Lorem ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vel postea scripta alienum, eam te enim feugiat ornatus. Exerci quidam melius has ad. Mel ut ludus choro
instructior. Erat dictas antiopam quo ea, pri at audiam offendit.Cetero albucius pri ne, erant nobis aliquip cu sit, eam dolore.</div>
</div>
</div>
</div>
you can try like this, by giving background-image on the row and its property to set it one center of the div
here is an example - https://jsfiddle.net/erymag7b/27/
you can use float:left in .imagebox to wrap text around an image and use clean:both in P tag to let text under an image
https://codepen.io/lichunbin814/pen/yqEOKm?editors=1100
tip : Avoid Inline Styles for CSS Design
.imagebox {
float: left;
margin-right: 1em;
}
div.container {
max-width: 100%;
}
figcaption.imagebox-desc {
top: 0;
position: absolute;
left: 0;
color: white;
background: rgba(4, 4, 4, 0.8);
width: 100%;
padding: 0.7rem 0 0.5rem 1.2rem;
font-size: 1.2rem;
}
.imagebox-inner {
position: relative;
display: inline-block;
}
.img {
width: 100%;
}
#media (max-width: 768px) {
.text {
clear: both;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12">
<div class="imagebox">
<figure class="imagebox-inner">
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
<div><small>BPP Rating - 88%</small></div>
<div class="d-flex justify-content-between"> <small>Online Rating - 88% </small> <small>Total Beds - 50</small></div>
<hr class="m3">
<div class="d-flex justify-content-between"><small>Share Rooms from NZD</small><small>Private Rooms from NZD</small></div>
<div class="d-flex justify-content-between"><small>$30</small><small>$60</small></div>
<p class="mt-2 text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,Lorem
ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet
sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No v molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
</div>
</div>
</div>
I would try to make the image align with the border line. But I cannot figure out. (As the image below) And I am not sure why the well is not covering my content. Not sure what is the problem. Hope you can help.
Any help will be appreciated!
.img-responsive {
left: 15px;
z-index: 14;
position: absolute;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container">
<div class="row">
<div class="well">
<div class="col-md-6">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
I think this little correction does the work
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
and why are you using this css ?
.img-responsive {
left: 15px;
z-index: 14;
position: absolute;
}
I added some little changes as per your comment
add this to your css
<style>
.div-img-padLftZero{
padding-left:0px;
}
</style>
then make your code like this
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-6 div-img-padLftZero">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
Now it is left aligned as you desired