I was using DHTMLX Scheduler in my MVC project. Everything is fine. But the default scheduler is occupying full screen space. And i am not able to include my own layout with Scheduler. Is there any possibilities to make this.
Thanks
Trying this format get my problem solved.
`<div id="scheduler_here" class="dhx_cal_container" style="height:1000px;width:1075px">`.
You have setup height and width of the Scheduler container. This solved my issue.
scheduler occupies full size of its container,
so you may wrap it with an element of predefined size, e.g.
<div style="height:500px;width:700px"> <%= Scheduler.Render() %> </div>
Or you can explicitly set sizes of the scheduler
scheduler.Height = 500;
scheduler.Width = 700;
Related
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 want to crop images in Fluid with the f:image or the f:uri.image viewhelper (TYPO3 8.7). Since TYPO3 7.2 the usual way does not work anymore:
This:
<f:image image="{file}" width="500c" height="500" />
does not work.
In the fluid guide I found the hint that since TYPO3 7.2 I have to use crop. I found this in the change log:
https://docs.typo3.org/typo3cms/extensions/core/7.6/Changelog/7.2/Feature-65584-AddImageCropping.html
So this should work, but it doesnt:
<f:image image="{file}" crop="0,0,500,500" />
The images are rendered but in default size.
Any ideas? Anything changed in later versions?
I tried with a fresh installation and found my fault.
cropping with c and m does indeed work in TYPO3 8 - the hint in the fluid manual is wrong.
in short syntax you have to use '' in order to send the c or m correct.
This syntax is wrong:
<img src="{f:uri.image(image:file, width:200c, height:200)}">
there is no error message and the images are rendered but the letter c is ignored. You have to use this syntax:
<img src="{f:uri.image(image:file, width:'200c', height:'200')}">
this will work.
One additional hint: after changing the syntax the images are not rendered every time but only when the size has changed. Sometimes you get simply the cached images ... Deleting the content on /fileadmin/_temp does help.
Well - perhaps it will help some one :-)
You can use f:image like below. it's work for me.
<f:image src="{file.originalResource.publicUrl}" width="770c" height="517c" height="350c" />
You could also specify the crop settings in tca and use this settings in the FE, for an example look at the repository : https://github.com/frans-beech-it/t3ext-config_examples.
Besides that, in the install tool you can check if cropping works on your machine. It can happen that there are already processed images for your size, if you adjust the cropping information of image with 1px a new processed image is created. If then the image works, clear the processed files to generate a new image for your desired formats.
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.
I have an HTML code:
<div id="first"></div>
I wish to use javascript (document.findElementById) to change the behavior of the div so that it'll be as:
<div id="first" align="center"></div>
How do I go about that?
document.getElementById("first").setAttribute("align", "center");
Use element.setAttributeMDN
document.getElementById('first').setAttribute('align', 'center');
A less archaic approach is to style the margin:
document.getElementById('first').style.margin = '0 auto';
DEMO
This works if you already have an align attribute for that element
document.getElementById("first").attributes['align'] = 'center';
If you dont already have the attribute, use setAttribute
document.getElementById('first').setAttribute('align', 'center');
document.getElementById('first').align = center
See How to add/update an attribute to an HTML element using JavaScript?
Unfortunately for you, the align attribute is deprecated and shouldn't be used.
You can center DIVs of specific widths by setting the style margin attributes, like so:
document.getElementById('first').style.marginLeft = 'auto';
document.getElementById('first').style.marginRight = 'auto';
If you're set on modifying the align attribute, you can do it like so:
document.getElementById('first').align = 'center';
Other ways to center DIVs (using CSS) can be found here.
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!