I have counter-reset and counter-increment working fine in HTML, but they are not appearing in the rendered PDF. Are they supported? (An hour of Googling didn't help.)
Here is my CSS. Again, this works fine in HTML, but does not appear in the PDF.
body {
counter-reset: h3counter 1;
counter-reset: h4counter 1;
}
h2 {
counter-reset: h3counter;
}
h3 {
counter-increment: h3counter;
counter-reset: h4counter;
}
h3:before {
content: counter(h3counter) ".\0000a0\0000a0";
}
h4 {
counter-increment: h4counter;
}
h4:before {
content: counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
}
Yes, it works (in wkhtmltox.dll version 0.11.0.0), but only in simple cases. I just ran into the problem that the counter seems to reset when the heading tags (h1, h2, h3) are not direct siblings - i.e., each is wrapped in a div. When the headings are adjacent, as in:
<h2>..</h2>
<h3>...</h3>
<h3>...</h3>
wkhtmltopdf numbers correctly; in this case:
<h2>...</h2>
<div>
<h3>...</h3>
</div>
<div>
<h3>...</h3>
</div>
it does NOT. The two h3's get the same number.
Related
I'm using Webpack/Laravel and injecting vuejs on id #app in my page so to have skeleton loading page I want to have this markup
//client side, will show after ~0.2 seconds
<div id="app" v-cloak>
<hello-world>
</div
//server side, show for ~0.2 s then disappear
<div id="app__loading" v-cloak>
<div class="skeleton">
<span class="skeleton_ribs"></span>
</div>
</div>
I managed to display loading gif in background as pseudo element when v-cloak and everything inside from #app__loading is removed, but if I add normal elements in markup they appear at the bottom of the page after #app loads
[v-cloak] > * { display:none }
[v-cloak] + #app__loading::before {
content: url('https://i.pinimg.com/originals/65/ba/48/65ba488626025cff82f091336fbf94bb.gif');
display: flex;
justify-content: center;
align-items: center;
}
But I would like something like this to work with markup inside #app__loading, but it doesn't work
[v-cloak] > * { display:none }
#app-loader{
display: block;
}
[v-cloak] #app::finish-loading{
[v-cloak] #app-loader{
display: none!important;
}
}
You seem to be expecting the content your initial element to be found in the template of app root element. When using $mount() function, Vue completely replaces the target element with the template of the mounted element.
This replacement is somewhat masked by the fact that, out of the box, the index.html contains a <div id="app"> which gets replaced by the <div id="app">...</div> in your App.vue template.
But they're actually not related (and not the same element). If you changed the id of the one in index.html you'd need to change the target el in main.(js|ts). And obviously, you could change the id of the one in App.vue as well.
Now, to solve your issue, you could simply place v-cloak on the div in your App.vue. From what you've shown so far, that should make it work as expected.
For more complex use cases (i.e: if you wanted to trigger a particular event bound to the initial element) the way to go would be to wrap the initial placeholder in a parent, bind to the parent and, later on, in Vue, target the parent with this.$el.closest('.some-class') or with this.$el.parentElement() to access the binding.
If you still can't get the expected result, please create a mcve (you could use codesanbox.io) and describe in detail what is the expected behavior.
To make your headache smaller till you find proper vue solution, you can grab loader by id and when Vue instance mounts - give display none
export default {
mounted() {
document.querySelector('#app__loading').style.display = 'none';
},
}
The HTML DOM structure I have is, sort of, repetitive. Is there any good practice to refactor my sass rules?
HTML:
<div name="OpportunityDetailView" class="actor-wrapper"><div name="OpportunityDetailView" class="detail-view expansion-bottom-normal">...</div></div>
<div name="ApplicationDetailView" class="actor-wrapper"><div name="ApplicationDetailView" class="detail-view expansion-bottom-normal">...</div></div>
<div name="ProfileDetailView" class="actor-wrapper"><div name="ProfileDetailView" class="detail-view expansion-bottom-normal">...</div></div>
SCSS case 1:
div[name="OpportunityDetailView"] > div[name="OpportunityDetailView"],
div[name="ApplicationDetailView"] > div[name="ApplicationDetailView"],
div[name="ProfileDetailView"] > div[name="ProfileDetailView"],
{
css rules...
}
SCSS case 2:
.section {
div[name="Business_Image_Url__c"],
div[name="Name"],
div[name="Account_Name__c"],
div[name="Business_Type__c"],
div[name="Region_Province__c"] {
.label{
display: none !important;
}
}
If I'm not missing something, it seems like you can use the classes assigned to the elements to achieve what you want:
For case 1:
.actor-wrapper {
.detail-view {
//css code goes here
}
}
and please provide some markup for the case 2.
If all the div[name] elements share the same class, then you can group them by that class, as done with the above example.
I just started using vue-i18n and tried to use the v-on-directive (shorthand: #) in my language specific text.
What i tried to do:
// locale definition
let locale = {
en: {
withEventListener: 'Some HTML with <a #click="onClickHandler">event handling</a>'
}
}
and the vue template:
<!-- vue template be like -->
<p v-html="$t('withEventListener')" />
This doesn't throw an error but unfortunately it does not get evaluated by vue-js either. This would result to Plain-HTML like:
<p>
Some HTML with <a #click="onClickHandler">event handling</a>
</p>
So my question is if there is a way to make Vue 'evaluate' the text and thus 'translate' the directives within the text.
You can use Vue.compile to do something like this if you are including the standalone build script. I'm not familiar with vue-i18n, but this might put you on the right path.
Note that I had withEventListener to wrap it in a div because of the rules around templates.
let locale = {
en: {
withEventListener: '<div>Some HTML with <a #click="onClickHandler">event handling</a></div>'
}
}
const res = Vue.compile(Vue.t("withEventListener"));
Vue.component("internationalized", {
methods:{
onClickHandler(){
alert("clicked")
}
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
new Vue({
el:"#app"
})
With the template
<div id="app">
<internationalized></internationalized>
</div>
Working example.
I am using selenium to grab the href attribute of the a tag. But my code is not grabing the "/pros/52698281" as it should.
Is it because my code is wrong or because some javascript is loading dynamically another url ? Could he ?
Here is the html :
<article class="bi-bloc blocs clearfix bi-pro visited" id="bi-bloc-014805042600000000C0001" data-pjtoggleclasshisto="{"idbloc": {"id_bloc": "014805042600000000C0001", "no_sequence": "" }, "klass":"visited" }">
<div class="zone-bi">
<a class="visible-phone mob-zone-pro pj-lb pj-link" data-pjsearchctx-sethref="" href="/pros/52698281" data-pjstats="{"idTag":"MOB-ZONE-PRO","pos":54,"type_bi":"pro","genreBloc":"1","pjscript":"xt_click({},'C','{%xtn2}','LR_BI::zone_identification::info{%pjstats.type_bi}::identification_pro','A');"}">
<span class="not-visible">
XXXXXXXXXXX
</span>
</a>
I am using this code to grab the href attribute.:
elements = driver.find_elements(:css, "article.bi-bloc div.zone-bi a.visible-phone")
elements.each do |e|
p e.attribute("href")
end
Here is the javascript code that, I think, loads dynamically another url (the one printing in my terminal).
<script type="text/javascript">
var pj_searchctx = {
"1989516432": {
"form": {
"quoiqui": "climatisation",
"ou": "paris-75",
"proximite": 0
},
"search": {
"technicalUrl":"/annuaire/chercherlespros?quoiqui=climatisation&ou=paris-75&idOu=L07505600&page=3&contexte=BupKFuSlIjbFtxi68rty83eKL16bkxx3e0d5jKAkSaA%3D&proximite=0&quoiQuiInterprete=climatisation",
"breadcrumb": "Retour aux résultats",
"stats": {
"idTag": "VERS-LR-RESULTATS"
}
}
}
};
Any idea how I can do ?
Since you're using direct children in your CSS selector, try using this instead of yours (with >):
"article.bi-bloc > div.zone-bi > a.visible-phone"
This matches more specifically the element your looking for.
I can get mode/javascript working with:
JS
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/ace.js
Theme
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/theme-tomorrow.js
Mode
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/mode-javascript.js
Worker
https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/worker-javascript.js
HTML
<script src="/static/js/ace/ace.js"></script>
<div class="my_ace_editor">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
CSS
#my_ace_editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
jQuery
$(document).ready(function() {
var editor = ace.edit("my_ace_editor");
editor.setTheme("ace/theme/tomorrow");
editor.getSession().setMode("ace/mode/javascript");
});
But am not having any luck when attempting to display HTML with:
HTML
<div id="my_ace_editor"><p>test</p></div>
jQuery
$(document).ready(function() {
var editor = ace.edit("my_ace_editor");
editor.setTheme("ace/theme/tomorrow");
editor.getSession().setMode("ace/mode/html");
});
and have added:
https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/mode-html.js
If I type in the HTML editor, the tags and content have syntax highlighting applied.
But it is not showing the actual HTML when it loads - all it shows is test.
There are no Firebug errors and I can see the actual HTML that should be highlighted in Firebug.
Is another file or setting required?
Edit: I can get the HTML content within Ace editor showing correctly if I use:
editor.setValue("<html>test</html>",-1);
But I need to be able to set the value from the HTML itself and not in the jQuery.
The content is being loaded from a database (ie it is 'dynamic content'), i'm not sure if that makes a difference?
You need to escape html, that is instead of
<div id="my_ace_editor"><p>html&test</p></div>
it should be
<div id="my_ace_editor"><p>html&test</p></div>
This is true for all modes not just html
If you do not want to escape the HTML code just use the script tag with the following type and style set
<script type="text/plain" style="display: block;" id="ace-1">
hello world
test test
</script>