I am trying to change the font size of a text in mat-toolbar, but nothing seems to work . In the plunker example i have 2 spans 'AAA product' and 'some long description' . how do i change the font size of these elements . applying style to the span doesnt seem to take effect. Any help is much appreciated.
<button mat-button (click)="sidenav.toggle()" >
<mat-icon>menu</mat-icon>
</button>
<span>AAA product </span>
<span class="test"></span>
<span style="font-height=10px">Some Longer description</span>
<span class="fill-remaining-space"></span>
plunker link
Use CSS:
<span style='font-size:333%;'>AAA product</span>
There's some more info on https://material.angular.io/guide/typography
Related
I'm super close to building out an animated vertical stepper in Tailwind, however, I cannot figure out how to make the height of each individual step match the height of the content while preserving the animation! I would have thought that h-fit (instead of h-16) would do the trick, but for some reason, the animation stops working in that case.
Functioning Sandbox can be found here! https://codesandbox.io/s/still-grass-8gxu0q?file=/src/App.tsx
Would greatly appreciate any help and insight you can provide!
Here is the section of code that's giving me trouble:
<div
className={`overflow-y-hidden h-0 mt-5 transition-all ease-in-out duration-1000 flex flex-col border border-white ${
stepIdx === currentStep ? "h-16" : ""
}`}
>
<div
className={`${
isCurrent(stepIdx) ? "text-white" : "text-gray-500"
} mb-5`}
>
{step.description}
</div>
</div>
{isCurrent(stepIdx) ? (
<Buttons handleNext={handleNext} handleBack={handleBack} />
) : (
""
)}
</div>
I figured it out! CSS does not recommend using non-fixed heights in animations; however, the workaround is to instead use max-height.
Here's a working Sandbox in case anyone in the future needs help: https://codesandbox.io/s/still-grass-8gxu0q?file=/src/App.tsx
Using Thymeleaf th:each loop, whitespace is removed (or can't be added).
Thymeleaf code:
<div>
</div>
I expected:
<div>
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
but html rendered below.
<div>Link 1Link 2Link 3Link 4Link 5</div>
How to add whitespace (in html file new line) using Thymeleaf th:each?
My Thymeleaf version is 3.0.12.RELEASE
If you want the links to be arranged horizontally with a single white space between them (as opposed to arranging them vertically using display:block) then you can use the Thymeleaf synthetic <th:block> element (documented here):
<div>
<th:block th:each="item : ${items}">
</th:block>
</div>
This will give you the same layout as you show in your question, when you run the first code snippet.
Update:
You can also use <span> instead of <th:block>, if you prefer:
<div>
<span th:each="item : ${items}">
</span>
</div>
This will give you the same end result (links arranged horizontally with a space between them), but the HTML generated to produce this layout will, of course, be slightly different.
I just wanted to know if there´s any way to reduce the space between to tables (one on top of the following) in an Rmarkdown sheet. I´ve tried doing
<div style="width: 100%;margin-top: 1px;margin-bottom: 1px;">
<div style="width: 63%;float: bottom;margin-top: 1px;margin-bottom: 1px;">
```{r, echo=FALSE, warning=FALSE,message=FALSE, results='asis'}
#here the two tables I need to print at the Markdown
But it doesn´t work. Do you have any sugestions? Thanks a lot!
The minimal distance between two tables is one line - otherwise they would be merged (as you can see in my example):
Example with 1 line distance and without one line distance
What is the output format of your md document?
I could finnaly solve it by using a negative margin-top for the second table.
<div style="width: 100%;margin-top: 50px;margin-bottom: 0px;">
{r, echo=FALSE, warning=FALSE,message=FALSE, results='asis'}
#one datatable here
</div>
<div style="width: 66%;float: bottom;margin-top:-19px;margin-bottom: 50px;">
{r, echo=FALSE, warning=FALSE,message=FALSE, results='asis'}
#the otherone here (negative margin-top)
</div>
I am trying to run a foreach loop to return the title and price. But i need the results to go into different boxes, one has a background img, the other has no background img. The boxes alternate down the page.
]3
I assume that you're referring to dynamic adding a class card-w-bg to your cards.
Solution 1: Adding background boolean to your card and use it to determine.
#foreach($cards as $card)
<div class="col-4">
<div class="card x-auto #if($card->background) card-w-bg #endif">
{{ $card->title }}
{{ $card->description }}
</div>
</div>
#endforeach
Solution 2: In your case, it seems like the background appears at the odd number of your cards. Use the loop variable.
<div class="#if($loop->odd) card-w-bg #endif">
However, the $loop->even only works in Laravel 5.8. Use #if($loop->iteration % 2) instead if below Laravel 5.8
Have you tried this? http://image.intervention.io/api/text
Hint: you can capture the image size and do the math to set the text X,Y for the text overlay.
Using xpath, can I get 2 results out of a page at a time? For example, using xpath I can get the first img element:
xpath='//div[#class="forecast-element graphic-box"]/img
...and the next sibling class="forecast-element".
I tried "and" without success:
xpath='//div[#class="forecast-element graphic-box"]/img and //div[#class="forecast-element"]'
also:
xpath='//div[#class="forecast-element graphic-box"]/img and following-sibling:://div[#class="forecast-element graphic-box"]'
I have this html:
<div class='forecast-element graphic-box ' style="background-image:url('/assets/images/forecast/BluePattern.png');">
<h4 style="color: #FFF;">AVALANCHE DANGER <span style="margin-left: 60px;"> MORNING </span><span style="margin-left: 210px;"> AFTERNOON</span></h4>
<img src="/images/forecast/2014-11-23_teton_hazard.gif" alt="Teton Area avalanche hazard rating for 11/23/2014" />
<div style='margin: 2px auto;'><a href="/assets/pdfs/North%20American%20Danger%20Scale.pdf" style='font-size: 14px; color: #CCC;'>View full danger scale definitions</a>
</div>
<a href="/assets/pdfs/North%20American%20Danger%20Scale.pdf" style='font-size: 14px;'>
<img src="/assets/images/forecast/DangerScale.png" style="margin-left: 150px; margin-top: 5px;" alt='Avalanche danger scale ratings'>
</a>
</div>
<div class='forecast-element'>
<h3 style='margin-bottom: 8px;'>GENERAL AVALANCHE ADVISORY</h3>
Moderate to heavy snowfall combined with strong southwesterly to northwesterly ridgetop winds have created unstable avalanche conditions. New wind slabs have developed at the mid and upper elevations. Snowfall over the past 24 hours has also added weight to existing weak layers near the base of the snowpack. Early season snowfall can easily cloud people’s judgment. Cautious route finding and conservative decision making will be essential for safe travel in avalanche terrain today.</div>
I would like to use following-sibling, as the item is right after the graphic-box element and there are other forecast-elements in the html above and below. BTW, I am using YQL if that makes a difference...
Ideally the results would be (psuedo here):
xpath imgsrc = "/images/forecast/2014-11-23_teton_hazard.gif"
xpath text = "GENERAL AVALANCHE
ADVISORY Moderate to heavy snowfall combined with strong
southwesterly to northwesterly........"
Thanks!
The correct syntax for selecting multiple nodes is |
Try this:
//div[#class="forecast-element graphic-box"]/img | //div[#class="forecast-element"]
As you mentioned, these are two separate query elements. In order to select following elements simply do this
//div[#class="forecast-element graphic-box"]/img | //div[#class="forecast-element graphic-box"]/following-sibling::div[#class="forecast-element"]
In some xpath parsers, this will also work:
//div[#class="forecast-element graphic-box"]/(img|following-sibling::div[#class="forecast-element"])