I’m having this issue, I searched in the forum but didn’t find anything related.
I am trying to use justify-center for small screens and justify-end for large screens. Reading the docs I found this:
So I tried to use it as justify-sm-center and justify-lg-end but haven’t been able to make it work. I made this fiddle to demonstrate it:
https://jsfiddle.net/leoprada/3b40vn6g/
<div class="row">
<p>Class: justify-center applied when BP lg (justify-lg-center) and justify-end on BP sm (justify-sm-end) </p>
<div class="row col-12 justify-sm-end justify-end-sm justify-lg-center bg-black">
<div class="col-sm-4 col-lg-6 bg-blue q-py-md text-center">
col-4
</div>
<div class="col-4 bg-green q-py-md text-center">
Col-4
</div>
</div>
</div>
I don’t really know if I am doing something wrong.
(I know how to make it work by my own using CSS but I’d rather use the predefined quasar class, of course)
You need to enable the cssAddon / flex-addon. If you didn't install quasar via its native CLI and thus don't have a quasar.conf, you need to import the flex-addon.sass file.
main.js/ts
import ...
// Import Quasar css
import "quasar/src/css/index.sass"
import "quasar/src/css/flex-addon.sass" // <--- NEW
createApp...
I don’t think the breakpoints work on rows (only items within rows), so I think to do what you want, you would have to use the Vue Class Bindings with breakpoints or platform detection. Something like:
<div class="row">
<div :class="$q.platform.is.mobile ? 'justify-end' : 'justify-center'" class="row col-12 bg-black">
<div class="col-sm-4 col-lg-6 bg-blue q-py-md text-center">
col-4
</div>
</div>
</div>
Related
I'm currently working on a marketing website for a client. Because SSR would be over-engineered and I'm curious about JAMStack, I decided to make a static website using Nuxt, because I'm already familiar with it.
So I managed to implement Tailwind, which works fine, also when the static site is generated and live on Github pages for example. Now I want to add a feature like a send e-mail form or a menu with a toggle icon.
The simplest solution I could think of for the menu would be a reactive variable and conditional rendering using tailwind. This works fine on localhost using npm run dev, but I can't figure out how to implement this on the generated static site.
I couldn't even manage to fire a click event to a defined method in the script tag.
That's how I would do the burger menu with nuxt SRR, how can I implement something like this in static generated nuxt?
<template>
<div>
<nav
class="flex p-5 items-center fixed w-full border-b-4 border-green bg-white z-50 duration-300 transform justify-between">
<div>
<div><img src="logo.png" class="max-h-6 md:max-h-10" /></div>
</div>
<div class="w-10 h-5 flex flex-col relative cursor-pointer" id="nav-menu" #click="menuOpen = !menuOpen">
<div class="w-full h-1 bg-green absolute duration-200 transform "
:class="[menuOpen ? 'rotate-45 translate-y-2' : 'burger-hover1']" id="menu-first"></div>
<div class="w-full h-1 bg-green absolute bottom-0 duration-200 transform "
:class="[menuOpen ? '-rotate-45 -translate-y-2' : 'burger-hover2']" id="menu-second"></div>
</div>
</nav>
<Transition>
<div v-if="menuOpen" class="fixed w-screen h-screen bg-white pt-20 z-30 space-y-10 text-xl text-center">
<div class="mt-20" #click="menuOpen = !menuOpen">
<nuxt-link to="/">Start</nuxt-link>
</div>
<div #click="menuOpen = !menuOpen">
<nuxt-link to="/partner">Partner</nuxt-link>
</div>
<div #click="menuOpen = !menuOpen">
<nuxt-link to="/kontakt">Kontakt</nuxt-link>
</div>
<div #click="menuOpen = !menuOpen">
<nuxt-link to="/impressum">Impressum</nuxt-link>
</div>
</div>
</Transition>
</div>
</template>
<script>
export default {
name: 'Navbar',
data() {
return {
menuOpen: false
}
}
}
</script>
That's how it looks on localhost. When the static site is hosted, it won't toggle the menu.
I've read a lot about bootstraps breakpoints and grid system now and perused many stackoverflow questions but remain bamboozled.
I have a simple bootstrap v3 container like this:
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5">
image
</div>
<div class="col-md-7 d-flex">
text
</div>
</div>
</div>
And in a web browser this renders beautifully, but on my phone the image and text continue to occupy one row with no break and the image is thus scaled tiny and ugly and I'd like Bootstrap to do what it does best, render that image at the full phone width and the next beneath it, that is, break these two columns.
A live sample is her, at present:
http://hobart.gamessociety.info/
and I would be most grateful if anyone with experience could lend some insight into why this doesn't render as I'd like on my phone.
As I understood bootstrap it's phone first, and md says apply the 5/7 split on medium and larger screens and on smaller ones do what it does sensibly, i.e. not scale that image to tiny proportions and show both columns side by side, but break between them and show one above the other.
The class "vertical-align" adds the css style "display:flex" if you remove that you will see the items behaving as you currently desire (I think). Use chrome and inspect to add/remove css styles.
You could just add col-xs-12 to each div class.
<div class="container">
<div class="row col-md vertical-align">
<div class="col-md-5 col-xs-12">
image
</div>
<div class="col-md-7 col-xs-12 d-flex">
text
</div>
</div>
</div>
Here is an alternative to your second question
create a css class
.myClass {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}
And add it to the inner divs
<div class="container">
<div class="row">
<div class="col-md-5 myClass">
image
</div>
<div class="col-md-7 myClass">
text
</div>
</div>
</div>
Found the answer here Twitter Bootstrap 3, vertically center content
I am using Materialize, and I need to align a button to the right side of the card in the card-action.
This is the code:
<div class="card-action">
This is a link
</div>
This is the result:
If I remove the class="right" then I get this result:
I want the result from the second image, except the button should be aligned to the right. Am I missing something about the materialize card-action? How should I get this behavior?
It should be right-align instead of right and you've to use it on card-action div. You can check about the alignment classes in Helper page of the documentation.
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
require little markup to use effectively.</p>
</div>
<div class="card-action right-align">
<a class="btn blue" href="#">Right</a>
</div>
</div>
</div>
</div>
You Just Need to Mention the Alignement in below way
<div class="card-action right-align">
YOUR CONTENT WILL ALIGHT TO RIGHT
</div>
Condider the following snippet:
<template v-if="tryIsMobile" >
<div class='device device-mobile-portrait' :class="deviceClass">
<div class="device-scroller-container">
<div class='device-scroller'>
<img id='tryit-img-mobile' :src="srcUrlMobile" v-on:load="onImgLoad" v-on:error="onImgError"/>
</div>
</div>
</div>
</template>
<template v-else>
<div class='device device-tablet-landscape' :class="deviceClass" >
<div class="device-scroller-container">
<div class='device-scroller'>
<img id='tryit-img-tablet' :src="srcUrlTablet" v-on:load="onImgLoad" v-on:error="onImgError"/>
</div>
</div>
</div>
</template>
This code conditionally renders one of the two images. Some user action results in the actual shown image to be toggled.
What I'm seeing is the following: When toggling from say, tryit-img-mobile to tryit-img-tablet, the image loaded as part of tryit-img-mobile will get displayed with different dimensions instantly. However, during the time the image loads it's new source :src="srcUrlTablet", the image with src :src="srcUrlMobile" still displays.
This is probably due to Vue using the same img-tag for both the templates. How can I prevent Vue from doing this, and instead use seperate img-tags?
In cases such as this, Vue uses a special key attribute that tells it not to reuse the same element. Give each element this attribute with a unique value, and Vue will no longer reuse the same element:
<div v-if="tryIsMobile"
class="device device-mobile-portrait"
:class="deviceClass"
key="mobile"
>
...
</div>
<div v-else
class="device device-tablet-landscape"
:class="deviceClass"
key="tablet"
>
...
</div>
I have been using owl carousel 1.3 on pages that generally have a wrapper container that sets the width to 1200px.
I started to build responsive sites and don't use a fixed width on any wrappers now, i am also using version 2 of Owl.
I am using the bootstrap grid layout and trying to make my owl carousel responsive. However i can't get this to work and it seems it only works if you set a width on a parent div.
For example if i have this:
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel">
<div><h2>Item 1</h2></div>
<div><h2>Item 2</h2></div>
<div><h2>Item 3</h2></div>
</div>
</div>
<div class="col-md-4">
<h2> Just a right hand panel</h2>
</div>
</div>
</div>
The owl slider will take up 100% of the screen width, it will ignore the col-md-8 width of 66% so i end up with a broken layout.
Is owl carousel truly responsive or do you have to fix a width to it for it to work?
I know this is old problem but i sloved it with wrapper and little jQ code.
Owl-carousel doesnt support bootstrap class "container-fuild", and when you use this class for owl, will crash width of your page so you need to set width of the wrapper.
Remember add resize event.
My HTML ( div with class owl-wrapper used in jQ ):
<section class="container-fluid">
<div class="owl-wrapper">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel owl-theme ">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</div>
</section>
jQuery file:
$(document).ready(function($){
var windowWidth = $( window ).width();
$('.owl-wrapper').css('width', windowWidth);
$('.owl-carousel').owlCarousel({
loop:true
});
});
Try putting min-width : 100% on the parent container.