I want to have different margins for flex and flex-sm tags:
<div layout="row" layout-margin layout-wrap>
<div flex="30" flex-sm="100" ng-repeat="occasion in
resultObject.occasionTypes[typeIndex].occasions">
------------
</div>
</div>
I tried to use something like:
[layout-margin] > [flex] {
margin: 3px; }
[layout-margin] > [flex-sm] {
margin: 0px; }
But it doesn't work. Is there any way to do that?
Angular material doesn't add or remove the attributes based on the browser size, so both [flex] and [flex-sm] will always be on your element. That is why they both apply, you will have to write a media query with the same break point as angular material if you want to accomplish this:
[layout-margin] > [flex] {
margin: 3px;
}
#media (max-width: 599px){
[layout-margin] > [flex-sm] {
margin: 0;
}
}
Related
The PrimeFlex gap classes don't seem to work with grid.
How do I get this to increase the gap, instead of creating 4 rows?
<div class="grid gap-1">
<div class="col-6"><p-button label="Click" ></p-button></div>
<div class="col-6"><p-button label="Click" ></p-button></div>
<div class="col-6"><p-button label="Click" ></p-button></div>
<div class="col-6"><p-button label="Click" ></p-button></div>
</div>
You could build your own PrimeFlex using the SASS variable $gutter. It is the padding of a grid column and defaults to .5rem.
See https://www.primefaces.org/primeflex/setup
If you want to override the gutter for certain grids, you will have to add custom CSS. The gutter ends up in the generated CSS like:
.col { padding: .5rem; }
.col-1 { padding: .5rem; }
...
.col-12 { padding: .5rem; }
So, if you want to use a gutter of 1rem for example, you could override it like:
.my-gutter [class*=col] { padding: 1rem; }
And use it like:
<div class="grid my-gutter">
...
</div>
See also:
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
I am trying to put the logout button at the left toolbar , i have done it by position but it is not reponsive nd by smalling the chrome this button disappers , i have tried margin also but of no use!! How can I do it ??
My HTML
<div class="user-button-container at-xl-12 "#userButton>
<button class="user-button " md-button [mdMenuTriggerFor]="menu">
<div fxLayout="row" fxLayoutAlign="start center">
<at-icon class="at-display-block"backgroundColor="purple" backgroundType="border"size="40px" fontSize="30px"></at-icon>
<span class="name" fxHide="true" fxHide.gt-sm="false"></span>
<md-icon></md-icon>
</div>
</button>
</div>
My CSS
.user-button-container {
height: 100%;
font-weight: 400;
.user-button {
height: 100%;
border-radius: 0;
position: relative;
left: 1050px;
md-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.name {
margin: 0 8px 0 10px;
}
} }
looks like you have the design specified for xl-format, but not for smaller formats. as far as I know you should always start from small (xs) to large (lg) and not the other way around. so maybe just changing the following could help:
div class="user-button-container at-xs-12 "#userButton>
instead of
div class="user-button-container at-xl-12 "#userButton>
if you are using bootstrap use following class for desktop or mobile
<div class="user-button-container col-md-12 col-xs-12">
</div>
also, it appears you are not closing your css items - make sure you are using {}
I have 2 Vue components, dividing the page into 2 parts. Left side, and right side. I'm using this two on every page, like this:
<template>
<div class="page-body">
<left-side>
<p class="text" >{{ $t('about') }}</p>
</left-side>
<right-side>
<p class="slogen bottom">{{ $t('slogen') }}</p>
</right-side>
</div>
</template>
But there is a special case, when this two components should switch place, to render the right-side before the left-side, when using responsive mobile design. What would be the way to accomplish this behavior? I'm using Vue 2.3.3
This is a CSS question. Lay them out in a flexbox and use the order property in a media query to change the order.
The example below will swap the two colored areas when the display width is between 300 and 600 pixels.
.page-body {
display: flex;
}
left-side,
right-side {
background-color: #fdc;
display: block;
flex-basis: 50%;
}
right-side {
background-color: #cdf;
text-align: right;
}
#media (min-width: 300px) and (max-width: 500px) {
left-side {
order: 2;
}
}
<div class="page-body">
<left-side>
<p class="text">{{ $t('about') }}</p>
</left-side>
<right-side>
<p class="slogen bottom">{{ $t('slogen') }}</p>
</right-side>
</div>
If you use Vuetify, you can easily do that with the order property:
<v-row>
<v-col class="col-11 col-md-6" order-md="2">
<p>On mobile: on the left; otherwise on the right</p>
</v-col>
<v-col class="col-11 col-md-6" order-md="1">
<p>On mobile: on the right; on tablet/desktop(-> md) on the left</p>
</v-col>
</v-row>
Without flex, you can achieve this with floats, here is short example:
.right, .left {
box-sizing: border-box;
border: black 1px solid;
width: 50%;
height: 130px;
}
.left {
float: left;
}
.right {
float: right;
}
#media (max-width: 768px) {
.left, .right {
float: none;
width: 100%;
}
}
<div class="right">
second
</div>
<div class="left">
first
</div>
If anyone uses vuetify and wants to change the order of appearance of v-flex elements
In Large Display, i.e. Tablet to Laptop:
Use a scoped css like the following to reverse the order row-wise |A|B| will become |B|A|:
.layout.row.wrap {
flex-direction: row-reverse;
}
In Mobile View, changing the order of column:
Should use a scoped css such as follows to reverse the order when they are shown in a mobile devices:
#media (max-width: 425px) {
.layout.row.wrap {
flex-direction: column-reverse;
}
}
Here, max-width can be set to any convenient value to meet the requirement. If only in one layout the reverse ordering is needed but normal order in all other cases, then the specific layout can be separated in a component where this custom styling may be applied.
More about Ordering Flex Items
Lets say I have the following html:
<header class="header">
<div class="title">
<h1>Home</h1>
</div>
<div class="logo">
<img src="#" alt="Logo">
</div>
<div class="account">
<div class="options">
</div>
<div class="search">
</div>
</div>
</header>
And I have the following SCSS:
header {
height: 4.1rem;
div {
width: 33%;
float: left;
height: 4.1rem;
line-height: 4.1rem;
color: #fff;
&.title {
h1 {
font-weight: normal;
font-size: 3rem;
padding: 0;
margin: 0;
}
}
&.logo {
text-align: center;
}
&.account {
}
}
}
Now the problem that I have is that divs options and search are 33% percent of account which is logic as I have div {width: 33%}. I know I can select direct child elements with:
header {
> div {
}
}
But this doesn't help even if I put the > infront of all other classes. I also know I can say that the width should be 0 or what ever again in .account but I would like to prevent this.
Try this:
...
& > div {width: 33%;}
div {
float: left;
height: 4.1rem;
line-height: 4.1rem;
color: #fff;
...
Take out div width and apply it only on direct children. Leave rest as is.
Here is quick fiddle (remove .option and .search styles later, its only for visualisation).
Please edit your question and better explain what exactly you want to achieve.
Use the & with > inside the parent element like this:
.services {
& > div {
margin-bottom: 25px;
}
}
I am not certain I understand you. But I think you want a combination of direct children and child pseudo selectors, in pure CSS:
header > div:first-child {
}
Or, for the second div:
header > div:nth-child(2) {
}
You could also use the not selector:
header > div:not(.account) {
}
to exclude any unwanted div's.
I have one element
HTML
<div class="content col-md-10 col-md-offset-1">
</div>
What i need in LESS i something like this
.content{
.col-md-10;
.col-md-offset-1;
}
That later i can use shortner code like this
<div class="content col-md-10 col-md-offset-1">
</div>
I know i must use only content like this
<div class="content">
</div>
I have tried something like this but does not work?
.content{
.make-md-column(10);
.make-md-offset(1);
}
Update
It's called make-md-column-offset not make-md-offset
Running the following through any Online Less Compiler should work:
#grid-gutter-width: 30px;
#screen-md-min: 992px;
#grid-columns: 12;
// Generate the medium columns
.make-md-column(#columns; #gutter: #grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (#gutter / 2);
padding-right: (#gutter / 2);
// Calculate width based on number of columns available
#media (min-width: #screen-md-min) {
float: left;
width: percentage((#columns / #grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(#columns) {
#media (min-width: #screen-md-min) {
margin-left: percentage((#columns / #grid-columns));
}
}
.content{
.make-md-column(10);
.make-md-column-offset(1);
}
Original
My guess would be you have something missing from the build process like importing the mixin functions or variables.
Here is the section on bootstrap grid mixins:
http://getbootstrap.com/css/#grid-less
Here is a Example Usage:
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
So your syntax looks fine. I'd make sure you don't have any build errors.