I have 3 UL inside a div. 2 UL contain a directive that checks if the user is authenticated or not. like so:
<div class="language-options">
<ul>
<li>
<a>
<select box></select box>
</a>
</li>
</ul>
<!-- Show this for logged out users -->
<ul *appShowAuthed="false">
<li>
<a>
Sign in
</a>
</li>
<li>
<a>
Sign up
</a>
</li>
</ul>
<!-- Show this for logged in users -->
<ul *appShowAuthed="true">
<li>
<a>
Home
</a>
</li>
<li>
<a>
<i></i> New Article
</a>
</li>
<li>
<a>
<i></i> Settings
</a>
</li>
<li>
<a>
<img [src]="currentUser.image" *ngIf="currentUser.image" class="user-pic" /> {{ currentUser.username }}
</a>
</li>
</ul>
</div>
What is happening is that although my language-options select box is before in the html code then the other 2 ULs it displays after them in the page:
[ Sign in | Sign up ] [ select box ]
It seems that due to the directive execution that the html code takes longer to render and as suchs displays before the language-options.
How an I set the language-options UL to display before the Sign in | Sign up? see below:
[ select box ] [ Sign in | Sign up ]
This is related to the css: float: right.
Related
I would like to make a profile menu like in Gmail what contains the user's display name and his user name and also two buttons with settings and logout. I would like to make it in angular 8.
http://prntscr.com/q1vd8y
<li>
<!-- user profile -->
<div class="profile">
<img class="avatar" src="" /><span></span>
<!-- more menu -->
<ul class="menu">
<li class="name">{{name}}</li>
<li class="name">{{useremail}}</li>
<li class="name">{{visiblename}}</li>
<li>Settings</li>
<li><a [routerLink]='["/logout"]'>Log out</a></li>
</ul>
</div>
</li>
</ul>
https://material.io/design/
here it is, my friend, the one and only, Material Design !
you can find css frameworks that will help you do it like
https://materializecss.com/
for example !
https://material.angular.io/ for angular
I am trying to use the 'fixed' class in foundation to keep my topbar fixed at the top when a user scrolls down.
When using it the body of the page goes behind the top navigation bar.
First 3 lines are not visible. I thought about simply pushing it down by creating a margin or some padding at the top. But that won't actually work as the heigh of the top nav bar is not static, it responds to the width of the window.
I have the code here:
http://jsfiddle.net/ancv8bsw/1/
$(document).ready(function () {
$(document).foundation();
})
<div class="contain-to-grid fixed">
<nav class="top-bar" data-topbar data-options="is_hover: false">
<ul class="title-area">
<li class="name">
<h1>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Projects
</li>
<li>
Investments
</li>
<li>
Contact Us
</li>
<li>
Contact Us
</li>
<li>
Contact Us
</li>
<li>
Contact Us
</li>
</ul>
</section>
</nav>
</div>
<div>test1</div><div>test2</div><div>test3</div>
<div>test4</div>
<div>test5</div><div>test6</div><div>test7</div><div>test8</div><div>test9</div><div>test10</div><div>test11</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div>
as you can see when narrowing the window the top bar height increases.
Is there a way i can solve this without creating a static margin at the top?
Solved with JS:
$(document).ready(function () {
updateContentOffset();
$(window).resize(function(){
updateContentOffset();
});
function updateContentOffset() {
var offset = $('.contain-to-grid.fixed').height();
$('.content').css('margin-top',offset);
}});
http://jsfiddle.net/ancv8bsw/3/
This script looks to find the height of the container div and update the margin on the content accordingly. You might update your markup classes to something not so generic for the nav container.
I'm trying to give a different background-color to my button when it is active. The HTML code is as below.
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- some content -->
</div>
<div id="tab2" class="tab">
<!-- some content -->
</div>
<div id="tab3" class="tab">
<!-- some content -->
</div>
<ul class="tab-links">
<li class="active">
<a href="#tab1"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON ACTIVE</p></p></a>
</li>
<li>
<a href="#tab2"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
<li>
<a href="#tab3"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
</ul>
</div>
</div>
I used both this codes in my CSS files and i didn't sow nothing happened:
This is the CSS code for my project:
.cmimet_ne_vite:active
{
background:#787878;
}
.cmimet_ne_vite.active
{
background:#787878;
}
So who knows were is the problem to help me resolve it?
You have no element with both classes "cmimet_ne_vite" and "active". Instead you have a .cmimet_ne_vite element which is a descendant of your .active element, so instead of .cmimet_ne_vite.active you'll need to use:
.active .cmimet_ne_vite {
background:#787878;
}
Furthermore, you cannot wrap two <p> elements within each other. The browser will render this as two separate elements. Change:
<p class="arrow-up">
<p class="cmimet_ne_vite">BUTTON</p>
</p>
To:
<p class="arrow-up">
<span class="cmimet_ne_vite">BUTTON</span>
</p>
Or something similar.
Finally, if this element is intended to be used as a button you'll need to give it a role attribute set to "button":
<span class="cmimet_ne_vite" role="button">BUTTON</span>
How can I delete all thoses div around my menu create with menu_block for drupal 7 ?
I want to change this :
<div class="region region-nav">
<div class="content">
<div class="menu-block-wrapper menu-block-3 menu-name-menu-prive parent-mlid-0 menu-level-2">
<ul class="menu">
<li class="first expanded menu-mlid-559" style="width: 397px;">
Avantages
<ul class="menu">
<li class="first leaf menu-mlid-596">
Ecologie
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
into this :
<ul class="menu">
<li>
link
<ul class="menu">
<li>
link
</li>
</ul>
</li>
</ul>
Thank you
You will need to add new templates for your block and the region that holds it, in order to get rid of some of the markup.
Take a look at Drupal 7 Template Suggestions
Your block template name would look like this: block--menu-block.tpl.php. And for the markup, can be just
<?php print $content ?>
The region template name would look like this `region--YOUR_REGION_NAME.tpl.php``. And for the markup, can be just
<?php print $content ?>
(Don't forget to flush the caches after adding the new templates)
I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page