I'm using fullcalendar.io with the added scheduler piece. I've overridden the resourceRender with the following code:
function (resourceObj, labelTds) {
const textColor = this.calculateForeground(resourceObj.color);
labelTds.html('<div style="background: ' + resourceObj.color + ';
color: ' + textColor + '">'
+ resourceObj.name +
'</div>');
}
(calculateForeground(..) just calculates whether the text should be black or white)
So that when resources are rendered, it looks like this:
<th class="fc-resource-cell" data-resource-id="4">
<div style="background: #EB0007; color: white">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Resource Name</font>
</font>
</div>
</th>
But my issue is that some of the resource names are bigger than others so that they wrap to the next line while the others do not which looks weird with my background setting:
Any tips on how to fix this? I'd like the background to fill the whole space and the single-lined text to be vertically centered:
I'm hoping to fix this with inline styling before attempting jQuery. Thanks!
The problem I think is that you're unnecessarily adding a <div> within each td. Instead you can just manipulate the CSS of the label <td> directly, with no need to re-write the name of the resource, either:
resourceRender: function (resourceObj, labelTds) {
const textColor = this.calculateForeground(resourceObj.color);
labelTds.css("background-color", resourceObj.color);
labelTds.css("color", textColor);
}
This way, the colour applies to the whole of the <td>, not just the <div> within it. Each <div> would only have the height of its contents, hence your problem, but the <td>s all have the same height as each other.
Related
I'm scraping an HTML page but I'm trying to get one section of the page. There are no classes, id's or anything super useful I can plug into Cheerio I feel like (I'm new to this, so I know my ignorance plays a part).
The code looks like this.
<b> Here's some text I don't want</b>
<b> More text I don't want</b>
<hr style="width:90%; padding: 0>
<b> text I want </b>
<b> text I want </b>
<b> text I want </b>
<b> text I want </b>
<hr style="width:90%; padding: 0>
<b> Here's some text I don't want</b>
<b> More text I don't want</b>
Is there a way to grab the HTML between the two <hr> elements with Cheerio? Both elements are exactly the same.
You can start at the first hr and iterate next() until you get to the second one:
let el = $('hr').first()
while(el = el.next()){
if(el.length === 0 || el.prop('tagName') === 'HR') break
text += el.text() + "\n"
}
If you can ascertain which nth to use you could try nth-of-type selector e.g.
hr:nth-of-type(1)
You might also be able to use nth-child
Question:
How can I add margins and/or paddings to headings (h1 - h4) that are part of a TD or TH?
Current Situation:
I have a pre-generated HTML document that is being generated by JIRA. The structure of this document is as follows:
<tr class="rowAlternate">
<td class="jira-macro-table-underline-pdfexport">
<h1><a name="StandardizedInterface"></a>Standardized Interface</span></h1>
<h2><a name="ShortDescription"></a>Short Description</h2>
<ul> ... </ul>
</td>
</tr>
I programmatically extend this document with <tocentry> and other mPDF-specific elements so it can be used as a handout, the generated PDF looks quite good but there is one major issue I have with headings in tables.
This is how the document shows up in the browser:
Inside generated PDF:
As can be see the margins of the headings have disappeared in the PDF export. All my tests with adding inline CSS to the headings or to wrap them with other elements have failed so far.
The mPDF documentation says:
Block-level tags (DIV, P etc) are ignored inside tables, including any
CSS styles.
This will most likely mean that this can't be done with pure CSS or wrapping.
I hope that someone else encountered this problem before and could share some insights as how to achieve spacing around block elements.
You'll want to convert the mark-up to a format similar to the following:
<table>
<tr>
<td class="h1">Report</td>
</tr>
<tr>
<td class="h2">Description</td>
</tr>
<tr>
<td>Body</td>
</tr>
</table>
You can then apply appropriate padding to the <td> elements by targeting the class name:
<style>
table, th, td {
border: none;
}
td.h1 {
padding: 30px 0;
}
td.h2 {
padding: 15px 0;
}
</style>
Use a DOM parser like the one from Symfony to help you traverse your current mark-up and rebuild it in the proper format automatically.
Workaround / solution
I used a workaround that solved the problem in my case by using preg_replace_callback() that I needed anyways to format my document properly. Whenever the callback handles a heading, I add a transparent image right after the text of the heading whose height I define by doing a bit of math.
Code
function formatHeading($p) {
// I only want headings for h1-h3:
$tocEntry= '';
if (is_numeric($p[2]) && $p[2] >= 1 && $p[2] <= 3) {
$tocEntry= "<tocentry level=\"{$p[2]}\" content=\"{$p[3]}\" />";
}
// calculates the heights of the vertical spacer
$spacerHeight= ((6-$p[2]) * 10);
return
"{$p[1]}{$tocEntry} {$p[3]} {$p[4]}
<img src=\"../assets/images/transparent.png\" height=\"{$spacerHeight}\" style=\"vertical-align:middle;\" width=\"1\" border=\"0\"/>";
}
// Matches e.g. "<h2><a name="SimpleTest"></a>Simple test</h2>"
$buffered= preg_replace_callback('|(<h(\d)+>?<a?[\w\s\d="%>]+<\/a>)(.+?[\s\r\n\']*.*)(<\/h\d+>)|',
"formatHeading", $buffered);
Result
To illustrate the position of the spacer I used a non-transparent image to generate the PDF:
I'm here today because I'm wondering something about the NG Style with Angular (my version being the 6). How can i update [ngStyle] when I use a function to return a value.
As always, here is a simplified example of my problem:
I generate div from an array of objects.
For each section, there are two div: one on the left and one on the right.
The size of the left div changes depending on the content, so it can do both 50px and 125px.
I want the right div to fit the size of the one on his left, always half that size (2 in getLeftDivHeight).
Obviously, this will be done in each section (Container).
How can I make the ngStyle update when the div's height to the left changes (due to resizing, adding content, or page display time)? )
Here is the code:
HTML
<section class = "Container" *ngFor="let oneContent of allContent">
<div id = "{{oneContent.id}}" style="float: left">
<p> {{oneContent.Content}} </ p>
</div>
<div style="float: right" [ngStyle]="height: getLeftDivHeight(oneContent.id, 2)">
</div>
</div>
Typescript (only the related function)
getLeftDivHeight(id: string, divisionNumber: number): string {
height = document.GetElementById(id).getBoundingClientRect().height /
divisionNumber;
return height + 'px';
}
Note that I am not looking for an HTML solution, but an Angular one, the code above is just an example to explain my problem.
Thank you in advance
You could return the whole style string, for example height: 100px, from the getLeftDivHeight method
getLeftDivHeight(id: string, divisionNumber: number): string {
height = document.GetElementById(id).getBoundingClientRect().height / divisionNumber;
return `height: ${height}px`;
}
or you could use the below syntax in the template
[style.height.px]="getLeftDivHeight(parameters)"
return only numerical height value from the method.
So, I finally manage to do it, using a directive.
I used ElementRef to access the HTML Object of my right div.
import {ElementRef,Renderer} from '#angular/core';
constructor(private el: ElementRef,public renderer: Renderer) {}
Then, I used Dom to access the left div height
this.el.nativeElement.parentElement.childElement[0].clientHeight;
Then I use this.renderer.setElementStyle() to apply style
I also learn that use offscrollheight to do the math is not a good idea !
I got the HTML:
<span class="poster_id">
xxxxxx
</span>
Is it possible to change the text color using the actual text value with only CSS? Like:
span.poster_id {
color: #xxxxxx;
}
Yes, you can, using jQuery:
var color = $(".poster_id").text();
$(".poster_id").css('color', color);
And if you want to do this dynamically, you can do this:
$(document).keyup(function(){
var color = $(".poster_id").text();
$(".poster_id").css('color', color);
});
and give .poster_id an attribute contentEditable. Fiddle
What you are trying to do is get the innerHTML of an element with CSS, which is currently impossible. :(
However, you can do it with a little bit of JS(jQuery is not needed :D):
<span class="poster_id" onkeyup="this.style.color=this.innerHTML" contenteditable>
xxxxxx
</span>
HTML:
<a href="#" data-container="body" data-id="54" data-toggle="popover" data-placement="left">
Popover on left
Javascript:
$('*[data-id]').mouseenter(function(event) {
var e=$(this);
var content = '<div class="row"><div class="col-xs-12"><div class="col-xs-8">
Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1</div><div class="col-xs-4">Element 2</div></div>';
e.popover({html:true,placement:'bottom', animation: false,
delay: { show: 1500, hide: 100 }, content: content}).popover('show')
});
It works fine but only if string in content contains spaces. If theres no spaces text overlaps with second div.
JS Fiddle:
http://jsfiddle.net/9Nt48/
How i can fix this?
This is the problem with continuous text, CSS will automatically place it in next line for you if it seems to overlap with the other divs but it doesn't have much of a choice when you don't give a space, this is because it doesn't know when to break, so you can specify it like:
.popover-content {
word-wrap:break-word;
}
Since your columns already have the width specified, if the text inside the div exceeds it, break it at that point.
DEMO
This is because your markup is wrong. A row in Bootstrap is what nests your columns. You have nested columns inside other columns, which is not correct.
<div class="row">
<div class="col-xs-12">
Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1
</div>
</div>
You also only need to use row and col-x-x classes is if you want to use columns in the tooltip. So you don't really have to use them if you are displaying simple text.
Finally, if you want multiple rows of text, just a p element to split the text.
Caveat: I'm not actually sure you can use the grid inside tooltips. So you might be better off using simple text without columns...