I created a SLDS custom toast in lwc. but it's not responsive. Does anybody has suggestion?
<template if:true={isSuceess}>
<div class="slds-notify_container slds-is-relative sucContainer">
<div class="slds-notify slds-notify_toast slds-theme_success" role="status">
<div class="slds-notify__content">
<h2 class="slds-text-heading_small ">{sucMessage}</h2>
</div>
</div>
</div>
</template>
<template if:true={isError}>
<div class="slds-notify_container slds-is-relative sucContainer">
<div class="slds-notify slds-notify_toast slds-theme_success" role="status">
<div class="slds-notify__content">
<h2 class="slds-text-heading_small ">{errorMessage}</h2>
</div>
</div>
</div>
</template>
Related
Bootstrap has its own grid system and I want to utilize it as much as I can so that I can minimize any custom CSS.
I have the code below wherein I have a couple of row classes here, you can see here that the first row is not aligning with the rest of the row. Is there any way that I can make this aligned?
You can also view it here on codepen https://codepen.io/aceraven777/pen/zYZMpEd
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-8">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="row">
<div class="col-8 row">
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="col-4">
<div class="bg-red">
This is a content
This is a content
This is a content
This is a content
This is a content
This is a content
</div>
</div>
</div>
</div>
The issue is that you are combining rows and columns together in one div. With bootstrap you cant combine rows and columns as there are some conflicting css. Just split this div <div class="col-8 row"> into two seperate divs.
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">This is a content</div>
</div>
<div class="col-8">
<div class="bg-red">This is a content</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red"></div>
</div>
</div>
</div>
</div>
</div>
What is better way to write this type of code in BEM convention?
<div class="advantages">
<div class="advantages__container">
<div class="advantages__title">Title</div>
<div class="advantages__reviews">
<div class="advantages__reviews-block">
<div class="advantages__reviews-title">Reviews block title</div>
<div class="advantages-reviews-progress">
<div class="advantages-reviews-progress__title">Progress title</div>
</div>
</div>
</div>
</div>
</div>
<div class="advantages">
<section class="advantages__container">
<h2 class="advantages__title">Title</h2>
<div class="advantages-reviews">
<article class="advantages-reviews__block">
<h3 class="advantage-reviews__title">Reviews block title</h3>
<div class="advantages-reviewsProgress">
<h4 class="advantages-reviewsProgress__title">Progress title</h4>
</div>
</article>
</div>
</section>
</div>
In my opinion the best BEM is really extensive, because it's how you make it descriptive. I've would probably just change some minor things:
<div class="advantages">
<div class="advantages__container">
<div class="advantages__title">Title</div>
<div class="advantages__reviews">
<div class="advantages__reviews-block">
<div class="advantages__reviews-block__title">Reviews block title</div>
<div class="advantages__reviews-progress">
<div class="advantages__reviews-progress__title">Progress title</div>
</div>
</div>
</div>
</div>
</div>
I have this template that is working fine.
But when I want to separate the single-course (or product) in a component, row-class not working fine and items are under each other...
This is my code:
<div class="col-lg-9">
<div class="row">
<app-single-course></app-single-course>
<app-single-course></app-single-course>
</div>
</div>
Update
this is the code without single component and its working fine if I copy it they appear side by side.
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-course-inner style-two">
<div class="thumb">
<img src="assets/img/course/2.png" alt="img">
<div class="rating">4.9/5 <i class="fa fa-star"></i></div>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="details">
<div class="meta">
<div class="row">
<div class="col-6">
<p>5,957 students</p>
</div>
<div class="col-6 text-right">
<p>01h 49m</p>
</div>
</div>
</div>
<h5>Motion Graphics: Create a Nice Typography Animation</h5>
<div class="price-inner">
<div class="row">
<div class="col-6">
<p>$33.99</p>
</div>
<div class="col-6 text-right">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you might talk about the bootstrap grid system.
Well first of all the col class comes inside the row class or else you'll always have item "under each other".
Here is the documentation with examples : https://getbootstrap.com/docs/4.5/layout/grid/
I am trying to learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
I want to get the fave.title within the collectionFS each block where I have "TITLE HERE", any ideas?
<template name="myFaves">
<div class="container">
<div class="page-header">
<h2>Your Favourites</h2>
</div>
<div class="row">
<div class="col-md-12">
{{#each faves}}
{{> singleFave }}
{{/each}}
</div>
</div>
</div>
</template>
<template name="singleFave">
<div class="row">
<div class="col-md-12">
<div id="freewall" class="freewall">
{{#each getMedia this.fileId}}
{{#if isImage store='thumb'}}
<div class="brick">
<img src="{{this.url store='thumb'}}" width="100%">
<div class="info">
TITLE HERE
</div>
</div>
{{/if}}
{{/each}}
</div>
</div>
</div>
</template>
I guess you need to access the parent context. Try it with {{../fave.title}} or {{fave.title ..}}.
Note that grand-parent context could also be reached using {{../.. fave.title}}