Drupal render() forcing other divs closed? - drupal-7

I'm new to Drupal theming and am attempting to create a custom theme template for a specific content type I have.
I am attempting the following:
<div<?php print $content_attributes; ?>>
<?php print render($content['field_property_media']); ?>
<div class="field-label-above property-information">
<div class="field-label">Property Information</div>
<?php print render($content['address']); ?>
</div>
</div>
However, when the content actually render the address portion gets booted out of its parent div and looks like this:
<div class="field-label-above property-information">
<div class="field-label">Property Information</div>
</div>
<div class="field field-name-field-property-address field-type-addressfield field-label-inline clearfix"><div class="field-label">Address: </div><div class="field-items"><div class="field-item even"><div class="street-block"><div class="thoroughfare">55 Duchess Ave</div></div><div class="addressfield-container-inline locality-block"><span class="locality">London</span> <span class="state">Ontario</span> <span class="postal-code">N6C 1N3</span></div><span class="country">Canada</span></div></div></div>
I can't figure out why this is happening or what the solution is to keep the address within the div I manually created.
Thoughts?

The only possible way this could happen is if you've got a custom or contributed module intercepting your template file and changing it, or if you have some javascript enabled that's moving the <div> out of it's container. Drupal does absolutely no re-ordering of content when it processes a template file so it can't be anything in Drupal core that's causing the problem.
If the <div> is just displaying outside the container (i.e. it's inside when you inspect the source code) then you're probably just facing a floating issue; just add the clearfix class to the containing element.
EDIT
Just a thought, have you cleared your cache since you added the template file? If not, do that, it won't be picked up until the caches are cleared.
Also if this is a custom node template (i.e. node--page.tpl.php), make sure you've also copied node.tpl.php to your theme's folder. Then clear your cache again.

Related

Issue selecting CSS Selector for Google Tag Manager

I am new to GTM and am creating a trigger on a site for my company. I have tried all the ways I know how and looked at Simo Ahava's blog and cannot get my trigger to fire. I am making a trigger that fires on element click and wants to have the Click Element match the CSS selector but cannot get it to work properly.
This is what I see when I inspect the component on the page:
<div _ngcontent-my-app-c1="" class="page-complementary jss-page-complementary" id="jss-page-complementary" name="jss-page-complementary" sc-placeholder="">
<!---->
<!---->
<app-tab-stories _nghost-my-app-c26="" _ngcontent-my-app-c1="" class="ng-star-inserted">
<!---->
<div _ngcontent-my-app-c26="" id="our-stories" class="tab-stories tab-stories--option-three">
<div _ngcontent-my-app-c26="" class="tab-stories__inner">
<div _ngcontent-my-app-c26="" class="tab-stories__header">
<h2 _ngcontent-my-app-c26="" class="tab-stories__heading">Our Stories</h2></div><div _ngcontent-my-app-c26="" class="tab-stories__wrapper">
<mat-tab-group _ngcontent-my-app-c26="" class="tab-stories__tabs mat-tab-group mat-primary ng-animate-disabled mat-tab-group-dynamic-height" disableripple="" dynamicheight="">
<img _ngcontent-my-app-c9="" class="ng-tns-c9-25 tab-stories__image ng-trigger ng-trigger-fadeIn ng-star-inserted" id="app-deferred-image_id_d1e0186a-6714-c0b4-649e-b9234689c136" alt="null" src="/-/media/images/images-sc9/locations/pch/general-pch/patient-stories/lexie-gardiner-square.ashx?&mw=400" style="">
I have tried the following CSS Selectors with no success, any help would be appreciated. The goal is to track that whenever anyone clicks on one of the stories under "Our Stories" they do not link off to anywhere just hidden content.
.tab-stories
.tab-stories__wraper
.tab-stories__image
div#our-stories
.tab-stories*
div#tab-stories*
div#tab-stories
Try .tab-stories__tabs
If it doesn't work, edit your question and add a complete set of html with closing tags so that we could actually inject it into a page and see how it looks.
You don't need to try your selectors in GTM every time. That takes too long.
Just do the following:
Inspect your element to open the Elements tab in the Chrome Debugger.
press ctrl+f while the Elements tab is being focused and start typing your CSS selectors.
The search in the Elements tab is smart enough to not only match literal matches, but CSS selectors matches too.
Debugging your selectors through the Elements tab is the best way to make sure nothing else would trigger your rule on this page and to see what exactly will trigger it.

customize and style predefined blocks

I am new in drupal. I want to customize and style my login or my registration form.
There are some predefined blocks in Admin|Structure|Blocks. Login form is one of these predefined blocks and I want to show it in a specific region in my page.tpl.php page. the following code in page.tpl.php shows a login form. I want to style it with bootstrap css. How can I do that?
I have searched a lot and found some code in template.php and so on. But none of them worked. :(
Thank You For Your Help!
<?php if($page['login_region'])
print render($page['login_region']);
?>
You can do like this, just typing html and printing the region, then you can add css with your classes, or you can install Block Class Module to add classes to blocks:
<div class="row">
<div class="col-sm-3 customclass"?
<?php if($page['login_region'])
print render($page['login_region']);
?>
</div>
</div>

Detecting page scroll/ current section being viewed in AngularJs

My page is divided into sections : #page-1 and #page-2
See Plnkr: http://plnkr.co/edit/RZJLmsWDfs63dC0QuDJi
<body>
<section id="page-1">
This is page 1. It takes the whole height of the browser. User has to scroll down to see page-2.
</section>
<section id="page-2">
<span class="animated bounce">This is page 2 </span>
</section>
</body>
Animation classes are being applied to different elements in #page-2.
However by the time the user scrolls down to these elements, the animation has already finished. Hence they just look like static objects.
Is there anyway I can detect when #page-2 is currently being viewed and then call a function to addClass('animated bounce') to certain elements ?
I would like to achieve this in angularjs if possible
I have found a angularjs directive that is probably helpfull for you in this case. Inview tries to solve this exact problem by reporting to you if a dom element is visible on the screen. Unfortunately I have been unable to test my solution because I couldn't find a minified js file of Inview but I assembled some code that should work:
<section id="page-2" in-view="{$inview ? isFocused=true;}">
<div ng-class="{'animated bounce': isFocused}">This is page 2 </div>
</section>
The $inview is supposed to be true whenever the element is in visible in the browser. This leads to the scope variable isFocused being set to true and therefor the animation class is added to your div.
This should work as you have intended in your question, if it does not work for some reason please let me know so I can improve my answer.

Preload nested ng-includes

I'm using AngularJS to "include" html partials in my web app. I'm using a nested ng-include for this.
I also have an animation on the outer most ng-include. It all works fine. The only problem is that the outer ng-include template is loaded first. Then the included HTML file also has an ng-include which also loads an HTML file.
The last included HTML file causes the div to suddenly expand in size and that makes the animation look jumpy and weird.
This problem could be solved if all the nested ng-includes could be preloaded somehow. Is something like that possible in AngularJS?
The code I have looks something like this:
My main view:
<div class="animation-grow-in animation-grow-out" ng-repeat="myList">
<div ng-include"base-partial.html"></div>
</div>
The base-partial.html file:
<div ng-switch="myList.type">
<div ng-switch-when="file1">
<div ng-include="'file1.html'"></div>
</div>
<div ng-switch-when="file2">
<div ng-include="'file2.html'"></div>
</div>
</div>
The file1.html and file2.html contain forms.
But because filex.html is loaded with a delay that makes it all look jumpy. So is there a solution for this problem? Can I preload all nested ng-includes?
You can use angularjs template caching service to cache your template. When boot strapping your application, put all your templates inside a cache so that it will not make XHR calls for your templates.
https://docs.angularjs.org/api/ng/service/$templateCache

angular js reloading view

I'm using Angular JS and Angular IU-Router in my project and using a lot of ui-views. I have a situation where I need to change the language of the site, therefore I need to swap my ui-view's model to another model with the relevant language. I already have a service that detects the relevant model and passes it into the ui-view's controller. So if I can reload the ui-view, then in theory my problem would be solved.
I recall reading something about automatically reloading a ui-view (or possibly an ng-view) and re-instantiating its controller, but after much searching I haven't been able to find that information again.
Does anyone know what it is I'm looking for?
1 Take a look at angular-translate
https://github.com/PascalPrecht/angular-translate
2 In your case, add some if-else control ( ng-if, ng-switch etc. ) in the outer div, use the same subview in the inner div. Then change the settings.currentLang when the language changes may cause the subview reload (not tested).
<div ng-controller="containerCtrl">
<div ng-if="settings.currentLang=='en'">
<div ui-view='subview'></div>
</div>
<div ng-if="settings.currentLang=='ja'">
<div ui-view='subview'></div>
</div>
</div>

Resources