I am working on a nuxt project with vuetify. There is one main header for the entire app already.
<v-app-bar app fixed> Main Header </v-app-bar>
I need to show another fixed header below the main header for a custom component. The problem is it is either overlapping or getting scrolled away. I tried https://codesandbox.io/s/nuxt-vuetify-forked-zgk86y?file=/pages/index.vue, but I am not exactly sure how to achieve this.
I think your codesanbox vuetify setting has some problems. But anyways, this is how it can be done (There are several ways and this is the simple one):
<v-app>
<v-main>
<v-app-bar color="warning" dark app fixed> Main Header </v-app-bar>
<v-app-bar color="primary" dark fixed class="mt-14"> component header </v-app-bar>
<v-card class="mt-12">
<v-card-text>
<div v-for="n in 5" :key="n">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo
inventore consequatur, explicabo pariatur aspernatur deserunt beatae
perferendis culpa deleniti necessitatibus amet odio sed, ea sint in!
</div>
</v-card-text>
</v-card>
</v-main>
</v-app>
You can check the whole code in codepen.
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>
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
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;
}