I would like if it's possible to select a div that is the child of two previous div. Based on my code the targeted div is "Middle" but it is inside :
class="start-page epages no-sidebars"
AND
class="Layout1 GeneralLayout Div"
I tried ".start-page .Middle " but it doesn't work
<body class="start-page epages no-sidebars" itemtype="http://schema.org/CollectionPage">
<div class="Layout1 GeneralLayout Div">
<div class="Header HorizontalNavBar HeaderSticky">
</div>
<div class="NavBarTop HorizontalNavBar" style="background-position-y: 90px;">
</div>
<div class="Middle">
</div>
</div>
</body>
Related
Structure of my app is like following:
<div class="parent">
<div class="child" ng-if="showChild">
<div class="child-view-1" ng-if="!isShown">
</div>
<div class="child-view-2" ng-if="isShown">
</div>
</div>
</div>
Inside child-view-2 I have form element, and of course, it is undefined in controller, probably beacuse of ng-if (as it creates child scope).
isShown variable just switches divs from child-view-1 to child-view-2.
What do you suggest, how can I make form visible all time in controller?
EDIT: My fault, the outer child is controlled by showChild flag...
You have an outer ng-if (on div class="child") based on the value of isShown. When isShown is true the content will be added to the DOM, and the class="child-view-1" will obviously not be added to the DOM because of ng-if="!isShown"
The second div's ng-if is redundant because it is the same condition as the outer one:
<div class="parent">
<div class="child" ng-if="isShown">
<div class="child-view-1" ng-if="!isShown">
<!-- THIS WILL NEVER BE DISPLAYED -->
</div>
<div class="child-view-2" ng-if="isShown">
<!-- THIS WILL ALWAYS BE DISPLAYED WHEN isShown IS TRUE -->
</div>
</div>
</div>
How to place another div below the <div main-title>My App</div> such that the content in second div should come below the content in first div.
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
Try wrapping in another div that has display block.
Like this:
<div style="display:block;">
<div main-title>My App</div>
<div other-div>Something</div>
</div>
<div class="sunti_contain" ng-repeat="sunti in suntis track by $index">
<div class="individual_sunti" ng-click="update_ancestor(sunti)">
<!--needs a unique div#id via angularz-->
<div class="sunti_content" ng-bind="sunti.content"></div>
<div class="sunti_tags" ng-bind="sunti.tags"></div>
<div class="sunti_author" ng-bind="sunti.author"></div>
<div class="sunti_shortid" ng-bind="sunti.short_id"></div>
<div class="sunti_ancestor" ng-bind="sunti.ancestor"></div>
</div>
<div class="sunti_reply_carriage_wrapper">
<div class="sunti_reply_carriage" ng-show="!sunti.descendents.length">
<div class="individual_sunti reply_carriage_sunti" ng-repeat="descendent in sunti.descendents">
<div class="sunti_content" ng-bind="descendent.content"></div>
<div class="sunti_tags" ng-bind="descendent.tags"></div>
<div class="sunti_author" ng-bind="descendent.author"></div>
<div class="sunti_shortid" ng-bind="descendent.short_id"></div>
</div>
</div>
</div>
</div>
I want to only show the div.sunti_reply_carriage if there are any descendents rendered in the ng-repeat. If there are no descendents, I don't want the div sunti_reply_carriage to appear at all. However, the ng-show="!sunti.descendents.length" does not work, presumably because it's just outside/before the ng-repeat that references descendents in sunti.descendents
How can I do this?
ng-show="!sunti.descendents.length"
Above code does not show the following code block if length is greater than zero
Ex: If sunti.descendents.length is 1 then
!1 is false then ng-show="false"
If sunti.descendents.length is 0 then !0 is true then ng-show="true"
So, change the expression to ng-show="sunti.descendents.length"
You can use ng-if as well if you want to completely remove the code block from DOM if the expression evaluates to false.
<div class="sunti_reply_carriage" ng-show="!sunti.descendents.length">
<div class="individual_sunti reply_carriage_sunti" ng-repeat="descendent in sunti.descendents">
<div class="sunti_content" ng-bind="descendent.content"></div>
<div class="sunti_tags" ng-bind="descendent.tags"></div>
<div class="sunti_author" ng-bind="descendent.author"></div>
<div class="sunti_shortid" ng-bind="descendent.short_id"></div>
</div>
</div>
You can use sunti.descendents.length instead of !sunti.descendents.length
If length property returns 0 then it will be hidden because it is falsey value in JavaScript, if it will return some value i.e. a number then it will be shown because it is truthy value in JavaScript.
If you want to show or hide you can use ng-show or ng-hide directives, if you want to completely remove/insert the DOM conditionally then you can use the ng-if directive in this case.
Using the ng-show directive
<div class="sunti_reply_carriage_wrapper">
<div class="sunti_reply_carriage" ng-show="sunti.descendents.length">
<!-- code omitted for brevity -->
</div>
</div>
Using the ng-if directive
<div class="sunti_reply_carriage_wrapper">
<div class="sunti_reply_carriage" ng-if="sunti.descendents.length">
<!-- code omitted for brevity -->
</div>
</div>
I'm seeing some odd behaviour when I put custom directives inside a div with an ng-show.
If I define the html as:
<div ng-show="service.searchResults">
<fig-search-type-filters />
<fig-filter-search />
<div class="gridStyle" ng-grid="vm.grid"></div>
</div>
then when the show condition is true it shows just fig-search-type-filters content. All the rest is elided from the html.
However, if I wrap each directive as follows:
<div ng-show="service.searchResults">
<fig-search-type-filters />
</div>
<div ng-show="service.searchResults">
<fig-filter-search />
</div>
<div ng-show="service.searchResults">
<div class="gridStyle" ng-grid="vm.grid"></div>
</div>
then fig-search-type-filters, fig-filter-search and the grid are displayed as I expect. Why is this?
If I move the ng-show condition inside the template for each directives then again only the fig-search-type-filters appears.
What if you do this:
<div ng-show="service.searchResults">
<fig-search-type-filters> </fig-search-type-filters>
<fig-filter-search> </fig-filter-search>
<div class="gridStyle" ng-grid="vm.grid"></div>
</div
Is it possible in SCSS to loop through of series of say three divs like:
<div class="video_holder">
<div class="video_title"></div>
</div>
<div class="video_holder">
<div class="video_title"></div>
</div>
<div class="video_holder">
<div class="video_title"></div>
</div>
And for each video_title add a property that does something like:
.video_title:after{ content: "number" }
So for each div, we'd start at 1.1 and go through to 1.x (whatever is needed)
I can't quite seem to get anything working based on other loops I've found
This can be done with css only, you don't need sass loop. You have to use css counter-increment.
First wrap all of your divs in another div:
<div class="video_counter_reset">
<div class="video_holder">
<div class="video_title"></div>
</div>
<div class="video_holder">
<div class="video_title"></div>
</div>
<div class="video_holder">
<div class="video_title"></div>
</div>
</div>
and use this css:
.video_counter_reset {
counter-reset: item;
}
.video_holder:after {
counter-increment: item;
content: "1." counter(item);
}
Read this Smashing post for more details.
But there is a sass mixin you could use.