I've recently added a simple ZK ThemeProvider that adds some CSS files, which works fine but seems to have a strange side effect... My index page looks like this...
<?page id="iframe" title="${labels.title}"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver" ?>
<zk>
<include src="/zk/content/outerContainer.zul" id="outerContainer" sclass="outerContainerLayout" apply="com.example.RootComposer"/>
</zk>
But somehow, ZK ends up putting this style into the include-div...
style="width:100%;height:100%;"
The width and height of 100% is not correct, but I have no idea where they come from. Interesting enough, it only happens to that include - not includes following. Except, when I try to wrap the thing into another include - both get 100%, but still not the includes below that in the hierarchy.
Anyone an idea where zk adds this strange style?
The solution is in the documentation:
If this component is the only child of its parent, the default width
and height will become 100%.
Somehow this only seems to happen when ThemeProvider is used (or there was some other side effect before that prevented it). Anyway, adding a (hidden) empty div to my index page solved the problem:
<?page id="iframe" title="${labels.title}"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver" ?>
<zk>
<include src="/zk/content/outerContainer.zul" id="outerContainer" sclass="outerContainerLayout" apply="com.example.RootComposer"/>
<div sclass="hidden"/> <-- Cannot have a poor, sad, alone include -->
</zk>
Now the style of the include-div is empty, as it should be.
Related
I am working with Ionic 4 and trying to get Virtual Scroll to work properly with no success, for long actually.
I find the Docs very unexhaustive and with poor grammar sometimes. As at the ItemHeight part which says:
An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by ion-virtual-scroll leading to massive performance improvements. This function allows to skip all DOM reads, which can be Doing so leads to massive performance
Now, I have no degree from Oxford, but this paragraph is plenty of mistakes, there is no clear explanation and it is confusing.
So now.
Would this ItemHeight be helpful somehow for performance or it can bring to performance issues?
Do I have any chance to get this code to work, cause till now I couldn't
((item: any, index: number) => number)
second number here looks like a typo, isn't it?
I think I found the solution.
The bug was caused by ion tags inside ion-virtual-scroll
So instead of having
<ion-virtual-scroll [items]="list">
<ion-card *virtualItem="let item" (click)="goTo(item)">
...
</ion-card>
</ion-virtual-scroll>
I changed my code to
<ion-virtual-scroll [items]="list">
<div *virtualItem="let item" (click)="goTo(item)">
...
</div>
</ion-virtual-scroll>
which seems to work fine, even with items with different heights and with no
approxItemHeight
attribute definition
I'm fairly new to typo3 and I have an issue that i don't find an explanation on how to change it. I'm sure there are already some helpful tutorials but i have issues finding them.
I am making a website and I have already made a template for fontend and backend.
It is a very simple test template that consists only of one slider and one text element.
The slider is handmade and should have the following layout:
<section class="custom-slider">
<img src="img1.jpg">
<img src="img2.jpg">
...
</section>
Thought easy, i have my slider place in my template, just need to add plain images.
but typo3 gives me:
<section class="custom-slider">
<div id="c3" class="frame frame-default frame-type-image frame-layout-0"><header><h2 class=""></h2></header><div class="ce-image ce-center ce-above"><div class="ce-gallery" data-ce-columns="1" data-ce-images="1"><div class="ce-outer"><div class="ce-inner"><div class="ce-row"><div class="ce-column"><figure class="image"><img class="image-embed-item" src="fileadmin/_processed_/1/2/csm_slider1_c3fdcdcaf5.jpg" width="600" height="187" alt="" /></figure></div></div></div></div></div></div></div>
</section>
Now i search how i can make my own custom elements or render existing elements different. I have found a lot of tutorials but they all are based on 'Extension Builder' or 'Builder' and require a custom extention. These don't seem to work on Typo3 8.7.x. Is there a different solution or can someone give me a good tutorial link?
Thank you in advanst:)
Ps: since i will have the same problem with styled text elements i would like to ask if there is a way to declare in the themplate how different predeterment elements are rendered?
In TYPO3 8.7 (I assume) your rendering is done with FSC (fluid_styled_content), so you have to understand the mechanism of FSC to render a CE (ContentElement).
As the name suggests Fluid is used. Fluid uses different templates organized in three categories (each with it's own folder):
Layouts
Templates
Partials
The call goes to a template (in the folder 'templates') where a tag can be inserted to use a specific layout (from floder 'Layouts'). if this tag is given the rendering starts with the given layout. In the layout different sections and partials can be called. Sections belong to the template, partials need to have an own partial file (in folder 'Partials').
You can override single files from the given declaration to individulize the behaviour.
In your example you may evaluate the field layout in layout, template and partial to avoid the default wrapping of any content (your images) in different div tags.
I'm trying to use the placement option listed under input options for the NgbInputDatePicker.
I'd like to change the default bottom-left position of the popup datepicker, but when I try to use placement in the plunker example (https://ng-bootstrap.github.io/app/components/datepicker/demos/popup/plnkr.html) It doesn't change the position of the popup.
I've tried:
adding [placement]="top" inside of the input tag:
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [placement]="top" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
I've also tried just placing it in the parent div:
<div class="input-group" placement="top">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
but neither seems to change the pop up position. I'm new to Angular, so perhaps I just have the syntax wrong somehow? I noticed other input APIs in the documentation that seemed to be used in this fashion so I thought it might work...
I'm using ng-bootstrap 1.0.0-beta.2, and Angular 4.3.4.
Thanks.
The problem is that you are using a binding to an expression (top means expression in [placement]="top") while I think that your intention is to use "top" constant. You can solve it using one of the 2 methods:
placement="top" (preferred)
[placement]="'top'" (notice additional quotes around top)
When specified properly the placement option works perfectly fine as illustrated in this plunker: http://plnkr.co/edit/NCNmpm3tlxapH4jZS08F?p=preview
I'm using UiBinder to create a custom widget. The UI template is something like:
<g:HTMLPanel styleName="setting">
<div ui:field="dynamicDiv">
</div>
{other stuff here}
</g:HTMLPanel>
Then, to add widget in the dynamicDiv I wrap it with HTMLPanel:
HTMLPanel.wrap(dynamicDiv);
and just use it as a normal widget.
When I run the application normally everything is fine, but if I run in debug mode, the following
assert Document.get().getBody().isOrHasChild(element);
in HTMLPanel.wrap() it fails, hence I am unable to debug the code.
Apart from the annoyance of debugging, I guess there was a good reason to put that assert there, so I would like to understand what is the correct way to wrap that div.
You don't need to wrap the div, just use the appropriate method from the containing HTMLPanel; e.g.:
theHtmlPanel.add(theWidget, dynamicDiv);
I'm working on a site in EPiServer, and whenever I create a page property with the type set to "XHTML string" (which uses the WYSIWYG content editor in Edit mode), it wraps all content in <p> tags.
Is there any way to prevent this from happening? I can't remove the paragraph margins universally through my CSS (e.g. p {margin: 0 !important;}) since I do need the margins for actual paragraphs of text. I've even tried going to the HTML source view in the editor and manually deleting the <p> tags that it generates, but it immediately adds them back in when I save!
It doesn't happen when the property type is either a long or short string, but that's not always an option since the content might contain images, dynamic controls, etc.
This is becoming a real nuisance since it's very hard to achieve the layout I need when basically every element on the page has extra margins applied to it.
As Johan is saying, they are there for a reason - see more info here. That being said, it's not impossible to remove them. It can be done in one of two ways (taken from world.episerver.com:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
myEditor.InitOptions["force_p_newlines"] = "false";
}
or
<script type="text/javascript">
tinyMCE.init({
force_p_newlines: false
});
</script>
You can add your own custom TinyMCE-config that removes P-elements or strip them out using regular expressions either when saving the page or when rendering the property/page.
I think it's a bad idea though. P-elements are what the editors generate the most and in most cases their content is also semantically correct. Better to wrap your property in a div with a class and adjust margins using CSS like you mention.
If you're using a version of EPiServer with TinyMCE editors, you can insert <br /> elements instead of <p> elements if you type shift-enter instead of enter. This should eliminate your margin problems.
More info at the link below:
http://www.tinymce.com/wiki.php/TinyMCE_FAQ#TinyMCE_produce_P_elements_on_enter.2Freturn_instead_of_BR_elements.3F
EDIT: My comment below answers his question better.
I discovered that while I can't remove the <p> tags from the source view (because it adds them back in automatically), if I replace them with <div> tags, it'll leave things alone. It does mean that I've got an extra <div> wrapping some elements that I don't really need, but at least a <div> doesn't add margins like a <p> does, so...good enough!