Using bootstrap, every time you add a "Label", it creates a new vertical line. However, what I am trying to achieve is having two labels on the same row horizontally.
I have tried working with the "control groups" but have not been able to get it to work the way I want.
Here is essentially what I am trying to achieve (note they are all horizontal):
Date Start & End Time
<<input goes here>> <<start input here>> <<end input here>>
Here's a link to what I am currently stuck with (roughly) on this JS Bin.
Any help would be greatly appreciated!
Use the grid system to create two columns
<div class="row-fluid">
<div class="span6"><!-- first col --></div>
<div class="span6"><!-- second col --></div>
</div>
Related
I've recently begun as an Ops dev on an AEM project, and we have a component (a table, that has a title, some copy and a field where the author can author some HTML to represent the contents of a table, with and elements. This, for whatever reason, has to sit within a component, called ArticleContainer. The title should have an H1 tag if the table is at the top of the page, and an H2 tag if it's anywhere lower down. I've tried using data-sly-test thus:
<sly data-sly-test.topOfPage="${table.firstPosition==true}">
<h1 data-sly-test="${table.headerCopy}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h1>
</sly>
<sly data-sly-test="${!topOfPage}">
<h2 data-sly-test="${table.headerCopy}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h2>
</sly>
Now, this kind of processing has worked elsewhere where the component doesn't sit within a container, but it seems that if it's in a container it always picks up the non-topOfPage condition. I assume there might be a way to maybe do the test within the container component & pass it down into the table component? How would one go about this, or if it's not possible, is there another method by which one might achieve this?
There are two things here:
What does table.firstPosition return? You should be able to debug this in your Sling Model or POJO and probably need to adjust the logic to account for intermediary containers.
HTL/Sightly has a data-sly-element that allows you to change the HTML element based on an expression, you could make your code shorter (and easier to maintain):
<h1 data-sly-test="${table.headerCopy}" data-sly-element="${table.firstPosition ? 'h1' : 'h2'}" class="heading fontH2 headingLinear headingThick">
<span class="tableHeadingWrapper">${table.headerCopy # context='html'}</span>
</h1>
Acutally I have two questions:
Is there any way to configure tinymce to allow only one element in the content with a specific class/attribute? For example, I need only one <div class="title"></div> element in the content, so when you edit this element and press Enter, it creates another <div class="title"/>. Rather, I want just a div with a different class (i.e. <div class="text">). Is that possible?
Is there any way to define allowed elements inside a div? For example, the only valid elements inside <div class="text"> are <br> and inline text. If you try to put a div/p/whatever inside, it will clean it out?
Thanks!
1. forced_root_block : 'div',
forced_root_block_attrs: { "class": "title"},
need to add a valid_element, valid_children and valid_class settings
https://www.tinymce.com/docs/configure/content-filtering/#valid_elements
https://www.tinymce.com/docs/configure/content-filtering/#valid_children
https://www.tinymce.com/docs/configure/content-filtering/#valid_class
I have added a custom set of buttons for adding simple grids to the editor. These have the following structure;
<div class="grid">
<div class="col-1-2"><p>Column 1</p></div>
<div class="col-1-2"><p>Column 2</p></div>
</div>
A custom CSS assigned displays the grids correctly. However as soon as the user goes to edit the text..understandably by deleting it all or highlighting and trying to replace, TinyMCE immediately removes the empty tags so if the user deletes the text Column 1 we end up with this;
<div class="grid">my new text<br />
<div class="col-1-2"><p>Column 2</p></div>
</div>
I have tried adding;
extended_valid_elements : 'div[id|class|style]'
but it had no effect.
How can I stop TinyMCE from removing these empty tags or am I going about this the wrong way..?
Thanks
I have a repeating component in wicked which needs to be added and deleted as per the user requirement. The maximum number of component is predefined. So I am adding the components at start up and hiding and showing based on need. I am required to change the arrangement of the components in the HTML markup when there is any deletion of the component. I use JavaScript for this. I want to know if wicket would lose hold of the components if I do this.
<div wicket:id="borrowerTabs" id="borrowerTabs">
<span wicket:id="borrowerTab1" id="borrowerTab1" ></span>
<span wicket:id="borrowerTab2" id="borrowerTab2" ></span>
<span wicket:id="borrowerTab3" id="borrowerTab3" ></span>
<span wicket:id="borrowerTab4" id="borrowerTab4" ></span>
<button wicket:id="addBorrower" id="addBorrower" type="button"></button>
<button wicket:id="deleteBorrower" id="deleteBorrower" onclick="updateUIForDeleteBorrower()" type="button"></button>
</div>
If delete the borrowerTab3, contents inside borrowerTab4 will be replacing the contents inside borrowerTab3 and the model objects too will be swapped though I do not do a target.add(borrowerTab3). Now while form submission, I am not getting the values of the fields inside borrowerTab3.
I'm not sure if it helps but try component.setVisible(false) in your java code to hide it.
What is the best way to select a single content element?
I have a static html template like this:
<html>
...
<div class="left clearfix">
<h1><img src="fileadmin/templates/images/ueberschrift_startseite.png" alt="Willkommen" /><span>Willkommen</span></h1>
<p>EINLEITUNGSTEXT 1 EINLEITUNGSTEXT 1</p>
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
</ul>
<h3>HEADLINETEXT 3</h3>
<p>TEXT TEXT TEXT TEXT </p>
</div>
...
</html>
In my Backend I have added
A Content Element for the <h1>
A Content Element that should be displayed between the <p> Tags where now Einleitungstext1 is displayed
A Content Element that contains the LI for the UL Section
and so on.
All Elements are in the same column.
I what to take my static HTML Template and fill several SPECIFIC parts with elements that can be edited in the backend.
I hope I could explain what my problem is.
How do you configure your templates? Is there a much better way to replace only specific parts of a static template?
Regards,
Max
I assume that you know how to use marks and subparts in TypoScript, in such case what you have to do is set marks in your template, put each CE in separate column (maybe you'll need to add custom columns if all left, default, right and border (0-3) columns are used for other things) and finally just map these columns to the marks.
tip: TemplaVoila allows for more combinations as you can map not only container for CE's but also other things (header fields, image fields, TS snippets etc.)