Basically for one of our accessibility requirements, we have to make explicit list markup using role="list" and role="listitem".
One issue I face is trying to do this on a search page with search results. Each search results, however, are wrapped in a 'row' div.
so it's:
<div role="list">
<div class="row">
<a role="listitem"
</div>
<div class="row">
<a role="listitem"></a>
</div>
<div class="row">
<a role="listitem"></a>
</div>
</div>
^ what i want to do.
The screen reader, however, reads out that it's only 1/1 list item. Any way i acn fix this?
Your role="listitem" should go on the "row" <div>. The only children of row="list" that are allowed are listitems.
<div role="list">
<div class="row" role="listitem">
<a></a>
</div>
<div class="row" role="listitem">
<a></a>
</div>
<div class="row" role="listitem">
<a></a>
</div>
</div>
Related
Below is my HTML code :
<div class="main">
<div class="box">
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link1</a>
</div>
<div class="cell">type</div>
<div class="cell">description</div>
</div>
<div class="box"> //i want to click this element
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link2</a>
</div>
<div class="cell">type1</div>
<div class="cell">description1</div>
</div>
<div class="box">
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link3</a>
</div>
<div class="cell">type2</div>
<div class="cell">description2</div>
</div>
</div>
I'd like to click on the div with the class box containing the <a>link2</a> tag.
I have tried this :
cy.get(`.main>div`).contains('link2').click();
This clicks on the link element itself, but I'd like it to click the div element that contains it (the <a>link2</a> tag) instead.
Is there any way to do this?
I'm looking forward to any tips and solutions you might provide.
Thanks.
You could try getting the link2's parent element which is the div you want to click, in the following way:
cy.get(`.main>div`).contains('link2').parent().click();
I believe you can use a selector in 'contains' itself like below
cy.contains('.main>div', 'link2').click();
I am trying to get title text to wrap around a span object so far I have managed to get it to line up where I want everything but I just can't get the final part (the wrapping) to obey...I suspect it has something to do with the way that the text is in a different container but if I remove the container it upsets the rest of the formatting,
<div class="row px-3">
<div class="jumbotron">
<span class="float-right d-flex ">
<div class="align-self-center mr-1">Submitted by</div>
<div class="btn-group">
<button class="btn">User</button>
<button class="btn btn-info"></button>
<button class="btn btn-danger"></button>
</div>
</span>
<h1 class="d-flex">
<div id="title">A very long post title that needs to be long enough to see if the wrapping is working or not</div>
</h1>
<div id="body">a short body underneath the title</div>
</div>
</div>
JSFiddle of example code
As the title suggests I am using bootstrap 4. Any advice would be greatly appreciated...
I got your issue, basically, your usage of tags is not proper.
Element div not allowed as child of element span/h1 in this context.
Check the fiddle link out, it solves your problem. Fiddle
<div class="row px-3">
<div class="jumbotron">
<div class="float-right">
<div class="">Submitted by
</div>
<div class="btn-group">
<button class="btn">User</button>
<button class="btn btn-info"></button>
<button class="btn btn-danger"></button>
</div>
</div>
<p id="editor-title">A very long post title that needs to be long enough to see if the wrapping is working or not sdjfs dakjsd askjdhas dkjashd asdjkhasd askjdhas dasjdasdkjasd asdkjhasd djkf dfuieywrbewrgew weruwe</p>
<div id="editor-body">a short body underneath the title</div>
</div>
</div>
I would advise you to use W3C HTML checker.
I'm trying to bulid grids like the photo below
IMG LINK: http://postimg.org/image/qo3b4nof1/
But i'm getting the DIV E in almost next to the D-DIV
here's my code
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="col-md-1">A</div><br/>
<div class="col-md-1">B</div><br/>
<div class="col-md-1">C</div>
</div>
<div class="col-md-11">D<br/>
<div class="col-md-1">E</div>
</div>
</div>
</div>
The break-lines i added because DIV-A and DIV-B become one piece without breaklines.
is it better to do it with table ?
You do not need to use container and row with bootstrap 3.*
I changed you code to match the provided screenshot, see this http://jsfiddle.net/Sd2zw/ .
I just use xs columns because the small screen of jsfiddle, you can replace it back by md :
<div>
<div class="col-xs-1">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<span class="clearfix"></span>
</div>
<div class="col-xs-11">
<div class="col-xs-12 d-container">D</div>
<div class="col-xs-12">
<div class="col-xs-1">E</div>
<span class="clearfix"></span>
</div>
</div>
<span class="clearfix"></span>
</div>
Also, use some clearfix tags to clear the float.
What's the best way to use nesting.
Multiple spans inside row - dynamic content :
One row per 12 columns ?
OR, One row for ANY number of columns ?
Sample case n°1 - which one is the best & why ? :
<div class="row">
<span class="span6"></span>
<span class="span6"></span>
<span class="span6"></span>
<span class="span6"></span>
</div>
Or
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
Sample case n°2 - More levels to organise the content.
Here, use the div "my_margin" to add some margin at left & right - and you must have "first_row" around it.
So it's : row-->span10,offset1-->row-->SPANS
<div id="first_row" class="row">
<div id="my_margin" class="span10 offset1">
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
</div>
Or,
You shouldn't use the span10,offset1 but direct margin;
In that case, you must create rules for each #Media_size to make it responsive.
<div style="margin-right:XYpx; margin-left:XYpx" class="row">
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
</div>
Or - Spans are 'supposed' to be use for your main contents, and then you just play with css. So, something like that :
<div row>
<div class="span6">
http://jsfiddle.net/JkPhw/
<div class="span6">
<div class="span6">
http://jsfiddle.net/JkPhw/
<div class="span6">
</div>
To case n°1:
It depends, if you have for example a list of nine teasers where three teasers fill a line, I'd do it with one row:
<ul class="row">
<li class="span4"></li>
<li class="span4"></li>
<li class="span4"></li>
<!-- six more -->
</ul>
If you're using the grid for layouting a form, I'd make a row for each label-input pair:
<!-- one label-input pair does not fill the whole content width -->
<form>
<div class="row">
<label class="span3"></label>
<input class="span5" />
</div>
<div class="row">
<label class="span3"></label>
<input class="span5" />
</div>
<!-- and so on -->
</form>
I think you shouldn't make a grid and put your content in the different grid cells to layout it, but build semantically correct markup and apply the grid to layout the content (tiny difference).
PS: keep box-sizing in mind.
To n°2:
I don't quite get the idea there, if you're using the grid, you shouldn't apply left/right-margin to it. The grid depends on its horizontal margins to work properly... if you have to change this to match your frontend with the design it's probably not in the grid anymore.
Update: I'd most certainly use your first example though, if you have smaller content. But use the correct grid span widths:
<article class="row">
<header class="span12"></header>
<div class="span10 offset1">
<div class="row">
<div class="span5"></div>
<div class="span5"></div>
</div>
</div>
</article>
(Before I start, yes I have asked a similar question before; unfortunately due to new information being added, the markup has completely changed for the worse, and it's now impossible for me to figure out.)
I have some very ugly markup generated by a Drupal view. Because many of the class names can be used in multiple places, in various levels of the hierarchy (for example, the first view-content/view-grouping/view-grouping-header needs to float left (or at least the contents of it do for the headshot image, but the other view-grouping-header elements need to display to the right of the image), I can't just address the class names; I need to get the full hierarchy. I'm having some trouble with that... (I know someone is going to come along and say, "but you can add classes to fields in Drupal views; why not do that?" Well, you can if you're displaying individual fields, but in this case I need to group by 5 of the 6 fields that are displayed, and when you group by a field you set the field itself to be excluded from the display, which means any custom classes you add to the field are ignored. The only thing you can do stylewise with grouping is apply a single class to all rows, which I've done but doesn't help in this case.)
<div class="view-clone-of-speaker-list">
<div class="view-content">
<div class="view-grouping">
<div class="view-grouping-header">
<div id="file-741" class="file file-image file-image-jpeg
contextual-links-region">
<div class="content">
<img src="johndoe.jpg" width="180" height="180" alt="" />
<!-- this img needs to float left -->
</div>
</div>
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
John Doe
<!-- this view-grouping-header a needs to be styled differently
than the one the next level down (view full profile) -->
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
Freelance consultant
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
Path to Purchase Institute
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
<a href="/speaker/john-doe">
view full profile ></a>
</div>
<div class="view-grouping-content">
<h3>Sessions:</h3>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title-1">
<span class="field-content">
Keynote Address 2
</span>
</div>
</div>
<div class="views-row views-row-2 views-row-even views-row-last">
<div class="views-field views-field-title-1">
<span class="field-content">
Keynote Address 1
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is what I've tried, for example, to get the outer view-grouping - I want to put a border around the entire thing:
.view-clone-of-speaker-list.div.view-content.div.view-grouping {
border: 1px solid #a8a8a8;
}
But according to Firebug the element is not getting that style.
Here's the desired outcome; I don't need help (I don't think!) with the actual style code; I just need a hand figuring out how to address the correct elements given how frakkin' awfully they're nested.
A period on a selector means "class"; div.myClass means a div with a class of myClass. div.myClass.div.myOtherClass doesn't mean anything.
I think what you want is
div.view-clone-of-speaker-list>div.view-content>div.view-grouping {
border: 1px solid #a8a8a8;
}
That means "a div with a class of view-grouping, which is a child of a div with a class of view-content, which is a child of a div with a class of view-clone-of-speaker-list".