Using Quasar Framework 0.15, I don't see any effect on using Flex related classes. A simple component:
<template>
<q-page class="flex">
<div class="row">
<div class="col-sm-6 justify-center">
<q-btn-group>
<q-btn label="1" />
<q-btn label="2" />
<q-btn label="3" />
</q-btn-group>
</div>
</div>
</q-page>
</template>
When I inspect the components, the div with class 'row', for example', don't has the full width as expected, no either any other Flex related classes like 'justify-start' or 'col-sm-6' seems to work.
My btn-group in this case is showing in top-left corner of the screen, as if no css was been aplied to it ('justify-center' should center it)
I'm running on web/material theme in a fresh install.
you can use simple q-page without any class it will take full width. you can also use the fixed center class for centering content.
<template>
<q-page>
<div class="row">
<div class="col-sm-6 fixed-center">
<q-btn-group>
<q-btn label="1" />
<q-btn label="2" />
<q-btn label="3" />
</q-btn-group>
</div>
</div>
</q-page>
</template>
Related
I have an AppLayout component which has:
A div with the h-full utility class, to make it take the full page height.
A Background component to make a background with blur. It has three main elements:
Navbar
Outlet, which dynamically changes height
Footer
import { Outlet } from 'react-router-dom';
import Background from '../components/Background';
import Footer from '../components/Footer';
import NewNavbar from '../components/NewNavbar';
export const AppLayout = () => (
<div className='h-full'>
<Background>
<div className='min-h-full backdrop-blur-2xl flex flex-col'>
<div>
<NewNavbar />
</div>
<div className='flex-auto'>
<Outlet />
</div>
<div className=''>
<Footer />
</div>
</div>
</Background>
</div>
);
As you see, I applied flex flex-col to my "wrapper" div and flex-auto to a div wrapping my Outlet component, but this is not working. When I use straight HTML and CSS, the footer is placed correctly at the bottom of the page, and it always works.
All was so simple.
export const AppLayout = () => (
<div className='h-full'>
<Background >
<div className='min-h-screen backdrop-blur-2xl flex flex-col'>
<div>
<NewNavbar />
</div>
<div className='flex-auto'>
<Outlet />
</div>
<div>
<Footer />
</div>
</div>
</Background>
</div>
);
Replace the min-h-full to min-h-screen
In a vuejs app, I have a component that is loaded while waiting for reply from the api.
It contains a simple blurred line (no props or events). I want to load that same component every half second additionnaly, i.e. it starts with one line, half a second later a second line, after another half second the third line and so on.
<TheLoadingLine />
TheLoadingLine contains:
<template>
<div class="flex flex-row justify-between md:mb-4 blur-sm ">
<div class="grow flex flex-col md:flex-row justify-between text-bleulfdm pl-6 pr-4 p-1 mb-1 shadow-md xl:rounded-full shadow-bleutresclair text-sm xl:text-lg">
<div class="flex flex-row w-full">
<span class="basis-12 md:basis-24">2 janv</span>
<span class="md:basis-72 ">intitule</span>
<span class="inline-block">catégorie</span>
</div>
<div>
<div class="flex flex-row justify-between" >
<div></div>
<div class="font-bold lg:font-normal">10€</div>
</div>
</div>
</div>
</div>
</template>
I thought of a function with a setInterval, something like:
let timer = setInterval(load_component_function, 500)
But I have no real clue of what to put in such a function and how to implement that.
It is simple. To show component in Vue you use v-if or v-show so you just need a proper condition.
<TheLoadingLine v-if="counter > 0" />
<TheLoadingLine v-if="counter > 1" />
<TheLoadingLine v-if="counter > 2" />
Just increase a counter by one in a setInterval callback
You can also use a v-for:
<TheLoadingLine v-for="c in counter" :key="c" />
I am using Bootstrap to design my React project and all of a sudden the grid system doesn't work properly.Basically I need to have the first div with the className of row above the Card components, and centered.I have added more code but nothing that had to do with that particular main page or styling.I have pasted below my code.Does anyone know why this could've happened and how to fix it?
return (
<div>
<section id="service">
<div className='container'>
<div className='row'>
<div className='col-12'>
<h3 className='fs-5 text-center mb-0'>Our Services</h3>
<h1 className='display-6 text-center mb-4'>Our <b>Awesome</b> Services</h1>
<hr className='w-25 mx-auto'/>
</div>
</div>
<div className='row'>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Easy Usage' content='Access your assigned task with only one click and start testing your code right now.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Instant Feedback' content='Run your solution using only one submit button with the help of our online compiler.'/>
</div>
<div className='col-md-4'>
<Card font = {'fa fa-cogs fa-4x mb-4 text-primary'} title='Optimize your time' content='Reduce your time spending on uploading assignments with our easy dashboard method.'/>
</div>
</div>
</div>
</section>
</div>
)
Today I add a text in my password label, but when I change de resolution the text don't stay in the same place, please help me. My code:
<div class="flex">
<BreezeLabel for="password" value="Password" />
<Link
:href="route('password.request')"
class="text-sm text-purple-600 hover:text-purple-800 ml-48"
>
Forgot your password?
</Link>
</div>
Some omg to ilustrasse the situation:
fullsize
md
sm
I don't know how Breeze works.
But I think you could use flex in your favor.
If you want the link always on the right side, you can use something like this,
<div class="flex justify-between">
<BreezeLabel for="password" value="Password" />
<Link
:href="route('password.request')"
class="text-sm text-purple-600 hover:text-purple-800"
>Forgot your password?</Link>
</div>
You can check here if this is what you need: https://play.tailwindcss.com/CXsdrXwDDq.
How do I center the form inputs in this image? I'm using the GridLayout defined here: https://www.matblazor.com/LayoutGrid using form elements defined here https://www.matblazor.com/EditContext
This is my attempt but i must be missing something:
<div class="container login-layout mat">
<MatCard>
<MatCardContent>
<EditForm Model="Login" OnValidSubmit="Success">
<div class="mat-layout-grid">
<div class="mat-layout-grid-inner">
<div class="mat-layout-grid-cell mat-layout-grid-cell-span-12">
<MatH2>Login</MatH2>
</div>
<div class="mx-auto
mat-layout-grid-cell
mat-layout-grid-cell-span-12">
<MatTextField ValidationDisabled="true" Label="Username" #bind-Value="Login.Username" />
<MatTextField ValidationDisabled="true" Type="Password" Label="Password" #bind-Value="Login.Username" />
</div>
<div class="mat-layout-grid-cell mat-layout-grid-cell-span-12">
<MatButton class="float-right">Log in</MatButton>
#*<MatButton class="float-right" #onclick="OnLoginClick">Log in</MatButton>*#
</div>
</div>
</div>
</EditForm>
<div class="container">
<MatCaption>Need an account? </MatCaption>
<MatButton class="float-right aslkjd-c0ass" #onclick="OnSignUp">Sign up</MatButton>
</div>
</MatCardContent>
</MatCard>
</div>
mx-auto or say margin auto in x axis work in div if you provide it a width or max-width. try using it on input field itself or try giving div a width or you can use flex justify content: center and flex-direction: column on the div