During animations six of items come out from div as image below.
How to hide slided elements during animations.
Using carousel from mdb for angular
Internet's fail me or I can't find answers for my questions.
HTML:
<mdb-carousel class="carousel-multi-item multi-animation" [animation]="'slide'">
<ng-template #thenBlock >
<mdb-carousel-item *ngFor="let cards of slides; let i = index">
<li class="search-car__display-link" *ngFor="let car of cards ; let i index" >
<a [routerLink]="['/car-detail', car.id]">
<car-card [car]="i"></car-card>
</a>
</li>
</mdb-carousel-item>
</ng-template>
</mdb-carousel>
SCSS:
.search-car {
&__display-results {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 20px;
}
&__display-link {
text-decoration: none;
list-style: none;
& > a {
text-decoration: none;
}
}
}
.carousel-item {
overflow: hidden;
z-index: -100;
&.active, &.carousel-item-right, &.carousel-item-next {
display: flex !important;
flex-wrap: wrap;
z-index: 2;
}
}
FIX!
Edit some HTML structure, deleting ng-templates with ng-container not added in issue. It's work on this code.
<mdb-carousel #displayFilteredCars [isControls]="true" class="carousel-multi-item multi-animation" [animation]="'slide'">
<mdb-slide *ngFor="let cards of slides; let i = index">
<li class="search-car__display-link" *ngFor="let car of cards ; let i index" >
<a [routerLink]="['/car-detail', car.id]">
<car-card [car]="i"></car-card>
</a>
</li>
</mdb-slide>
</mdb-carousel>
Related
Got a problem with CLS score which is being affected by this component on mobile devices.
This is how component loos like on initial load when browser's default font loads in:
This is what happens after my custom font is loading:
Here is my css:
.text__list {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
.text__item {
display: none;
&:nth-child(2) {
.text__icon {
display: none;
}
}
&:nth-last-child(-n+3) {
display: inline-block;
}
#media (min-width: $screen-sm) {
display: inline-block;
}
}
Here is my VUE html:
<ol class="text__list" data-cy="text-list">
<li class="text__read-more" :class="{'text__read-more--hidden': isShowingMore}">
<button class="text__read-more-button" #click="showMore" data-cy="text-read-more" title="Read more">
<Icon class="text__read-more-icon" name="dots-horizontal" />
</button>
</li>
<li v-for="(item, index) of items" :key="index" class="text__item" :class="{'text__item--visible': isShowingMore}">
<Icon class="text__icon" name="chevron-right" />
<AppLink class="text__link" :class="{'text__link--active': isCurrentPage(index)}" :to="item.href" :router-link="item.routerLink === true" :aria-current="isCurrentPage(index)" data-cy="text-link">{{ item.title }}</AppLink>
</li>
</ol>
So I have a list something like this:
.ul-employee {
display: flex;
flex-direction: column;
text-align: left;
height: 100%;
justify-content: space-around;
}
.li-employee {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 400px;
}
<ul class="ul-employee">
<li class="li-employee">
<h3>Employee Name</h3>
<p>Salary</p>
<p>Position</p>
</li>
<li *ngFor="let employee of employees" class="li-employee">
<h3>{{ employee.name }}</h3>
<p>${{ employee.salary }} / hour</p>
<p>{{ positions[employee.position] }}</p>
</li>
</ul>
The result is this
The list is in a container with width of 400px, the list takes 100% of the width space and so does the list items. I tried doing text-align: left; but that doesn't seem to work.
How do I make it so it's aligned more like:
Employee Name Salary Position
Employee Name Salary Position
Employee Name Salary Position
Employee Name Salary Position
instead of one more to the right and another more to the left?
You need 2-dimension layout. Flex is for 1-Dimension layout.
You need display: grid;
display:table; seems more appropriate than display:flex here if that's not a real table ... :
.ul-employee {
display: table;
text-align: left;
height: 100%;
}
.li-employee {
display: table-row;
width: 400px;
}
.li-employee > * {
display:table-cell;
border:solid;
padding:0.25em;
<ul class="ul-employee">
<li class="li-employee">
<h3>Employee Name</h3>
<p>Salary</p>
<p>Position</p>
</li>
<li *ngFor="let employee of employees" class="li-employee">
<h3>{{ employee.name }}</h3>
<p>${{ employee.salary }} / hour</p>
<p>{{ positions[employee.position] }}</p>
</li>
</ul>
I'm writing some basic SCSS. But I've noticed appending & before a class, only works in certain circumstances. For example, before elements like "section" or before ":hover, active".
But this never works for me before ".class". Why not?
For example, in the below code, .flex-item styles only apply, if I remove the &. But look at docs/internet, it should work with & in front, no?
section {
padding: 20px;
margin: 0 auto;
border: 1px solid red;
position: relative;
width: 95%;
list-style: none;
top: 100px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
&.flex-item {
border: 1px solid green;
padding: 5px;
width: 50%;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: $white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
}
AND HERE'S THE JSX:
I basically want a section, (as that has high applied). And then two flex items, which sit side by side in a row, with the flex container...
<section className="flex-container">
<div className="flex-item">
<h1>A cashback credit card for holiday and home</h1>
<ul className="pros">
<li>No fees for making purchases abroad</li>
<li>Nothing added on top of the Mastercard exchange rate</li>
<li>Manage your holiday spending with realtime in-app notifications</li>
<li>0.5% cashback on all purchases above £1</li>
<li>Friendly customer support from anywhere with with in-app chat</li>
</ul>
<p>Great the same great rewards on holiday and at home with the Travel Cashback Credit Card.</p>
<p>See full information</p>
<Link to="/page-2/">Go to page 2</Link>
</div>
<div className="flex-item">
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<Link to="/page-2/">Go to page 2</Link>
</div>
</section>
);
export default IndexPage;
Just remove the & before the .flex-item:
section {
// your section rules
.flex-item {
// your .flex-item rules
}
}
You only need the & (parent element reference) in cases where you want to use a pseudo selector, adding classes to the current selector (or partial class names), link a :hover or doing some other parent selector usage:
a {
// your link styles
&:hover {
// your hover styles
}
}
.button {
// .button styles
&.colored {
// .button.colored styles
}
&-large {
// .button-large styles
}
}
Or for some other parent selector appliances:
section {
// some styles
.parentclass & {
// this will match .parentclass section
}
}
This are just a few examples.
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 4 years ago.
I have a few items for a megamenu that are display:flex; and I have adapted the lists inside each flexed div to be flex column.
Problem is that sometimes the lists will have too many items, and I need them to start again in the same line.
Example on codepen: https://codepen.io/james_zedd/pen/KRyQao
I have modified the height of the first ul to be 100px as an example. The container div has not adapted to the new width of the ul.
What am I doing wrong here?
/* -- Mega MEnu -- */
.megamenu {
display: flex;
background-color: #f5f5f5;
opacity: 0;
visibility: hidden;
max-height: 430px;
}
.megamenu.first {
opacity: 1;
visibility: visible;
}
.megamenu__linklist {
padding: 30px 0 26px 40px;
}
.megamenu__linklist h4 {
margin-top: 0;
margin-bottom: 12px;
}
.megamenu__linklist ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.megamenu__linklist a:hover {
color: red;
}
<div id="mm01" class="megamenu first">
<div class="megamenu__img">
<img src="//cdn.shopify.com/s/files/1/0023/6516/1525/files/mm_01_330x430.jpg?v=1525703183" alt="Custom Printing Tshirts">
</div>
<div class="megamenu__linklist">
<h4>T-Shirts and Clothing</h4>
<ul class="mm_links" style="height:100px">
<li>T-Shirts</li>
<li>Hoodies/Sweatshirts</li>
<li>Performance</li>
<li>Golf Shirts/Polos</li>
<li>Woven Shirts</li>
<li>Hats and Toques</li>
<li>Outerwear</li>
<li>Pants/Shorts</li>
<li>Ladies</li>
<li>Youth</li>
<li>Infants/Toddlers</li>
</ul>
</div>
<div class="megamenu__linklist">
<h4>Sports and Teams</h4>
<ul class="mm_links">
<li>Hockey</li>
<li>Soccer</li>
<li>Basketball</li>
<li>Baseball</li>
<li>Football</li>
<li>Lacrosse</li>
<li>Volleyball</li>
<li>Track and Field</li>
<li>Rugby</li>
<li>Cycling</li>
</ul>
</div>
<div class="megamenu__linklist">
<h4>Signs and Displays</h4>
<ul class="mm_links">
<li>Adhesive Decals</li>
<li>Backdrops</li>
<li>Banners</li>
<li>Signs</li>
</ul>
</div>
<div class="megamenu__linklist">
<h4>PRINTD</h4>
<ul class="mm_links">
<li>About</li>
<li>FAQ</li>
<li>Contact Us</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
</ul>
</div>
</div>
I've noticed that sometimes, flexbox columns inside of flexbox rows (or vice versa) don't do the rendering math in the order I expect. That seems to be happening here, too.
Consider using flex-direction:row instead of column for the sub-elements, and give them a specific width or flex-basis. Something like this appears to solve your problem:
.megamenu .megamenu__img+.megamenu__linklist ul {
/* height: auto; */
flex-direction: row;
}
.megamenu .megamenu__img+.megamenu__linklist ul li {
flex: 0 0 33.33%;
}
https://codepen.io/mblase75/pen/MGOVoW
I'm trying to build a basic bar that contains 5 buttons, every button is consist of an icon and below text that describes the icon.
I want that all the images will be on the same line and the descriptions will be underneath.
<img src=phone.png />call office
<img src=circle.png />link to website
<img src=book.png />add to contacts
in this code for example, "call office" should be below the first img, "link to website" below the second and so on but it writes the description but the description appears in the same line with the icons, every description next to itws icon.
can you help?
thx
Do it like this:
The icons/links are placed in a list, the HTML is cleaned up, and I've added a bit of CSS to show how it can look
ul {
list-style-type: none;
}
li {
display: inline-block;
margin: 1em;
}
li a {
display: block;
text-align: center;
}
li a img {
margin: 0 auto;
display: block;
width: 3em;
height: 3em;
}
<ul>
<li><img src=phone.png><br>call office</li>
<li><img src=circle.png><br>link to website</li>
<li><img src=book.png><br>add to contacts</li>
</ul>
I would change the HTML as well. Put just the text in there, because the images have no semantic value. Using CSS you can show the icons, and you don't even need an element for that. Just use the ::before pseudo-element.
nav.social {
text-align: center;
}
nav.social a {
display: inline-block;
padding: 3px;
}
nav.social a::before {
content: "";
display: block;
height: 32px;
background: url(http://www.phonebook.com/favicon.ico) top center no-repeat;
}
nav.social a.website::before {
background-image: url(http://stackoverflow.com/favicon.ico);
}
nav.social a.vcard::before {
background-image: url(https://en.wikipedia.org/favicon.ico);
}
<nav class="social">
<a class="phone" href="tel:036781223333" title="call us">call office</a>
<a class="website" href="http://www.bgasgdhen.com/" title="website">link to website </a>
<a class="vcard" href="advbagsgadron.vcf" title="add to contacts">add to contacts </a>
</nav>