I have a very simple set up in place, that looks like this:
<div class="row">
<div id="whoarewe" class="offset-2 col-lg-4 col-md-4 col-xs-12 col-sm-12"></div>
<div id="whatwedo" class="col-lg-4 col-md-4 cold-sm-12 col-xs12>
</div>
</div>
The thing is, in responsive mode, the id #whoarewe still has the 2 column offset, therefore is not lined up vertically with #whatwedo. Is there any way I can do this with simply a media query? or is there a bootstrap property that would take care of it in col-xs and col-sm?
I tried to set col-lg-offset-2 and col-sm-offset-0 but this didn't work :(
Thanks.
I came up with a solution that works in my case, basically using a row property called justify-content-around like so:
<div class="row justify-content-around">
<div class="col-lg-4"></div>
<div class="col-log-4></div>
</div>
<div class="row">
<div id="whoarewe" class="col-md-4 offset-md-2"></div>
<div id="whatwedo" class="col-md-4"></div>
</div>
Refer to the documentation for correct offset classes:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
Otherwise you can set the column width and do some flex magic by justifying content as per your need
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
Related
I want to find element div with class=parent-class whose three children should have same class=no-data using xpath or css selector.
i.e all three > 3rd, 4th & 5th child div of parent class should have 'no-data' class.
example:
<div class="main">
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="no-data">NA</div>
<div class="data">xyz</div>
<div class="data">ijk</div>
</div>
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="no-data">NA</div>
<div class="no-data">NA</div>
<div class="no-data">NA</div>
</div>
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="data">abc</div>
<div class="data">xyz</div>
<div class="data">ijk</div>
</div>
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="no-data">NA</div>
<div class="no-data">NA</div>
<div class="data">ijk</div>
</div>
</div>
Tried below solution: it works for me
//div[contains(#class,'parent-class') and div[#class='no-data'][1] and div[#class='no-data'][2] and div[#class='no-data'][3]]
or
//div[contains(#class,'parent-class') and (div[#class='no-data'][1] and div[#class='no-data'][2] and div[#class='no-data'][3])]
Though looking for some better solution
You can use below given xpath to trace your required elements.
//div[#class='main']//child::div[2]//
child::div[#class='no-data'][1]
//div[#class='main']//child::div[2]//
child::div[#class='no-data'][2]
//div[#class='main']//child::div[2]//
child::div[#class='no-data'][3]
I think this should do it:
//div[#class='parent-class'][not(div[(position()>2 and position()<6) and .[#class != 'no-data']])]
As far as I understood your requirement it should be something like:
//div[#class='parent-class' and count(descendant::div[#class='no-data'])=3]
where:
descendant - is XPath Axis returning children of the current node and their children
count() - is XPath Function returning the number of nodes matching the expression
Therefore above expression will match div tag having 3 children with no-data class
I would like to change the style of dates in my month calendar view which have events.
This is the design I'm developing:
So I need to change style of .rbc-date-cell to blue for each date with an event. I have searched high and low for a solution to this, most commonly I find examples for creating a CustomDateCell for dateCellWrapper which will conditionally style cells, here's one example I've tried:
React Big Calendar how to style a single day in the month view
This changes the style of .rbc-day-bg not .rbc-date-cell. The markup on RBC is complex, because the devs made it for events which can stretch over multiple days. This means that the background divs are in a different parent to the datecells. I'd prefer not to traverse/manipulate the DOM to style these cells.
Surely there must be a way to style the datecells? the docs and all answers I've found on SO and github haven't yielded anything so far. Could it be done with eventPropGetter?
EDIT
The HTML is as follows. I've also tried custom slot props and eventPropgetter but have not been able to directly manipulate the rendering of .rbc-date-cell
<div class="rbc-month-row">
<div class="rbc-row-bg">
<div class="rbc-day-bg" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg rbc-today" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
</div>
<div class="rbc-row-content">
<div class="rbc-row">
<div class="rbc-date-cell">13</div>
<div class="rbc-date-cell">14</div>
<div class="rbc-date-cell rbc-now rbc-current">15</div>
<div class="rbc-date-cell">16</div>
<div class="rbc-date-cell">17</div>
<div class="rbc-date-cell">18</div>
<div class="rbc-date-cell">19</div>
</div>
</div>
</div>
rbc-event's exist in a different row to the rbc-date-cell, in this markup there are events on the 23rd and 24th. I don't want to traverse the DOM to conditionally style divs as this isn't a very React way of doing things, it should be done before rendering if possible
<div class="rbc-row-content">
<div class="rbc-row ">
<div class="rbc-date-cell">21</div>
<div class="rbc-date-cell">22</div>
<div class="rbc-date-cell">23</div>
<div class="rbc-date-cell">24</div>
<div class="rbc-date-cell">25</div>
<div class="rbc-date-cell">26</div>
<div class="rbc-date-cell">27</div>
</div>
<div class="rbc-row">
<div class="rbc-row-segment" style="flex-basis: 28.5714%; max-width: 28.5714%;"> </div>
<div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="2/2"><p class="event-wrapper">2/2</p></div></button></div>
<div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="1/1"><p class="event-wrapper">1/1</p></div></button></div>
</div>
</div>
checkout this sandbox code https://codesandbox.io/s/73ky8rj2qj
if that's what you want to achieve so the main idea is to override month dateHeader and then with every dateHeader to render check if its date prop is between any event startDate and endDate and render it with the desired style
I am trying to understand Angular Material layout. I have a section of HTML that is always floated to the right and it contains several lines in a column. That section is rendered as expected when using a smaller device. However, when the device is a small hand-held, in addition to adjusting the right-floating section, I don't want to include some of the lines in that column.
For example, on a large screen device the layout would be:
left-panel middle-panel right-panel-line 1
right-panel-line 2
right-panel-line 3
and then on a small screen device the layout would be:
left-panel
middle-panel
right-panel-line 1
where the 2nd and 3rd lines in the right-floating panel is not displayed.
Question: how do I conditional use the Angular Material layout directives to do this?
Thanks,
-Andres
Available Plunker here
As you can see in angular-material layout extra options documentation, you can conditionally show and hide elements depending on the screen size.
Code for reference, see plunker for the complete details:
<div layout="row" layout-xs="column">
<div flex>left-panel</div>
<div flex>middle-panel</div>
<div layout="column" flex>
<div flex>right-panel-line 1</div>
<div flex hide-xs>right-panel-line 2</div>
<div flex hide-xs>right-panel-line 3</div>
</div>
</div>
Hope it helps.
Here you go - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout-gt-xs="row" layout-xs="column">
<div style="background:red" flex></div>
<div style="background:green" flex></div>
<div flex layout="column">
<div style="background:purple" flex></div>
<div style="background:yellow" flex hide-xs></div>
<div style="background:cyan" flex hide-xs></div>
</div>
</div>
The trick is to use layout and hide depending on screen size.
https://material.angularjs.org/latest/layout/container
https://material.angularjs.org/latest/layout/options
I have an strange issue with displaying graphs in AMD Layout.
There are two widgets in which I've defined graphs and here is how it looks like - you can see that graphs in widgets go out of their area
I've tried reproduce this bug in plunker and there is nothing wrong :/
When I make a small change in browser (for example, I move the edge of the browser), graphs return to the right place -> http://recordit.co/mRmNAjH840
<div layout="row" ng-controller="GraphCtrl" layout-md="column" layout-sm="column" layout-margin="">
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="66" flex-gt-md="66">
<div class="panel-heading">Widget1<span flex=""></span>
</div>
<div class="panel-body">
<div id="chart1"></div>
</div>
</section>
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="32" flex-gt-md="32">
<div class="panel-heading">Widget2<span flex=""></span>
</div>
<div class="panel-body">
<div id="c3_combined"></div>
</div>
</section>
</div>
I'm not sure if this is related to your problem, but on IE, I have to add this CSS property manually :
svg { overflow: hidden; }
I have a field collection called field_logo_logos.
There are 2 fields within:
field_logo_image and field_logo_link
In views I can get the data and it comes out like this:
<div typeof="" about="/field-collection/field-logo-logos/24" class="entity entity-field-collection-item field-collection-item-field-logo-logos clearfix">
<div class="content">
<div class="field field-name-field-logo-image field-type-image field-label-hidden view-mode-full">
<div class="field-items">
<figure class="clearfix field-item even"><img width="222" height="57" title="title" alt="alttag" src="http://link/to/my/image.png?itok=1wgQypF6" class="image-style-footer-logo" typeof="foaf:Image"></figure>
</div>
</div>
<div class="field field-name-field-logo-link field-type-link-field field-label-hidden view-mode-full">
<div class="field-items">
<div class="field-item even">http://www.mylink.com/</div>
</div>
</div>
</div>
</div>
but how do I override this so I can change it to be like this:
<div class="footer-logo">
<a href="http://www.mylink.com/" target="_blank">
<img width="222" height="57" title="title" alt="alttag" src="http://link/to/my/image.png?itok=1wgQypF6" class="image-style-footer-logo" typeof="foaf:Image">
</a>
</div>
I know how to do this with ordinary fields with tokens within views or in a template override but field collections seem to work differently.
Any advise will be very much appreciated.
C
You can't do this with the current iteration of field collections.
Here's a post, they say they will allow better templating in version 2.x
https://drupal.org/node/1157794
You could always patch, but nobody ever recommends that.