If have the following HTML (there could be more TDs), can I select ALL <div>s with style divE in all TDs before the one with id="current"?
I think i can do it with jQuery, but can this be done with pure CSS?
HTML
<table id="myTbl" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
<td id="current">
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
<td>
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
</tr>
</table>
There's no before selector, but what you can do is select all tds (that aren't #current), and then "reset" (or "undo") the styles on all the tds after #current.
td:not(#current) div.divE{
/* Styles for <td>s before "#current" */
}
td#current ~ td div.divE{ /* This means all "td div.divE" after "td#current" */
/* Reset/undo styles for all other <td>s */
}
DEMO: http://jsfiddle.net/MYhPP/2/
Related
I am building a template for a site and it needs 4 columns. In desktop mode, or anything above tablet width, it should display all 4 columns though the outer 2 are only for padding. When in mobile mode, the outer 2 are set to disappear, but I need the middle two to reverse their order. I tried setting the 'col-' setting to reverse when under 480px, but it isn't working. I'd appreciate someone looking over my work.
HTML
<div id="inus1" class="fk-row row">
<div data-text="text" align="center" id="inyb3" class="fk-col order-1">
</div>
<div align="center" id="i80rh" class="fk-col order-2 order-xs-2">
<div id="ifo6l">
<div id="iq1zf" class="fk-headline">Thank you for your purchase!
</div>
<div data-text="text" id="ihleo">Order {{orderId}}
<div draggable="true" id="i6myy-2-2">
<div draggable="true" id="ii502-2-2-2">
<b data-text="text">
<span data-text="text" id="ix3j4">Thank you {{firstName}} {{lastName}}!</span>
</b>
</div>
</div>
</div>
</div>
<iframe frameborder="0" type="map" name="map" address="" zoom="1" maptype="q" id="in2gu" src="https://maps.google.com/maps?&z=1&t=q&output=embed"></iframe>
</div>
<div align="center" id="i33dp" class="fk-col order-3 order-xs-1">
<table id="orderSummaryTable" class="w-100">
<thead id="iweztk">
<tr id="ikyi1h">
<th colspan="3" id="i10uii">
<span data-text="text" id="iqvl9r">Order Summary</span>
</th>
</tr>
<tr id="ieggiv">
<th id="inwrj">
<span data-text="text" id="ipokfh">Item</span>
</th>
<th id="i259c">
<span data-text="text" id="i5gfso">Quantity</span>
</th>
</tr>
</thead>
<tbody id="items-list">
<tr>
<td class="cell cell-items-list">
</td>
</tr>
</tbody>
</table>
</div>
<div align="center" id="ijiyf" class="fk-col order-4">
</div>
</div>
CSS (just the media query)
#media (max-width: 480px){
#in2gu{
width:615px;
height:350px;
}
#i80rh{
width:100%;
}
#i33dp{
width:100%;
}
#inyb3{
display:none;
}
#ijiyf{
display:none;
}
#in2gu{
width:615px;
height:350px;
}
}
Bootstrap comes with ordering utilities. Try them by appending order-0, order1, etc. to your elements
https://getbootstrap.com/docs/4.0/utilities/flex/#order
I have a row that contains two columns, I would like to show a third column only if the window is resized to a specific resolution, eg: 1920x720. How can I do this using bootstrap?
Current HTML:
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
Note that if the resolution is lower than 1920x720 then bootatrap must show only two columns, otherwise the columns in the row must be three.
Is possible achieve this only using bootstrap?
Compass approach
There are options to control the width breakpoints. This can be found in the _variables.scss file:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1920px // add custom breakpoint
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1880px // add custom breakpoint
) !default;
With this in place you can control the structure to be responsive on the xxl breakpoint.
<div class="row">
<div class="col-6 col-xxl-4">...</div>
<div class="col-6 col-xxl-4">...</div>
<div class="col-4 d-none d-xxl-block">...</div>
</div>
CSS Approach
Since we cannot control the device height in a media query out-of-box in Bootstrap it might be easier to override in CSS and use auto-layout columns.
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col d-none" rel="xxl">...</div>
</div>
#media (min-width: 1920px) and (min-height: 720px){
.col[rel="xxl"] {
display: block !important;
}
}
DEMO FIDDLE
DEMO RESULT
You can use the built-in class to hide/show a col according to the break point :
example :
.d-sm-none {background:lightgreen;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 col-sm-6">run me in full page to see the third column</div>
<div class="col-md-4 col-sm-6">2</div>
<div class="d-sm-none d-md-block col">3</div>
</div>
you will find the class to use to select your breakpoints at https://getbootstrap.com/docs/4.3/utilities/display/#hiding-elements
avalaible class below, if the widest breakpoint do not match your needs, recreate a similar rule for it . Another answer gives you the clues for that.
table td {
border: solid 1px;
}
table {border-collapse:collapse;}
>
<p>To show an element only on a given interval of screen sizes you can combine one <code class="highlighter-rouge">.d-*-none</code> class with a <code class="highlighter-rouge">.d-*-*</code> class, for example <code class="highlighter-rouge">.d-none .d-md-block .d-xl-none</code> will hide the element for all screen sizes except on medium and large devices.</p>
<table>
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-lg-none"</span><span class="nt">></span>hide on screens wider than lg<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block"</span><span class="nt">></span>hide on screens smaller than lg<span class="nt"></div></span></code></pre>
</figure>
you can't do that with bootstrap classes you need to add custom media queries for the same. in that case you dont have to use row>col-6 classes
<div class="wrapper">
<div class="first">...</div>
<div class="second">...</div>
<div class="third">...</div>
.first,.second,.third{
width:33.33%
}
#media(max-height:720px){
.third{
display:none
}
.first,.second{
width:50%
}
}
You can use the hidden class as mention here
For example on small device you can hide the column by adding this class: hidden-sm-down
Check the table there.
Update:
for bootstrap ver > 4 you should use like #G-Cyr said
with the class .d-sm-none
You can read the doc here
Using this code:
<div class="details">
<strong>Publisher:</strong>
<span class="red"><asp:Label ID="LabelPublisher" runat="server"></asp:Label></span>
</div>
<div class="details">
<strong>Author:</strong>
<span class="red"><asp:Label ID="LabelAuthor" runat="server"></asp:Label></span>
</div>
<div class="details">
<strong>Year:</strong>
<span class="red"><asp:Label ID="LabelYear" runat="server"></asp:Label></span>
</div>
...text on browser appears like this:
Publisher: publisher1
Author: author1
Year: 2014
Now using CSS I want to shift text like this on each label:
Publisher:---Publisher1
Author:-----Author1
Year:------ 2014
You can give fixed min width to strong tag
.details strong {
display: inline-block;
min-width: 100px;
}
DEMO
You should use a table for displaying text in that way.
Here is an example: http://jsfiddle.net/h8tshvty/
<table>
<tr class="details">
<td><strong>Publisher:</strong></td>
<td class="red">Publishername</td>
</tr>
<tr class="details">
<td><strong>Author:</strong></td>
<td class="red">Author name</td>
</tr>
<tr class="details">
<td><strong>Year:</strong></td>
<td class="red">Yearnumber</td>
</tr>
</table>
<div class="row-fluid">
<table class="s-table table table-bordered table-striped table-hover">
<thead class="p-table-head">
<tbody class="p-table-body">
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<div id="div_2_1_2_1_1_1_10_r9" class="Action_Group CoachView CoachView_show" data- eventid="" data-viewid="Action_Group1" data-config="config_div_2_1_2_1_1_1_10_r9" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action_Group">
<div id="div_2_1_2_1_1_1_10_1_r9" class="ContentBox" data-view-managed="true" style="display: none;"> </div>
<div class="s-action-group clearfix">
<div class="l-nodeId" style=" display: none; "></div>
<div class="p-action-group">
<div id="div_2_1_2_1_1_1_10_1_1_r9" class="Action CoachView CoachView_show" data- eventid="boundaryEvent_10" data-viewid="Action3" data-config="config_div_2_1_2_1_1_1_10_1_1_r9" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action" style="background-color: transparent;">
<button id="div_2_1_2_1_1_1_10_1_1_r9-lnk" type="button" style="display: none;">
<a class="p-action-link" href="#action" title="">
<i style="display: none;"></i>
<span style="background-color: transparent;">Select</span>
</a>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I have tried with the following different x path expression its works fine in Firefox but in IE browser it is not working?.
//tbody[#class='p-table-body']/tr/td[10]/div/div/div/div/a/span
//table[#class='s-table table table-bordered table-striped table- hover']/tbody/tr[1]/td[10]/div/div/div[2]/div/a/span
//*[#id='div_2_1_2_1_1_1_10_1_1_r9']/a/span
Note : i have tried to execute scripts it is not fail but main issue it is not recognizing
select link of a customer.
Try
//*[#id='div_2_1_2_1_1_1_10_1_1_r9-lnk']/a/span
to click on select
Not sure if it can help, but try selecting just the 'a' element, instead. There's no need to select also the span element, as far as I can understand. E.g.:
By.cssSelector("#div_2_1_2_1_1_1_10_1_1_r9 a.p-action-link")
Also, a couple of recommendations.
Try to avoid xpath selectors, and write css selectors instead. See selenium-docs
While writing a selector, you should not be too strict. "/tr/td[10]/div/div/div/div" is considered bad practice.
See Writing reliable locators for Selenium and WebDriver tests
Try to identify the element by using the text identifier
driver.findElement(By.xpath("//a/span[text()='Select']")).click();
I am trying to override the css classes from primefaces 3.1, I was looking for a pattern for the class name to override.
I tried:
.ui-datatable table {}
.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer {}
.ui-datatable .ui-datatable-header {}
.ui-datatable th,.ui-datatable tfoot td {}
.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td{}
But only the rows content got centralized but was not able to change header bgcolor and other stuff.
Then I realized that may be the classes I overwrote might not have been used.
Surprisingly, I found the generated source code are not using these as class...
<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget">
<table role="grid"><thead><tr role="row">
<th id="form:j_id1915418705_722af8cd:j_id1915418705_722af894" class="ui-state-default" role="columnheader">
<div class="ui-dt-c">
<span><span class="outputText">Model</span></span>
</div>
</th>
<th id="form:j_id1915418705_722af8cd:j_id1915418705_722af942" class="ui-state-default" role="columnheader">
<div class="ui-dt-c">
<span><span class="outputText">Color</span></span>
</div>
</th></tr></thead><tfoot></tfoot>
<tbody id="form:j_id1915418705_722af8cd_data" class="ui-datatable-data ui-widget-content">
<tr data-ri="0" data-rk="BMW" class="ui-widget-content ui-datatable-even" role="row" aria-selected="false">
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">BMW</span>
</div>
</td>
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">Black</span>
</div>
</td>
</tr>
<tr data-ri="1" data-rk="Audi" class="ui-widget-content ui-datatable-odd" role="row" aria-selected="false">
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">Audi</span>
</div>
</td>
<td role="gridcell">
<div class="ui-dt-c">
<span class="outputText">White</span>
</div>
</td>
</tr>
</tbody>
</table><input type="hidden" id="form:j_id1915418705_722af8cd_selection" name="form:j_id1915418705_722af8cd_selection" value="" autocomplete="off" />
Can somebody tell me how to I be able to change table headers, borders, alternate rows color...
Can somebody provide me a pattern for How to know what class in PF to override looking at the generted source code.
Thanks in advance.
First of the classes are included here in the markup:
<div id="form:j_id1915418705_722af8cd" class="ui-datatable ui-widget">
The other child classes automatically apply themselves to the other elements.
Your custom CSS may actually be overridden by the Primefaces CSS styles if you are including these styles in a seperate CSS file linked from head.
To make sure that your custom CSS applies itself to the page try adding the custom CSS inline to the page body and see if it applies then.