I have a "menu" component that I am trying to make live API calls from during rendering - thus it needs to be "server" rendered vs static. This is in the _Host.cshtml.
For some reason the CSS classes I am wrapping it with do not render when it's "server" rendered, but work fine when it's static.
<div class="main-menu menu-fixed menu-light menu-accordion menu-shadow" data-scroll-to-active="true">
<component type="typeof(AppFrdb.Shared.MainMenu)" render-mode="Server" />
</div>
I tried "ServerPrerendered", in that case, the menu component appears, but none of the icons referenced in it appear (they are all also CSS based)
Help would be very appreciated.
Related
I have an Angular component called folder-browser which serves as a folder browser. It displays the folders in a vertical list, and when a folder is opened it displays folders within that folder if there are any:
Here is the HTML for this:
<div *ngFor="let element of folders">
<div class="folder" (click)="selectFolder(element)" [ngClass]="{'selected': checkSelected(element)}">
<div class="chevron-container">
<img class="chevron-icon" src="{{getChevronIcon(element)}}">
</div>
<img class="folder-icon" src="{{folderIcon}}" />
<span class="folder-name">{{element.name}}</span>
</div>
<div class="sub-folders" *ngIf="element.expanded">
<folder-browser [folders]="element.children"></folder-browser>
</div>
</div>
My question is about the two <img> elements (there are three distinct SVGs—the chevron img element uses either a down chevron or a right chevron). As you can see, these img elements are used many times; not only are they inside an *ngFor div, this folder-browser component is used recursively to display subfolders.
The src of these img elements points to a CDN. Looking at the network tab of Chrome dev tools, I can see that each folder-browser component that is initialized makes three calls to the CDN for the three image types. Additionally, every time a folder is opened and closed (which switches the chevron between facing down and right), the down and right chevron SVGs are loaded from the CDN.
Since there are only three different SVGs being used, I would like the browser to only load each one once and then use the cached image for each subsequent img element. This seems to happen to some extent, since only one request is made per image type when the component is initialized as opposed to however many folders are in the *ngIf. However, when initializing a new instance of the same component it would be nice if it would use the cached images since they are the same.
Is there a built-in way to do this?
I am using Foundation 6's tabs as described here: https://foundation.zurb.com/sites/docs/tabs.html
I want deep links, so I put the attribute data-deep-link=true. This works fine, but as the contents of the different tabs are of different length, the site jumps up and down when switching tabs.
Is there a way to allow deep linking without scrolling to content in Foundation 6?
(I read that this was possible with Foundation 5, with scroll_to_content: false, but I did not find any documentation about this with Foundation 6.)
To explain it a bit more, just with one tab entry:
<ul class="tabs" data-tabs data-deep-link="true" data-deep-link-smudge="true" data-update-history="true">
<li class="tabs-title is-active">
link
</li>
</ul>
And below, the tab content container:
<div class="tabs-content" data-tabs-content="device-manager-tabs">
<div class="tabs-panel is-active" id="jumpToTab"></div>
</div>
From Browser's point of view, the jump to #jumpToTab is correct. But I would like to avoid it anyway, maintaining the functionality of Foundation. If Foundation would be able to use a custom attribute (such as data-tab-id instead of id, which is interpreted by browsers as well), it would be no problem.
Try adding data-auto-focus="false" to your tab container.
I am having an issue where I believe Angular2 is interfering with how it handles normal anchor tags in HTML. I have several links within the page under "Content2" with attempts in referencing sections of that page.
<div id="navigation">
<a [routerLink]="['#section01']" fragment="section01" style=background:magenta>Section 1</a><br/>
<a [routerLink]="['#section02']" fragment="section02" style=background:cyan>Section 2</a><br/>
<a href="#section03" style=background:yellow>section 3</a><br/>
<a href="#section04" style=background:red>section 4</a><br/>
<a [routerLink]="['/content02']" fragment="section05" style=background:green>Section 5</a><br/>
</div>
My goal is to allow the navigation bar to serve as a navigation tool that sits outside of the HTML I am trying to call, but is still able to directly link sections within the HTML, in this case to Content2.
Here's the Plunker to my predicament:
https://next.plnkr.co/edit/MFtSgY0e57nAG6D5
I have even tried to reference the HTML with a direct routerLink from the navigation bar but it will not comply. I'm sure I am missing something very fundamental to Angular2 routing. Or perhaps I'm missing how the routes should have been structured in the first place.
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
I am new to dojo / dojo mobile.
I am building a screen with a header and a list of items beneath. Very
classical in mobile apps.
<body id="content" style="display: none">
<div data-dojo-type="dojox.mobile.ScrollableView" id="mainView"
data-dojo-props="selected:true,scrollDir:'v'">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Main',fixed:'top'"></h1>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList" style="margin-top: 0px;">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Take Picture...',
icon:'images/plus-30.png',
url:'TakePicture.html',
transition:'slide'">
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/PhoneGapDemo.js"></script>
<script src="js/messages.js"></script>
Problem : the first item on the list is hidden behind the header and not
visible.
(Same rendering in IBM Rich Page Editor, IBM Mobile App Simulator, Apple iOS
Simulator and iPhone iOS6)
I juste started the project, I don't have fancy CSS or other ... just
started from scratch, added the ScrollableView, the Header, the
EdgeToEdgeList and then the ListItems.
Workaround is to apply a style on the EdgeToEdgeList to move it 40px down.
But it is not clean and breaks cross-platform compatibility (what if the
header is not always 40px height ?)
I am using DoJo 1.8
Thanks
Seb
Hi even im new to this worklight, well im not sure but got to the properties (go to the design and right click on the edge-to-edge list and select properties) you can see the tag, style , Layout, All options.
go to styles and click the properties and change the postion / lay out. it might help.
please let me know if you get that right.
Solution is twofold
use style="visibility:hidden" in element, as following
<body id="content" style="visibility:hidden">
load "mobileDeviceTheme" explicitly with a element instead of letting Dojo load it asynchronously (this module needs to be loaded early to allow for proper height calculation)
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
before (the load of dojo/dojo.js)
Seb