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
Related
I'm new to BEM and i'm trying to implement this:
.details-header {
margin-top: 10px;
padding-bottom: 0;
display: block;
&__heading-panel {
margin-top: 10px;
}
&__heading {
display: inline-block;
}
}
Defining the same margin-top inside details-header__heading-panel is wrong, i know, but because there is element between details-header and details-header__heading-panel, i need this margin, how do i solve this, and also keep the code DRY?
EDIT: Here is the html:
<div class="details-header">
<div>Something</div>
<div class="details-header__heading-panel">
<h1 class="details-header__heading">
<span>something</span>
</h1>
<a>
Link
</a>
</div>
</div>
I need margin between that div between details-header and details-header__heading-panel
There's nothing wrong with defining the same margin-top inside details-header and details-header__heading-panel. Just keep going with your original code.
It's not copy-paste but just coincidence.
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
I have an html layout that I cannot modify since it's a 3d party library.
I have four divs and I want them to be inside a flexbox like that:
1------2------3
(where 2 is in the center and 4 is not visible at all).
I have created an example here.
It seems that it mostly work as I want to apart from the fact that the last div messes up the center position of the item number 2. Is there a way I can completely "exclude" it from the flex array by css even though it is in HTML?
.fc-toolbar {
background-color: #7CC2DD;
color: white;
height: 5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.fc-left {
order: 0;
}
.fc-right {
order: 2;
}
.fc-center {
order: 1;
}
.fc-clear {
}
<div class="fc-toolbar">
<div class="fc-left">
<button type="button">
<
</button></div>
<div class="fc-right">
<button type="button">
>
</button>
</div>
<div class="fc-center">
<h2>May 2016</h2>
</div>
<div class="fc-clear"></div>
</div>
You can give the element position: absolute and it will be taken out of the flow, just as you would do with a non-flex element.
You can find the updated jsfiddle here.
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;
}
}
What is the proper way to ignore 2 different .section elements, using nth type. this is what I have.
.section:not(:nth-of-type(1)),
.section:not(:nth-of-type(11)) {
max-width:900px;
margin:0 auto;
}
The problem with your selector is that it selects all .section elements which are not the first of type, and also the .section elements which are not the 11th of type. So you end up selecting all .section elements.
Instead, I think you want
.section:not(:nth-of-type(1)):not(:nth-of-type(11)) {
max-width:900px;
margin:0 auto;
}
That is, select the .section which are not the first of type nor the 11th of type.
.section:not(:nth-of-type(1)):not(:nth-of-type(11)){
background: red;
}
<div class="section">1</div>
<div class="section">2</div>
<div class="section">3</div>
<div class="section">4</div>
<div class="section">5</div>
<div class="section">6</div>
<div class="section">7</div>
<div class="section">8</div>
<div class="section">9</div>
<div class="section">10</div>
<div class="section">11</div>
<div class="section">12</div>
<div class="section">13</div>
<div class="section">14</div>
<div class="section">15</div>
I think the typical approach to this is to specify a CSS rule that affects everything and a more specific rule that affects these particular elements.
.section {
max-width: 900px;
margin: 0 auto;
}
.section:nth-of-type(10n + 1) {
max-width: auto;
margin: auto;
}
The .section:nth-of-type(10n + 1) will target not just the 1st and 11th items, but also the 21st, 31st, etc., items, anticipating the possibility of more items.