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.
Related
I'm trying to make 3 columns in a row equal height. I used row-equal-height, but nothing happens.
Here is my code:
<div class="row row-eq-height">
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Assisted-Living.jpeg" />
<div>
<h2>Assisted Living</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/assisted-living.png" />
Bridging the gap between seniors needing some help and being unable to care for themselves is the purpose of assisted living facilities...
...
</div>
</div>
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Memory-Care.jpeg" />
<div>
<h2>Memory Care</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/memory-care.png" />
Enhancing the life of seniors with memory impairment (due to Alzheimer’s, dementia, or aging) is to specifically enhance the dignity and well-being of each resident...
</div>
</div>
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Independent-Living.jpeg" />
<div>
<h2>Independent Living</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/independent-living.png" />
Engaging in a fulfilling lifestyle is so much more than where you live...
</div>
</div>
Here's the website in progress: https://ciminocarestg.wpengine.com/
It's the column of 3 under the hero (Assisted Living, Memory Care, and Independent Living) that I want to make equal height.
Thank you!
Thanks for sharing the visuals.
Your row-eq-height is working, but is just so happens that your content, within each column, is inside a nested child div element that is not impacted by row-eq-height.
For a quick and easy way to solve the issue, especially if your content is finalized, then add this CSS rule to your site...
.home .content-block div {
min-height:425px;
}
In the future, do either of the following:
If the content in any of your 3 columns expands, just simply adjust that min-height value.
If you don't want to depend on this technique, then pull out the nested divs that are in each column, so that the content is only 1 level deep, not 2.
In either case, UnderStrap is still an excellent choice for a theme and utilizing BootStrap.
I have a HTML code like this:
<ul aria-hidden="false" aria-labelledby="resultsPerPage-button" id="resultsPerPage-menu" role="listbox" tabindex="0" class="ui-menu ui-corner-bottom ui-widget ui-widget-content" aria-activedescendant="ui-id-2" aria-disabled="false" style="width: 71px;">
<li class="ui-menu-item">
<div id="ui-id-1" tabindex="-1" role="option" class="ui-menu-item-wrapper">20</div>
</li>
<li class="ui-menu-item"><div id="ui-id-2" tabindex="-1" role="option" class="ui-menu-item-wrapper ui-state-active">50</div>
</li>
<li class="ui-menu-item"><div id="ui-id-3" tabindex="-1" role="option" class="ui-menu-item-wrapper">100</div>
</li>
<li class="ui-menu-item"><div id="ui-id-4" tabindex="-1" role="option" class="ui-menu-item-wrapper">200</div>
</li>
</ul>
I want to click on "200". Can u help me? I used selenium in python 2.7
I tried doing this:
import time
time.sleep(10)
x=driver.find_element_by_link_text("200").click()
x.click()
time.sleep(8)
The problem here is that the element that contains the text 200 is not a "Link", but only a li tag which could work as a clickable element was defined on that site.
The documentation doesn't specify it directly, but "Link" means only a tags.
The idea is the same, but you'll have to find that element on a different way than thinking about as a Link. Using xpath would be I think the best way for this approach:
x = driver.find_element_by_xpath("//div[./text()='200']")
x.click()
Now of course that would work for finding an element depending on the text it contains, but for finding the specific node you want would be even easier and better to use the id, as it should always be unique:
x = driver.find_element_by_id('ui-id-4')
I can run it by use of "send_keys":
import time
number.click()
number.send_keys("200")
var200=driver.find_element_by_xpath("""//*[#id="ui-id-4"]""")
var200.click()
I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.
Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?
(Small aside: the line that mentions using other elements, I have a problem with: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. If a button is focusable, I expect to be able to trigger it with the spacebar. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)
I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?
The buttons tags are usable in foundation 5. There is not a lot of documentation on it but (and I tested it to make sure I was correct) the <button> tag works as normal.
The <a> tag is used on the example site sure, but that doesn't limit its use when working with it.
You should still use <button> with forms and use <a> for links.
If you look at adioso.com (they use foundation) and inspect their forms, they use buttons for functional uses outside of links.
<form class="flight_search" method="get" action="/search_form">
<div class="search_form_inputs">
<ul class="row">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
</ul>
</div>
<div class="search_sundries">
<div id="passengers" class="awesome-search">
<div id="submit-wrap">
###<button id="submit-btn" type="submit" class="search_button" tabindex="9">Find Flights</button>###
</div>
</div>
</form>
Check the above code. The example website isn't a very solid representation of what foundation can do but play with it a bit and you'll see its a very solid framework.
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'd just like to ask if this coding method is still valid.
<div class="one-third column">
<ul class="nav-link">
<li class="button">Going to put code here.</li>
</ul>
</div>
<div class="one-third column">
<ul class="nav-link">
<li class="button">Going to put code here.</li>
</ul>
</div>
<div class="one-third column">
<ul class="nav-link">
<li class="button">Going to put code here.</li>
</ul>
</div>
As you can see I'm repeating the unordered lists inside of the div class. This is necessary for me because I'm using Skeleton boilerplate and I need them to be in 3 columns, with the unordered lists.
I tried putting the list items inside the divs, but the validator states you cannot put div tags inside the unordered lists. So I'm asking if this method is still okay for me to use, since this website will be used as a public template. If there's an alternative way I can code this, please let me know. Thank you.