I expect li inside ul to be divided into 3 parallel lists of elements next to each other. However, the list appears in a straight list.
I expected col-xs-3 to do the job but it does not seem to work. Suggestions to fix this?
return <div id="col_sub_1">
<ul className="col-xs-3 sub-menu-width ">
{
childitem.map(function(subcat,subcatindex){
{/*--LEAF WHEN NO CHILD ELEMENTS */}
return <li>
{
subcat.id !=54 ? <a className="event_menu_item_desktop"><span> {subcat.name}</span></a> : null
</li>
})
}
</ul>
</div>
You need to add col-xs-3 to <li> tag but not to <ul> element. Also You are not properly closed expression.
Keep in mind always that you need to add unique key to the top element inside loop in react. Try this
return <div id="col_sub_1">
<ul className="sub-menu-width ">
{
childitem.map((subcat,subcatindex) => (
<li key={subcat.id} className="col-xs-3">
{subcat.id !=54 ? <a className="event_menu_item_desktop"><span> {subcat.name}</span></a> : null}
</li>
))}
</ul>
</div>
Related
I am trying to hide an element until its previous sibling is hovered over, in css (or scss rather), it looks like this:
.menu-container {
// style with flex etc...
& .menu-item-link {
// style the link...
&+.sub-menu-container {
display: none;
}
&:hover+.sub-menu-container {
display: block;
}
}
}
<ul class="menu-container">
<li class="menu-item-container">
<a class="menu-item-link">Ingredients</a>
<ul class="sub-menu-container">
<li class="sub-menu-item-container">
<a class="sub-menu-link">Fruits</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Vegetables</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Dairy</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Children</a>
</li>
</ul>
</li>
</ul>
How do I achieve this using tailwind?
You're not actually trying to target a sibling in your code, you're trying to target a child element. This is a very simple process when you just want to show a sub-menu dropdown.
Just add group to the hover trigger (.menu-item-link in your case) and group-hover:[some-display-class] to the child. This way the child will change it's display property when the parent element (or itself) is hovered.
You should change your title, also I'd recommend that you don't use Tailwind with class names like that. Please see extracting components for the recommended way to use Tailwind CSS. Of course, you are free to use it how you want but you're better off with plain old CSS if you want to use SCSS and classes like that.
Example with your structure:
<ul>
<li class="group">
<a>Ingredients</a>
<ul class="hidden group-hover:block">
<li>
<a>Fruits</a>
</li>
<li>
<a>Vegetables</a>
</li>
<li>
<a>Dairy</a>
</li>
<li>
<a>Children</a>
</li>
</ul>
</li>
</ul>
Example on Tailwind Play https://play.tailwindcss.com/dFc2zlmqDA
I have the following example where the last doesn't seem to work when using :last-child. In my code, you can see when I refer to the last element using the class "aa" it is showing the "+ Add"
&.aa {}
But if I comment out
&.aa{}
and set it to
&:last-child{}
the "+ Add" on the last is not showing up. Am I missing something?
This is because you have a typo in your HTML structure.
So your current structure is like this:
<ul>
<li class="item">
<div>
Tom Hanks
<br /> Jenny Hanks
</div>
</li>
<li class="item active">
<div>
Henry Fonda
<br /> Valarie White
</div>
</li>
<li class="aa">
</li>
<ul>
As we can see you didn't close the ul element properly, so the last child of it will not consider as:
<li class="aa">
</li>
and it will ignore this element as last-child, so &:last-child won't work as expected.
All you need to do is to close your elements properly.
So it should be something like this:
<ul>
<!--> ul inner elements <-->
</ul>
Live demo: codepen.io
I have a sidebar item which contains a list of comments. I want this item to show only if there are any available comment in the beginning and in order for my template to work I have to put a different style to the first comment than the rest. All the comments are being passed on my Model.
Here is my approach:
#if(Model.Comments?.Count > 0) {
<div class="sidebar_item">
<div class="item_inner slider">
<h4>See what students say:</h4>
<div id="single_banner">
<ul class="slides">
#for (int i = 0; i < Model.Comments.Count; i++)
{
if (i > 0){
<li style="display:none;">
}
#if( i == 0)
{
<li>
}
#Model.Comments[i].Comment
<div class="carousal_bottom">
<div class="thumb">
<img src="img/courses/testi_thumb.png" draggable="false" alt="" />
</div>
<div class="thumb_title">
<span class="author_name">#Model.Comments[i].Student</span>
</div>
</div>
</li>
}
</ul>
</div><!--end banner-->
</div><!--slider-->
</div><!--end sidebar item-->
}
The problem is that this doesn't work and I get errors that some curly brackets are missing or that some elements haven't closed properly. Any help appreciated.
I get errors that [...] some elements haven't closed properly.
The following code isn't recommended because the engine isn't smart enough to determine start/ends for html elements in c# code:
if (i > 0){
<li style="display:none;">
}
#if( i == 0)
{
<li>
}
So I generally put the logic directly in the tag:
<li style="#(i > 0 ? "display:none;" : string.Empty)">
However I'm not really a fan of logic in my view. Additionally to make things easier IMHO, I would have a comment display template. And I personally think there is no good reason to not use classes. Eventually my code would look like:
controller:
foreach(var comment in Model.Comments)
{
comment.IsVisible = comment == Model.Comments.First();
}
view:
// Update Model with Property
// bool HasComments { get { return Comments.Any(); } }
// Then the code actually reads/documents itself
#if(Model.HasComments) {
<div class="sidebar_item">
<div class="item_inner slider">
<h4>See what students say:</h4>
<div id="single_banner">
<ul class="slides">
#Html.DisplayFor(m => m.Comments);
</ul>
</div><!--end banner-->
</div><!--slider-->
</div><!--end sidebar item-->
}
displaytemplates/comments.cshtml
#{
// View logic, it only deals with html/css/javascript
var liClass = model.IsVisible ? string.Empty : "is-not-visible";
}
<li class="#liClass">
#Model.Comments[i].Comment
<div class="carousal_bottom">
<div class="thumb">
<img src="img/courses/testi_thumb.png" draggable="false" alt="" />
</div>
<div class="thumb_title">
<span class="author_name">#Model.Student</span>
</div>
</div>
</li>
Less code and more encapsulated.
I'd also recommend reading Philip Walton - Decoupling Your HTML, CSS, and JavaScript
I am new to BEM and working on a sample template:
HTML
<header class="header">
<div class="header__branding">
<h1>Site branding</h1>
</div>
<div class="header__menu">
<nav class="main-menu">
<ul class="main-menu list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</nav>
</div>
</header>
<footer class="footer">
<div class="footer__links">
<ul class="???? list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</div>
</footer>
CSS
.main-menu .list{
// styles here
}
.list__item{
// styles here
}
.list__item-link{
// styles here
}
.list__item-link--active{
// styles here
}
So my questions is, what is the best way to name lists and how best to organize the CSS? I got stuck in the footer, I added a ???? if someone can help me think of a better name for the footer links?
I am finding it hard to wrap my head around BEM, but I should not nest more than one element at a time right?
Think about BEM as reusable component that can be placed many times on site in different places.
In this case you don't need any more class in only 'list'. Both in header and footer.
If you need any modification you could use somethig like: 'list list--wider' or so. And this second class change only width of element.
And one more: list__item-link is wrong. Parent is 'list__item' so this should be named 'list__item__link' BUT you also could name it just 'anchor' or 'link' and you will be able reuse them all around site on <a> elements.
I usually do like this if I want to objects on the same row:
<ul class="list-inline">
<li>
<label>Name:</label>
</li>
<li>
<p>John</p>
</li>
</ul>
The other way I know is to use row and columns. Alot of code for a simple thing. Is there something built in for this?
Something like:
<div class="some-neat-bootstrap-class">
<label>Name:</label>
<p>John</p>
</div>
Can't find any in the docs.
You can display both of those elements inline.
.some-neat-bootstrap-class label,
some-neat-bootstrap-class p {
display:inline;
}