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>
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>
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>
I only want to display the image div if the object returns an image, right now I'm outputting the image in my <div class="image">, however, if there's no image, then the <div class="image"> should not output:
<div class="image">
<img src="{{item.logo}}" alt="{{item.title}}" title="{{item.title}}" />
</div>
How about this?
<div class="image" ng-if="item">
...
</div>
See the documentation for ngIf.
You could also use ng-show, which will merely hide the div instead of removing it completely. See the documentation for ngShow.
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.