I have this link in list with some inputs inside:
<ul class="code__list">
<li class="code__item"> <a class="code__link private" href="#">Test1<b><input type="text" class="intercomInput forCode" name="clientCode" value="1234"></b><div>Test2</div></a>
</li>
</ul>
How to place it in one row?
Fiddle
Replace your div with a span, or set the CSS display property to inline or inline-block as below.
<ul class="code__list">
<li class="code__item">
<a class="code__link private" href="#">Test1
<b>
<input type="text" class="intercomInput forCode" name="clientCode" value="1234">
</b>
<div style="display: inline-block">Test2</div>
</a>
</li>
</ul>
Instead of using div you can use span, because div is block element and span is inline, this is why your content is not showing in one line.
Try this:
<ul class="code__list">
<li class="code__item"> <a class="code__link private" href="#">Test1<b><input type="text" class="intercomInput forCode" name="clientCode" value="1234"></b><span>Test2</span></a>
</li>
</ul>
Updated Demo
Related
I have the following markup:
<ul>
<label class="radio-label" for="${response[i].name}"><li><span>${freightName}:</span> ${response[i].price},-</li></label>
<input class="radio-input" type="radio" id="${response[i].name}" name="drone" value="${response[i].name}-radio-value">
</ul>
I get this as the result:
Result
I tried to set the label to position: absolute; but this just makes it more difficult to space vertically after, is there anyone who can give me a tip or two? Any help is greatly appreciated !
Cheers!
First, you're using HTML tags incorrectly. Please don't put any other tags in <ul> except <li>.
Refer:
ul tag documentation
You might try something like this, which would put a label on top of a list item with radio button:
<ul>
<li>
<label>Label</label>
<input class="radio-input" type="radio">
<span>hi</span>
</li>
</ul>
label {
display: block;
}
li {
list-style: none;
}
Codepen link
You are using the <ul> tag and the <li> tag incorrectly. Here is the correct structure:
<ul>
<li>
any tags
</li>
<li>
any tags
</li>
<li>
any tags
</li>
</ul>
Do it like this, wrapping it in a <li>...</li> tag.
<ul>
<li>
<label class="radio-label" for="${response[i].name}"><span>${freightName}:</span> ${response[i].price},-</label>
<input class="radio-input" type="radio" id="${response[i].name}" name="drone" value="${response[i].name}-radio-value" />
</li>
</ul>
Here is my HTML
<ul class="menu">
<li class="menu__item">
</li>
<li class="menu__item">
<ul class="list"> // can I place this block inside here?
<li class="list__item">
...
</li>
<li class="list__item">
...
</li>
</ul>
</li>
</ul>
In this case, I place the block list inside the element menu__item.
I wonder, is this legal?
As per this documentation from BEM, we can nest the blocks. I.e. a block can have another block in it.
The only condition is that the children blocks should be independent on the parent.
https://en.bem.info/methodology/block-modification/#placing-a-block-inside-another-block
Yes, it is valid. See example from section Nested Lists
in - https://html.com/lists/.
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
i am using below code
<div>
<div id="aboxound" >
<ul>
<li class="aHeader" >
<ul>
<li class="Name">Names</li>
<li class="Name">values</li>
</ul>
</li>
<li style="height:500px; overflow-y:scroll;">
<c:forEach items="${dataModel.List}" var="entry">
<li class="aUser" >
<ul>
<li class="userName"><c:out value="${entry.key}" /></li>
<li class="userName"><c:out value="${entry.value}" /></li>
</ul>
</li>
</c:forEach>
</li>
</ul>
</div>
</div>
Here i want to apply scroll to second list, by keeping first list as fixed header. My above code is not working.it add empty scroll first and then list item without scroll. What i am doing wrong
If you write overflow:scroll even the not content not heavy it shows scroll, use overflow:auto in your code inplace overflow-y:scroll.
I'm trying to make these wo sections at the same line where the <ul> section at right and the <span> section, but, I can't find how.
PS: I use here bootstrap.
<ul class="pagination pagination-sm">
<li class="disabled">«</li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
<li>5 </li>
<li>»</li>
</ul>
<span>
<span class="glyphicon glyphicon-plus"></span><span style="margin-left:10px;margin-right:6px;">Nouveau</span> |
<span style="margin-left:5px;"><span class="glyphicon glyphicon-arrow-up"></span><span style="margin-left:10px;"></span></span>|
<span style="margin-left: 5px;"><span class="glyphicon glyphicon-arrow-down"></span><span style="margin-left:10px;"></span></span>
</span>
Any suggestion, please ?
Thanks a lot !
Something like this would work:
EXAMPLE HERE
.pagination.pagination-sm + span {
vertical-align:top;
display:inline-block;
margin:25px 0 25px 10px;
}
Make the adjacent span element inline-block, align it to the top and add margins to match the .pagination element. This assumes that the markup will remain the same.
Try adding divisions around the two parts, and floating the two divisions next to each other. Here's a jsfiddle. See the CSS to see how to float.
<div class="cont-1">
... pagination code ...
</div>
<div class="cont-2">
... span and anchor codes ...
</div>
At the end of the code, make sure to clear your floats.
<div class="clear"></div>