How do I fill a column vertically. I currently have this app.
I want to spand the vertical items vertically to take the rest of the page. I have tried for hours reading the documents and checking other posts but I just don't knows what is wrong. I'm just started using angular material and I'm new to the concept of flex box.
this is my code.
<body ng-cloak layout="column" ng-app="app">
<div layout="row" flex>
<md-sidenav layout="column" md-component-id="left" class="md-whiteframe-1dp" md-is-locked-open="true">
<md-list>
<md-list-item>
<md-button ng-click="">
<md-icon md-font-set="material-icons">face</md-icon>
Alex
</md-button>
</md-list-item>
<md-list-item>
<md-button ng-click="">
<md-icon md-font-set="material-icons">face</md-icon>
Tara
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<md-content flex id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi at consequuntur doloremque
dolores
dolorum eaque, exercitationem expedita facere fugiat ipsam nemo possimus quod recusandae repellendus, saepe
sequi
vitae, voluptas!
</p>
</md-content>
</div>
Code Pen Example
I just notice that the parent div .app-wrapper causes the problem, but I want to keep it.
You're looking for viewport height. In your case, you could apply to md-sidenav via class:
.full-height{
height: 100vh;
}
Related
How do I make the image go under the text in the mobile? And for the text to go on the left side, instead of being more on the right - if this makes sense :)
CSS (Image): https://pastebin.com/pGBdbBhs
CSS (Content): https://pastebin.com/1SY2JXUa
HTML:
<div class="content">
<div class="left-200">
<div>
<h3>Lorem ipsum</h3>
<div class="padding-4"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
</div>
<div class="padding-10"></div>
<img src="./images/default-image.png" alt="Image" class="image"/>
</div>
</div>
Desktop:
Mobile:
Thank you!
To make a responsive design you can either go the bootstrap root or you can do the #media in the CSS. Take a look at this site which will point you in the right direction.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I solved it! Basically I wrapped it up in a div and set display:none; if the device was on mobile. And I did the same thing for desktop!
Your CSS and HTML looks a little random here and there. For example those padding divs. Also your .left-200 class has two display properties. I would recommend to clean it up and then add the paddings, margins etc.
You really only need display: flex and flex-wrap for this task and set the other values like width accordingly.
.content {
padding: 200px 50px;
display: flex;
flex-wrap: wrap;
}
#flex-text {
width: 400px;
}
<div class="content">
<div id="flex-text">
<h3>Lorem ipsum</h3>
p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <!--
-->Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
</div>
<div id="flex-image"> <img src="./images/default-image.png" alt="Image" class="image"/> </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 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
Note, I'm really not trying to create a 'code for me plz' topic, I actually tried to solve this myself but I'm unable to. I found similar topics but they didn't solve my specific issue.
So, I have the following website design in Illustrator:
I need to create a container-fluid, which needs to be 50% image, and 50% color. I tried so many different methods but just couldn't make it work, especially the responsiveness.
Is there anyone who can help me out solving this? Really curious how this is done within Bootstrap.
By the way, for load time efficiency, I'm working with Bootstrap.grid.css, I do not have full access to all Bootstrap classes.
Consider reading carefully Bootstrap's documentation for its Grid Layout
You can do what you need with simple row and columns; how responsive the content inside of those behaves depends on what you build
.img-bg {
background: url("https://via.placeholder.com/1600")
}
.color-bg {
background: green;
text-align: right;
}
.row>div {
height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-6 img-bg">
<span>This background is an image</span>
</div>
<div class="col-6 color-bg">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugiat architecto blanditiis eaque laborum, vel voluptatum voluptas asperiores odio quia error commodi ratione dolorem, cupiditate dolor eius nulla atque quidem?
</p>
</div>
</div>
</div>
I've got a very basic css question, but I'm not front-end so please forgive me...
I'm using vuetify, and v-flex to manage grid points. on medium size screens and above my card is taking 6 grids, on small size (means <960px) it's 12 grids.
<v-container>
<v-layout justify-center>
<v-flex sm12 md6>
<v-container>
<v-card hover class="mb-3">
<v-card-text>
<div class="viewport">
<div>
<p><b>We offer sth in this title:</b></p>
</div>
<div>
<ul>
<li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
<li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
<li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
<li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
</ul>
</div>
</div>
</v-card-text>
</v-card>
</v-container>
</v-flex>
</v-layout>
</v-container>
I'm adding basic css class to manage viewport of the div inside v-card
.viewport {
font-size: 1.5vw!important;
}
and it's seems working until I'm not resizing screen <960 px. Them viewport seems to base on screen width, not the div width.
Can anyone tell me what I'm doing wrong. It seemed to be easy to set up...
example in codepen:
https://codepen.io/anon/pen/oEOqLb