When a newline occurs, the text of a list didn't align at the same x-position as the beginning. How do I go about modifying the class name or are there any alternative that leave left margin?
<script src="https://cdn.tailwindcss.com"></script>
<div class="m-50">
<ul class="w-1/4 mx-auto bg-cyan-500 list-disc list-inside">
<li>List number 1 always goes first</li>
<li>List number 2 is second</li>
<li>List number 3... is stackoverflowed</li>
</ul>
</div>
Related
I am trying to choose an element("Classic") from a dynamic dropdown list. Problem is that word Classic contains 2 elements.
Html page is:
<ul id="dynamic-14" class="results" role="list">
<li class="results-dept result">
<div dynamic-102" class="results" role="option">
<span class="match"/>
</div>
</li>
<li class="results-dept result">
<div dynamic-12" class="results" role="option">
<span class="match"/>
Classic
</div>
</li>
<li class="results-dept result">
<div dynamic-1022" class="results" role="option">
<span class="match"/>
Classic numbers
</div>
</li>
I tried to do it with xpath using:
//ul[#class="results"] //div[contains(.,'Classic')]
but it gives me back 2 values so robot framework can't choose one I need.
user normalize-space() function to get rid of the leading and trailing whitespace.
//ul[#class="results"] //div[ normalize-space(.)='Classic']
I am encountering an issue with Jquery Mobile :
I want to display a grid of items using three columns. Each new item must be displayed next to the previous one and begin a new line after the third column.
To give you an example, I want something like this : JSFiddle
But my items have to be items from a splitButtonList (an icon with labels on the left and a clickable button on the right) instead of the blocks from the previous example.
The problem is : when I use the kind of code shown below, each new item is display at the bottom of the previous one, like in a list. I cannot manage to display it using my three columns grid pattern JSFiddle.
<body>
<div data-role="page" data-theme="c" id="projets">
<div data-role="header" data-position="fixed" data-theme="f" data-tap-toggle="false" id="banniere">
</div>
<div data-role="content" id="content">
<div class="ui-grid-b">
<ul data-role="listview" data-split-icon="star" data-split-theme="a" class="listview">
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
</ul>
</div><!-- /grid-b -->
</div>
<div data-role="footer" data-position="fixed" data-theme="f" data-tap-toggle="false" id="footer">
</div>
</div>
</body>
Do you have any idea of what to do ? Using CSS maybe ? Any clue would be very precious for me. Thank you
How about this? JSFiddle
You were basically missing the 3 child containers of the grid:
<div class="ui-grid-b">
<div class="ui-block-a">Listview 1 goes here...</div>
<div class="ui-block-b">Listview 2 goes here...</div>
<div class="ui-block-c">Listview 3 goes here...</div>
</div><!-- /grid-b -->
So, as you can see you will need three different listview.
Hope this helps!
I want find the numberof lis items (li) in html below:
<div class="li-control-block">
<div class="inner">
<a class="scroll-left" href="?slideId=7">
<img width="59" height="30" alt="btn-hero-promo-slider-left" src="/c/images/btn-hero-promo-slider-left.png">
</a>
<ul class="slides-8">
<li class="first">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li class="">
6
</li>
<li class="">
7
</li>
<li class="last on">
</ul>
<a class="scroll-right" href="?slideId=1">
</div>
</div>
I have tried code below but that comes back with "12345678" which gives me size of 1.
So how can I get the size to be equal to 8 ?
List<WebElement> list=null;
list = driver.findElements(By.cssSelector(".slides-8"));
int length = list.size();
Try doing
WebElement temp = driver.findElement(By.classname("slides-8"));
List<WebElement> list = temp.findElement(By.xpath(".//li"));
System.out.println(list.size());
Your example works as expected; your code requests the number of elements which have a class of "slides-8", which is the list container. Then you ask for how many elements that is, and it's one -- just one container.
Either apply a CSS class to each list element, or ask the container for the count of its elements.
you can try using cssSelectors as well,
List<WebElement> list = driver.findElements(By.cssSelector(".slides-8 > li"));
int length = list.size();
When nesting grids in Foundation 4 do I have to wrap the nested elements in a div with a class that has the attribute row?
For example, here is my current code:
<ul id="games" class="row">
<li class="small-6 large-3 columns">
<ul class="row">
<li class="large-5 columns">Image</li>
<li class="large-7 columns">
<p>£35 Free</p>
<dl>
<dt>Deposit:</dt>
<dd>£10</dd>
<dt>Balance:</dt>
<dd>£45</dd>
</dl>
</li>
</ul>
</li>
</ul>
In the example above the second UL has the class row, does this class need it?
I can't help think that there's to much nesting going on in my example. It doesn't feel comfortable.
In the example above the second UL has the class row, does this class
need it?
I would say it does need it only because of the following reason. Removing the row class from the inner container element will make it push its content into a smaller area. Adding the row class reduces the margin and allows you to have a wider content area.
So why would you need it? Unless you have a good reason why you would want to have those extra spaces (margin) around your container element, then you do need to add the row class.
The example from Foundation 3 explains how to set up tabs using lists but how do you use the tabs with a div layout?
<dl class="tabs">
<dd class="active">Simple Tab 1</dd>
<dd>Simple Tab 2</dd>
<dd class="hide-for-small">Simple Tab 3</dd>
</dl>
<ul class="tabs-content">
<li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
<li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
<li id="simple3Tab">This is simple tab 3s content.</li>
</ul>
<div class="tabs-content">
<div class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
<div id="simple2Tab">This is simple tab 2s content. Now you see it!</div>
<div id="simple3Tab">This is simple tab 3s content.</div>
</div>
Add the divs in the list item.
<ul class="tabs-content">
<li class="active" id="simple1Tab">
<div>This is simple tab 1s content. Pretty neat, huh?</div>
</li>
<li id="simple2Tab">
<div>This is simple tab 2s content.</div>
</li>
<li id="simple3Tab">
<div>This is simple tab 3s content.</div>
</li>
</ul>