I have the follwing html
<div class="listing listing--with-margin">
#foreach($recipients as $recipent)
<span class="listing__item">{{ $recipent }} <input type="checkbox"></span>
<span class="listing__item">{{ $recipent }} <input type="checkbox"></span>
#endforeach
Should the class on the checkbox be
<input type="checkbox" class="listing__input">
or
<input type="checkbox" class="listing__item listing__input">
I think option 1 which allows me to write is a lot cleaner in the sass with less nesting.
If you take a look at the Naming page in the BEM documentation, at the bottom you'll see an example section, with a form block.
In the example, you will find the <form> element, with a couple of <input />s.
Each <input> has its own element class of either .form__input or .form__submit, both inheriting from the block .form class. They do not inherit more than one class.
However, you will notice that they have multiple modifier classes, which is acceptable.
There are 3 options for grandchildren element.
Flattening grandchildren
<article class="post">
<div class="post__meta">
<div class="post__category">...</div>
<div class="post__date">...</div>
</div>
...
</article>
Creating new blocks
<article class="post">
<div class="post__meta">
<div class="category post__category">...</div>
<div class="date post__date">...</div>
</div>
...
</article>
Extending the BEM naming convention
<article class="post">
<div class="post__meta">
<div class="post__meta__category">...</div>
<div class="post__meta__date">...</div>
</div>
...
</article>
Related
I have the following HTML:
<div class="row">
<div class="col">
<div class="wrapper">
<input type="radio" value="value-0" />
</div>
</div>
<div class="col">
<div class="wrapper">
<input type="radio" value="value-1" checked="checked" >
</div>
</div>
</div>
Is there a way in SASS to select .col, closest to a checked radio button?
Unfortunately no, you cannot select an element based on the presence of any child element.
A solution for your problem would be to use JavaScript. You can select all your radio buttons, traverse up the DOM tree to find the parent .col element (for example, with jQuery's .closest() function if you're using jQuery, and add a new class to those col elements.
E.g. (if you're using jQuery)
$(".col > input[type=radio]").closest(".col").addClass("col-with-radio")
...and then you can style the .col-with-radio class.
Not unless they are siblings. In the current hierarchy you posted, this is not possible with SASS.
I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).
I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html?
Thanks!!
Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.
<li>
<a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
<div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">
<div class="sidebarBox">
<h2 class="sideBarHeader">Cart </h2>
<div class="sidebarContainer" ng-repeat="item in cart">
<img src="{{item.imageUrl}}" style="width:90px;height:100px;">
<div class="sidebarContent">
<p class="sidebarTitle">{{item.title}} </p>
<p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
<p class="sidebarSubtitle">Price: ${{item.price}}</p>
</div>
<p class="sidebarLine"></p>
</div>
</div>
<br>
<div class="sidebarNoScroll">
<p style="color:black;font-size:22px;">Total</p>
<p class="sidebarTotal">${{ total() }}</p>
<button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
<button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
</div>
</div>
</li>
css.
.sidebarContainer {
overflow:scroll;
height:224px;
}
.sidebarNoScroll {
overflow: hidden;
}
Wrap the container.
<div class="sidebarContainer">
<div ng-repeat="item in cart">
</div>
</div>
I have a set of data which is an array of objects. Some objects have more data than the other. But each object will display in each col-md-4 div. Therefore, the height of each div will be different based on how much data an object has.
Here is my code:
<div class="col-md-12 eventlog-info-container">
<div class="row eventlogs-single-container">
<div class="col-md-4 eventlog-1-container" ng-repeat="record in records track by $index">
<h4>Event Log {{$index}}</h4>
<ul>
<li ng-repeat="(key, value) in record">{{::key}}: {{::value}}</li>
</ul>
</div>
</div>
</div>
My question is after ng-repeat, I want to find the biggest height of the element. And then apply the biggest height to each of the element using ng-style.
I have an idea to approach that using JQuery. However, I want to use Angular to do that? Any suggestion? Anuglar is not good for DOM manipulation?
Thank you in advanced.
After I did some research yesterday. I found an open source angular directive to solve my problem - angularJS Vertilize Directive An AngularJS directive to vertically equalize a group of elements with varying heights. In other words, it dynamically makes a group of elements the same height. Thank you Chris Collins who made this directive.
<div vertilize-container class="row">
<div ng-repeat="col in columns" class="col-sm-3">
<div class="well">
<div vertilize>
<h3>{{ col.title }}</h3>
<p>{{ col.body }}</p>
</div>
</div>
</div>
</div>
This answer should get you started on the right path.
<div class="col-md-12 eventlog-info-container">
<div class="row eventlogs-single-container">
<div class="col-md-4 eventlog-1-container" ng-repeat="record in records track by $index">
<h4>Event Log {{$index}}</h4>
<ul>
<li outer-height ng-repeat="(key, value) in record">{{::key}}: {{::value}}</li>
</ul>
</div>
</div>
</div>
app.directive('outerHeight', function(){
return{
restrict:'A',
link: function(scope, element){
//using outerHeight() assumes you have jQuery
// if not using jQuery
console.log(element.outerHeight());
}
};
});
Is passing liquid variables as inline styles commonly frowned upon? Here is an example of my markup:
<div class="span-8-12">
<h6> {{page.role}}</h6>
<h1 style="color:{{ page.accentColor }};"> {{page.title}} </h1>
</div>
<article class="intro">
<p style="color:{{ page.txtColor }};"> {{ page.summary }} </p>
</article>
I am setting h1 and p colors using the liquid variables in my posts. I know I could pass the variable directly to a CSS file, but then'd i'd have to write even more markup and CSS. Is this method valid or is there a better method on systematically changing values of color based off page variables?
Better would be to set a class, rather than directly setting the styles inline.
<div class=" {{ page.typeOfClass }}">
<div class="span-8-12">
<h6> {{page.role}}</h6>
<h1 > {{page.title}} </h1>
</div>
<article class="intro">
<p > {{ page.summary }} </p>
</article>
</div>
Then in your whatever.css set the styles for the different classes you want:
.someClass h1{
color:blue;
}
.someClass .intro p{
color:red;
}
for example.
Is there any CSS selector for selecting a parent div only if it directly contains a select inside ?
Example code:
<div class="top_level">
<input type="radio"></input>
</div>
<div class="top_level">
<input type="text"></input>
</div>
<div class="top_level">
<select name="namehere">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
</div>
Suppose I only want to select the third 3rd top_level class div, since it contains a select directly inside it, how would I do that ?
I did try to search around for an answer, but couldn't find any. It would have been a lot easier if parent selection was possible in CSS.
If you're using jQuery, then you can use :has :
$('div.top_level:has(select)')
If you're using only CSS, then the answer is simple : No, you don't have anything similar to select a parent.
You can use :empty pseudo class to check whether your container is empty (excluding line breaks).
You cannot check whether it contains a type of element. But you may be able to restructure your markup to use :empty selector
eg :
<div class="top_level">
<input type="radio"></input>
<div class="list"></div>
</div>
<div class="top_level">
<input type="text"></input>
<div class="list"></div>
</div>
<div class="top_level">
<div class="list">
<select name="namehere">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
</div>
</div>
Now you may query like
.list:not(:emtpy) {
// to select all lists that are non-empty
}