Have structure like this
<div style="overflow-x:auto; overflow-y: hidden; width: 100%; white-space: nowrap;">
<table>
<tbody>
<tr>
<td>
<select>
*some options*
</select>
</td>
</tr>
</tbody>
</table>
</div>
And when i clicked select first time scroll resets to leftmost position. When i clicked it 2nd time it stays at the current position. This selects created by Chosen library and for real looks like
<div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 215px;" title="">
<a class="chzn-single" tabindex="-1">
<span>selected option</span>
</a>
<div class="chzn-drop"><div class="chzn-search">
<input type="text" autocomplete="off" readonly="">
</div>
<ul class="chzn-results">
<li class="active-result result-selected" style="" data-option-array-index="0">Option2</li>
<li class="active-result" style="" data-option-array-index="1">Option3</li>
<li class="active-result" style="" data-option-array-index="2">Option4</li>
</ul>
</div>
</div>
Trouble was in .focus method on Chosen library. Close to dropdown method. Just comment this and it stop reseting scroll
Related
I am working with angular, html and css.
I build a widget that includes a table of 3*3.
For some reason, in the first upload - the table takes only 50 percent from the widget width.
It looks OK only after reload.
Does someone have an idea what could be the problem?
<div widget class="card">
<div class="card-header">
<span>Select service(s)</span>
<div class="widget-controls">
<a data-widgster="expand" href="#" class="transition"><i class="fa fa-chevron-down"></i></a>
<a data-widgster="collapse" href="#" class="transition"><i class="fa fa-chevron-up"></i></a>
<a data-widgster="fullscreen" href="#" class="transition"><i class="fa fa-expand"></i></a>
<a data-widgster="restore" href="#" class="transition"><i class="fa fa-compress"></i></a>
</div>
</div>
<table id="serviceTable">
<tr *ngFor="let eachService of [0,1,2]; let i = index">
<td *ngFor="let j of [0,1,2]" class="service-td" >
<div>
<input name="checkboxes" type="checkbox" (change)="changeListener($event, i+j)">
<span>osnat11111111</span>
</div>
</td>
</tr>
</table>
<br>
</div>
</div>
The css is:
.service-td
{
table-layout:fixed;
width:10vw;
overflow:hidden;
padding: 0.5vw;
}
Thanks,
Osnat
You can just try,
...
<div style = "width: 100%">
<table> ... </table>
</div>
width: 100% gives the same width of the CSS component to the child
Hi I am facing a very hard issue regarding tab order for accessibility.My tabs are functioned through jquery.ui.min.js. Tab order,classes & function are coming from there.Although all tabs are functioning properly but when i validate i am getting accessibility issue.Please suggest me other way.
I am looking for accessibility point of view only.One more thing this library adding blank style (style="") on every element.How can i remove it Please suggest.
<div class="tabs ui-tabs ui-widget ui-widget-content ui-corner-all" style="padding: 10px;">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" style="">
<li tabindex="0" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" aria-controls="tab-content4" aria-selected="true" style="z-index: 2147483646;">tab1</li>
<li tabindex="-1" class="ui-state-default ui-corner-top" aria-controls="tab-content1" aria-selected="false" style="">tab2</li>
<li tabindex="-1" class="ui-state-default ui-corner-top" aria-controls="tab-content2" aria-selected="false" style="">tab3</li>
<li tabindex="-1" class="ui-state-default ui-corner-top" aria-controls="tab-content3" aria-selected="false" style="">tab4</li>
<!-- <li>Others</li> -->
</ul>
<strong style=""> <a class="fl_r" href="#" style="">Subscribe
</a></strong>
<div id="tab-content4" class="tab-content ui-tabs-panel ui-widget-content ui-corner-bottom" aria-expanded="true" aria-hidden="false" style="">
<table class="ui-table" style="border-collapse: collapse;">
<tbody style="">
<tr style="">
<td>test1</td>
</tr>
<tr style="">
<td>test2</td>
</tr>
<tr style="">
<td>test3</td>
</tr>
</tbody>
</table>
</div>
<div id="tab-content1" class="tab-content ui-tabs-panel ui-widget-content ui-corner-bottom" aria-expanded="false" aria-hidden="true" style="display: none;">
<table class="ui-table" style="border-collapse: collapse;">
<tbody style="">
<tr style="">
<td>test2</td>
</tr>
<tr style="">
<td>test21</td>
</tr>
<tr style="">
<td>test22</td>
</tr>
</tbody>
</table>
</div>
<div id="tab-content2" class="tab-content ui-tabs-panel ui-widget-content ui-corner-bottom" aria-expanded="false" aria-hidden="true" style="display: none;">
<table class="ui-table" style="border-collapse: collapse;">
<tbody style="">
<tr style="">
<td>test3</td>
</tr>
<tr style="">
<td>test31</td>
</tr>
<tr style="">
<td>test32</td>
</tr>
</tbody>
</table>
</div>
<div id="tab-content3" class="tab-content ui-tabs-panel ui-widget-content ui-corner-bottom" aria-expanded="false" aria-hidden="true" style="display: none;">
<table class="ui-table" style="border-collapse: collapse;">
<tbody style="">
<tr style="">
<td>test4</td>
</tr>
<tr style="">
<td>test41</td>
</tr>
<tr style="">
<td>test42</td>
</tr>
</tbody>
</table>
</div>
<!-- <div id="tab-content4" class="tab-content"> </div> -->
</div>
When running the siteimprove plugin, you will get a "review" item (not an "error" or "warning") for any element that has a tabindex specified. Or at least that's what my testing is showing.
It doesn't seem to matter if valid tabindex values of 0 or -1 are used. I would expect a "review" or "warning" if tabindex were greater than 0 since that's highly discouraged in the html spec.
Warning!Using a positive value for tabindex to specify the element’s position in the sequential focus navigation order interacts with the order of all focusable elements. It is error-prone, and therefore not recommended. Authors should generally leave elements to appear in their default order.
So siteimprove is being a bit overzealous and flagging every use of tabindex as a review candidate.
Note that in your example, the tabindex="0" on all the <a> elements is not necessary (*). They are already in the tab sequence.
(*) If an anchor (<a>) does not have an href attribute, then the anchor is not a tabstop and would need a tabindex="0" if you wanted focus to move to the element. However, the anchor would also need a keyboard and mouse event handler to handle clicks since an anchor without an href does not handle any events.
The code sample is also a little weird in that the list item (<li>) has a tabindex="0" and the nested link in that list item allows focus. That's two tab stops for essentially the same element. That would be an accessibility issue.
The full HTML code for the table is as follows:
<table id="clearablecombo-1497" class="x-field clearableCombo x-form-item x-field-default x-anchor-form-item" cellpadding="0" style="table-layout: fixed; width: 287px;">
<tbody>
<tr id="clearablecombo-1497-inputRow">
<td id="clearablecombo-1497-labelCell" class="x-field-label-cell" width="105" valign="top" halign="right" style="">
<label id="clearablecombo-1497-labelEl" class="x-form-item-label x-form-item-label-right" style="width:100px;margin-right:5px;" for="clearablecombo-1497-inputEl">Document Status:</label>
</td>
<td id="clearablecombo-1497-bodyEl" class="x-form-item-body x-form-trigger-wrap-focus" colspan="2" role="presentation" style="width: 100%;">
<table id="clearablecombo-1497-triggerWrap" class="x-form-trigger-wrap" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed;">
<tbody>
<tr>
<td id="clearablecombo-1497-inputCell" class="x-form-trigger-input-cell" style="width: 100%;">
<div id="ext-gen1890" class="x-hide-display x-form-data-hidden" role="presentation"/>
<input id="clearablecombo-1497-inputEl" class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" type="text" style="width: 100%; text-transform: uppercase; -moz-user-select: text;" name="documentStatus" autocomplete="off" aria-invalid="false"/>
</td>
<td id="ext-gen1888" class="x-trigger-cell" valign="top" style="width:26px">
<div id="ext-gen1886" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-unselectable x-form-trigger-over x-form-arrow-trigger-over" role="button" style="-moz-user-select: none;"/>
</td>
<td id="ext-gen1889" class="x-trigger-cell" valign="top" style="width:26px">
<div id="ext-gen1887" class="x-trigger-index-1 x-form-trigger x-form-clear-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"/>
</td>
</tr>
</tbody>
</table>
</td>
<td id="clearablecombo-1497-errorEl" class="x-form-error-msg x-external-error-icon x-form-invalid-icon" width="0" style="display:none" data-errorqtip=""/>
</tr>
</tbody>
</table>
The part of the HTML I'm attempting to manipulate is this part specifically:
<div id="ext-gen1886" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-unselectable x-form-trigger-over x-form-arrow-trigger-over" role="button" style="-moz-user-select: none;"/>
The above part is the actual dropdown arrow which is also in the above large portion of the HTML. The drop down text I need to select is "Rejected". The HTML with the selection options are as follows:
<div id="boundlist-1558" class="x-boundlist x-boundlist-floating x-layer x-boundlist-default" tabindex="-1" style="left: 136px; top: 346px; height: auto; z-index: 19001; width: 182px;">
<div id="boundlist-1558-listEl" class="x-boundlist-list-ct" style="overflow: auto; height: auto;">
<ul>
<li class="x-boundlist-item x-boundlist-item-over" role="option">All</li>
<li class="x-boundlist-item" role="option">Waiting QA</li>
<li class="x-boundlist-item" role="option">AutoTec Approved</li>
<li class="x-boundlist-item" role="option">User Approved</li>
<li class="x-boundlist-item" role="option">Rejected</li>
<li class="x-boundlist-item" role="option">Deleted</li>
</ul>
</div>
</div>
Anyone have any suggestions of the XPath I would use to do this? I tried just inputting the text like a textbox, however there are certain boxes such as the Country and State that have to be selected to enable each other.
I think 'role' is the best attr in this case to find the elements:
--this one select your desired element
"//div[contains(id, 'ext-gen')][#role='button'][contains(#class, 'x-form-trigger-over')]"
--this one select your desired option
"//li[#role='option'][text()='Rejected']"
As I understand these are the target elements:
xpath = '//div[contains(id, "ext-gen")][#class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-unselectable x-form-trigger-over x-form-arrow-trigger-over"]'
drop_down = self.driver.find_element_by_xpath(xpath)
drop_down.click()
xpath = '//li[#class="x-boundlist-item"][contains(text(), "Rejected")]'
option = self.driver.find_element_by_xpath(xpath)
option.click()
when I'm using my phone to test the app, I use the back device button to show the previous page this is working with all the pages except one page that shows a not styled page when trying to get to the pervious page so there somthing Odd. Here a briefe explanation.
there is 3 page #main_menu , #first_map , #second_map
when I'm into the #second_map page it should go to the #first_page when I press back button
but actually its showing the #main_menu page with not css styling.
could you plz tell me what is the problem an how we can fix it thank you in advance .
I provide the source code :
this is the main_page
</div>
<h2 id="thx_msg" style="margin:0 auto;"></h2>
<div class="grid2">
<div class="first" id="search_btn">
<div>
<img src="images/loupe.jpg"/>
<div>
</div>Search for a Spot</div>
</div>
<div class="second" id="submit_spot_btn">
<div>
<img src="images/spot.jpg"/>
</div>
<div>Submit a spot</div>
</div>
</div>
<ul style="margin:0 auto;" class="spaced_list" style="widht:280px;" >
<li><input type="button" data-role="none" value="Account info" class="btn" style="margin:0 auto;" id="main_page_account_info"/></li>
<li><input type="button" data-role="none" value="Log Out" class="btn" style="margin:0 auto;"id="main_page_log_out"/></li>
</ul>
</div>
here is the first_map page is named spot_page
<div data-role="page" id="spot_page" data-theme="b">
<div data-role="header" style="overflow:hidden;">
<img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div id="search_form_holder" style="margin:0px 25px" >
<p class="center" style="font-size:16px;font-weight:bold;">
Search for a Spot
</p>
<ul class="some_space" style="margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;
width:280px;">
<li><input type="text" id="address_zip" class="field black" placeholder="Address/Zip Code"/></li>
<li id="to"></li>
<li><input type="button" data-role="none" style="width:200px;margin:15px auto;" id="search_spot_btn" class="btn" value="Search for a Spot"></li>
</ul>
<div id="hidden_scroller" style="display:none">
<select id="distance" name="Within">
<option value="1">1 Mile</option>
<option value="3">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>
</div>
</div><!-- search form -->
<div id="first_map" style="width: 100%;
height: 247px;border:1px solid black;margin:0 auto">
</div>
</div><!-- split view -->
and finally the second map here :
<div data-role="page" id="nearby_page">
<div data-role="header" style="overflow:hidden;">
<img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div class="second_header">Spots nearby</div>
<div id="map" style="width: 100%;
height: 398px;border:1px solid black;margin:0 auto">
</div>
</div>
As you can see the pages are separate from each other.
I have a last question could a navigation plugin help to fix the problem like jquery history plugin and thanks for your help.
Make sure to have your pages on different separate pages. If not these kind of errors will occur. Mostly, you will encounter abnormal navigation error. That is what I have experienced in my experience.
BTW, you should show more of your code for people here to help you out.
Update
PhoneGap and Android's back button do behaves odd. What I have done in my application is disabled the back button and given the soft back button on the top header. Simple history.back() will do the magic for back buttons.
You can disable as follows.
$(function(){
document.addEventListener("deviceready", onDeviceReady, false);
})
// PhoneGap is loaded and it is now safe to call PhoneGap methods
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
console.log("Back button pressed but nothing happened");
}
Anyway this is my approach. You may choose to be different.
I've got a table where I've given each of the <td>s some styling to have a background color, etc. They also have different amounts of data in them. Specifically, I have two <td>s next to each other, and one has content in it that makes it taller than the other. In Chrome, the shorter <td> is the same height as the taller <td>, with styling and everything. In Firefox/IE, the shorter <td> just takes up as much room as needed. I've tried giving the <td> height: 100%, but that didn't really do anything. I also tried having a div inside the td with height: 100%, but that didn't do anything, either.
How can I get it to behave the same across all three browsers? I don't necessarily need it to be either way, although it would be nice to actually be able to control it. I mostly just need it to behave the same.
Here's the final html. It might be kind of hard to understand because there's a lot of knockout stuff in there.
<div class="container">
<div class="inner-container">
<table>
<tbody><tr><td style="text-align: right"><input type="button" id="manageSaveButtonTop" class="journal-button manage-save-button manage-save-button-top" value="Save"></td></tr>
<tr>
<td id="template" class="outer-div">
<h6>Templates</h6>
<ol class="journalTree sortable template manageJournal ui-sortable" >
<li class="group mine template">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
</li>
<li class="no-nest mine template">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Objective</span>
</li>
</ol>
<!--</div>-->
</td>
<td id="myJournal" class="outer-div droppable ui-droppable">
<!--<div id="myJournal" class="outer-div droppable ui-droppable">-->
<h6>My Journal</h6>
<ol class="journalTree sortable myJournal manageJournal ui-sortable">
<li class="group mine ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
</li>
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Blank Objective</span>
</li>
<li class="group deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Deleting Group</span>
<input type="text" style="display:none" class="itemTextBox"></div>
<ol >
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Test Deleting</span>
</li>
</ol>
</li>
<li class="group deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
<input type="text" style="display:none" class="itemTextBox"></div>
<ol>
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Objective</span>
</li>
</ol>
</li>
</ol>
<!--</div>-->
</td>
</tr>
<tr><td style="text-align: right"><input type="button" id="manageSaveButtonBottom" class="journal-button manage-save-button bottom" value="Save"></td></tr>
</tbody></table></div></div>
I can't set the height to a specific height, because the height of the right table changes dynamically (by adding more things to it). Here's the relevant CSS:
#myJournal
{
border: 1px solid black;
display: inline-block;
vertical-align: top;
background-color: #dde5e4;
width: 650px;
height: 100%;
border-radius: 25px;
-moz-border-radius: 25px;
}
#template
{
border: 1px solid black;
display: inline-block;
vertical-align: top;
background-color: #dde5e4;
width: 500px;
height: 100%;
margin-right: 100px;
border-radius: 25px;
-moz-border-radius: 25px;
}
Avoid setting any inline attributes and use CSS to style your tables instead. Try setting the cell width using CSS. You could do something like this (ideally you want your CSS in a separate file, but just to illustrate):
<style type="text/css">
table#myTable td {
height: 200px;
width: 200px;
}
</style>
<table id="myTable">
<tbody>
<tr>
<td>My data</td>
</tr>
</tbody>
</table>
If you want different sizes, create separate classes and apply them to your cells:
<style type="text/css">
td.small-cell {
width: 100px;
}
</style>
<table id="myTable">
<tbody>
<tr>
<td class="small-cell">My data</td>
</tr>
</tbody>
</table>
Finally, if you are starting a project, you might want to save yourself some time and use a CSS framework, like Twitter Bootstrap, that will sort out browser inconsistencies for you.