I am trying to find the list item based on the contents in the span.
I tried using //li/a[contains(., 'Business')]
It is working for unique items, But here, it gives a list because it is matching more than one.
I want to ignore the inner span and only focus on the span text to identify the li. How can i achieve it?
<li style="display: list-item;">
<a href="#">
<span class="avoidwrap">
<span class="icomoon-cube3">
</span>
Business
</span>
</a>
</li>
<li style="display: list-item;">
<a href="#">
<span class="avoidwrap">
<span class="icomoon-cube3">
</span>
Business Something
</span>
</a>
</li>
The answer given by splash58 in comments worked,
//li/a/span[normalize-space(.)='Business']
Related
In the image you can see that if the title of the sidebar link is too long it goes to the next line. However it starts where the icon is located and not where the start of the span is. How would I style the class "side-nav-item" to where it will format where Administrator when it is shifted to the new line it starts where Give is.
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#userAccess" aria-expanded="false" aria-controls="userAccess"
class="side-nav-link">
<i class="uil-layer-group"></i>
<span>User Access</span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="userAccess" data-bs-parent="#accordion">
<ul>
<li class="side-nav-item">
<a href="/task/add-location-access" class="side-nav-link">
<i class="uil-shield-check"></i>
<span> Give user access - Administrator</span>
</a>
</li>
<li class="side-nav-item">
<a href="/task/remove-location-access" class="side-nav-link">
<i class="uil-shield-slash"></i>
<span> Remove</span>
</a>
</li>
</ul>
</div>
</li>
Style <span> inside <a></a> as an inline-block. The behaviour you are seeing is expected from inline elements like <span> and <i>. Checkout concepts of inline elements, block elements and 'display' property in CSS. I am assuming you are new to HTML and CSS, so I suggest you begin with a good hands on video tutorial.
try this ,
<span
style="width:400px;text-align:start;height:max-content;"
>
Give user access - Administrator
</span>
Tab Index for Absolute-Position Elements
For the time being, lets assume I wrote the code below:
<header class="header hap" [ngClass]="authority">
<div class="header-inner">
<div class="header-identity">
<a id="theLogo" class="logo" [routerLink]="[links.home]" title="Navigate to Home">
<img src="assets/logo-white.svg" alt="Logo">
</a>
<span class="client-logo" *ngIf="user.brandingImage && !user.isTheAdmin()">
<img class="brandingImage" [src]="user.brandingImage" [alt]="user.brandingName" onerror="this.style.display='none'">
</span>
[ more links ]
</div>
<nav class="main-nav for authenticated" [ngClass]="{'active':showMenu, 'app-only':!isCurrPageAdminApp()}">
<button class="menu" (click)="toggleMenu()">Menu</button>
<div class="main-nav-flyout" *ngIf="showMenu">
<div class="nav-header">
<ul>
<li>
<a id="main-nav-profile" [routerLink]="['/profile']"><span class="icon icon-user2"></span> My Profile</a>
</li>
[ more dropdown items ]
</ul>
<a id="main-nav-close" class="close"(click)="onClickMenuClose()"><span class="icon-cross"></span></a>
</div>
<div class="nav-body">
<ul *ngIf="isCurrPageAdminApp()" class="main-nav-list">
<li class="current-app">Administrative Tools</li>
<li><a id="main-nav-xAdmin" *ngIf="user.isTheAdmin()" [routerLink]="['admin/x']">X Admin</a></li>
[ more links ]
<li>
<span>Reports</span>
<ul>
<li class="user-status"><a id="main-nav-userStatusReport" [routerLink]="['admin/reports/userStatus']">User Status</a></li>
[ more links ]
</ul>
</li>
</ul>
<ul class="app-list" *ngIf="user.userApplications">
<li *ngIf="showTheLink()">
<a id="app-list-type" [routerLink]="['/']">
...
</a>
</li>
[ more links ]
<li *ngFor="let application of user?.userApplications">
<a id="app-list-{{application.abbreviation}}" *ngIf="!isAdminApp(application)" (click)="onClickMenuItem(application)">
{{ application.title }}
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="user-nav for authenticated" role="menu">
<span *ngIf="user.brandingName" class="user-location">{{user.brandingName}}</span>
<span *ngIf="user.brandingName" class="pipe">|</span>
<a id="user-nav-profile" class="user-name" [routerLink]="['/profile']">
<span class="name">{{user?.firstName}} {{user?.lastName}}</span>
</a>
<a id="user-nav-logout" class="logout" [routerLink]="['/', 'logout']">Log out</a>
</nav>
</div>
</header>
Issue
Various elements -- probably .header-inner > * -- are styled using position: absolute;, so the tabindex-order is skewed for elements which are declared later in the markup but positioned geometrically earlier in the layout.
Question
Is there a way to force the tabindex to be, say, all natural indices (0) except for 2 items that need to be switched -- in a scalable way while not having to implement tabindex for every new item in the layout?
The short answer is no, it's not possible to switch only two elements without at least adding tabindex to every element in the flow that has to be focused before those two elements.
All elements with positive tabindex will be focused first in an incremental way, or in their source order if they have the same value, and all elements with default value or zero will be focused last.
So if you have 6 focusable elements and you want to have elements 5 and 6 to be focused after elements 1 and 2, you need something like this:
<input type="text" tabindex="1">1</input>
<input type="text" tabindex="1">2</input>
<input type="text">3</input>
<input type="text">4</input>
<input type="text" tabindex="1">5</input>
<input type="text" tabindex="1">6</input>
In general having the source order match the flow is the easiest way to make it work.
There is one particular case that is simpler. If the elements you want to move happen to be the first elements that need focus on your page, then in that particular case you can put the tabindex only on those elements.
For instance, if we wanted elements 5 and 6 be the first elements on the page, and everything else after them, all you need to do is this:
<input type="text">1</input>
<input type="text">2</input>
<input type="text">3</input>
<input type="text">4</input>
<input type="text" tabindex="1">5</input>
<input type="text" tabindex="1">6</input>
So in general, if the elements you want to change order are in the header, and they are the first things that should be focusable on your page, it should be easy to rearrange them and let the rest of the page flow naturally.
If the elements had to be last you are out of luck, you should either:
Put them last in the markup so they flow naturally
Remove them from the flow with tabindex=-1 and let the user focus manually
In my list element I want to place the control buttons aside, from the left of the list item text. In order to do that I use a property float: left;, it does the job, but when there are more than one line in a list, every new line has a padding of a size of the previous floating block:
The list is based on Vue.js & Bootstrap.
My CSS/HTML code:
<ul class="items">
<transition-group name="item">
<li v-for="item in items" :key="item.id" mode="out-in">
<span>
{{item.properties.NAME}}
</span>
<span style="float: left;">
<span class="fa fa-wrench"></span>Update
<span class="fa fa-trash-o"></span>Delete
</span>
</li>
</transition-group>
</ul>
How to display buttons inside the list on the right/left side of the list just one under the other?
The final result should be something like that:
Item #1_____________________________________Update___Delete
Item #2_____________________________________Update___Delete
Your issue should be solved by resetting or clearing the float that you’ve created. As you’re using bootstrap you can simply add the class clearfix to your li element that you have added float to. This will add a pseudo after element which will reset the flat after the element.
The final code snippet:
<ul class="items">
<transition-group name="item">
<li v-for="item in items" :key="item.id" mode="out-in" style="padding-bottom:10px;" clearfix>
{{item.properties.NAME}}
<span style="float: left;">
<span class="fa fa-wrench"></span>עדכן
<span class="fa fa-trash-o"></span>מחק
</span>
</li>
</transition-group>
</ul>
Try style="clear:left;". If that doesn't work, you would actually do the float or the clear left on the 'li' element, not on the span containing the buttons. This way each 'li' containing the buttons will contain the buttons themselves.
Try something to this affect below. Since there is not a JS Fiddle, editing code for what your needs are harder to edit.
<ul class="items">
<transition-group name="item">
<li v-for="item in items" :key="item.id" mode="out-in" style="float:left; clear:left; width:100%; display:block">
<span>
{{item.properties.NAME}}
</span>
<span>
<a href="#" class="btn btn-success btn-xs" #click="edit_item(item)">
<span class="fa fa-wrench"></span>Update</a>
<span class="fa fa-trash-o"></span>Delete
</span>
</li>
</transition-group>
</ul>
Kind of like this. Quick and dirty. Except on the elements, instead of inline styling, highly recommend CSS.
https://jsfiddle.net/y1x53zx2/1/
Hello Im having problems with foundation 6. In my footer there is a social list with 4 icons(phone, email, twitter, facebook) I cant get them to stay centered on resize. On my PC it seems fine, however, uploaded onto the web and viewed on my phone(nexus 6) the icons are off center to the left. here is my footer code
<footer>
<!--social icons should be centered -->
<div class="row">
<div class="large-3 medium-centered columns">
<ul class="menu social">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:12345678901 ;="">
<i class="fi-telephone"></i></a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
The site is www.gastromob.com. I could really use some suggestions on how to improve this site. I'm having several problems, but I'd like to fix this one first, thanks.
The class medium-centered that you use is meant to center a column within a row; it does not center the text inside that column.
Foundation 6 recommends using the <div class="menu-centered"> wrapper around the <ul class="menu">. If you're using Flexbox, you don't need the wrapper and can add the .align-center class to the ul element instead. Please click here for more information.
Using the row and column wrapper seems unnecessary here.
You could write your code this way to achieve what you need:
<footer>
<div class="menu-centered">
<ul class="menu">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:12345678901">
<i class="fi-telephone"></i>
</a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
By the way, href="tel:12345678901 ;="" is incorrect and should be href="tel:1234567890" instead.
I've also looked at your site, and noticed that you set a fixed height for the element <div id="overlay">. As a result, when viewing the site on a small device, this overlay spills over and covers the elements below it. You should simply remove the fixed height to solve this problem.
The boat logo also obstructs the view when shrinking the size of the screen. You may want to make it responsive as well.
Other than that, all the other elements are responsive and look good!
So I have a question that might be relatively simple, but I haven't been able to solve yet.
On my website, I have a of company logos that is within a div that breaks if you add any other divs for organizational purposes (because the first div is used for css animations and adding any other divs in it causes problems for some reason), which is preventing me from centering the second row's logos beneath the first row. I've been kindly warned about posting links so deleted that. Here is the relevant code (i'm hoping it's complete):
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="#">
<img src="x" />
<div><span>Account Management and Product Intern</span></div>
</a>
</li>
<li>
<a href="#">
<img src="x" />
<div><span>Advisory Board Member</span></div>
</a>
</li>
<li>
<a href="#">
<img src="x" />
<div><span>Biz. Intelligence and Web Specialist</span></div>
</a>
</li>
<li>
<a href="#">
<img src="x" />
<div><span>Marketing Manager</span></div>
</a>
</li>
<li>
<a href="#">
<img src="x" />
<div><span>Marketing Consultant</span></div>
</a>
</li>
<li>
<a href="#">
<img src="x" />
<div><span>Product Manager/Developer</span></div>
</a>
</li>
<li>
<a href="#">
<img src="X" />
<div><span>Tech+Data Lead/Advisor</span></div>
</a>
</li>
</ul>
Due to the sizes of the container and the images, these elements show up as 3 in the first row, 4 in the second. Does anyone have any solutions for this? I tried turning them into inline-block elements, or adding margins, but nothing really worked without specifying a new div for the second row's 4 elements.
Thanks in advance!
*Edit: Deleted link, sorry about that.
Is this what you are looking for?
ul{text-align:center;}
li{display:inline-block;}
jsfiddle: http://jsfiddle.net/UpG5M/
You might try to target the offending logos with the :nth-oftype CSS pseudo-class.
http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type