I'm sure there's a really simple solution to this but I can't seem to find it, and I haven't found the question asked here already.
I'm trying to align a layout widget (area) so that when another widget is added it appears to the right of the first widget and not below.
I was hoping i could sort this with flexbox and the artistContainer class but it doesn't seem to be possible.
Dev tools and desired outcome
home.html
<section class="bodysect--dark" id="artists">
<h2 class="body__heading">Artists</h2>
<div class="artistContainer">
{{
apos.area(data.page, 'artist', {
widgets: {
artist: {}
}
})
}}
</div>
</section>
Widget.html
<div class="artist">
<div class="artistImage">
{{ apos.singleton(data.widget, 'areaImage', 'apostrophe-images', {
widgets: {
'apostrophe-images': {}
}
}) }}
</div>
<div class="artistName">
{{ apos.singleton(data.widget, 'singletonName', 'apostrophe-rich-text', {
widgets: {
'apostrophe-rich-text': {}
}
}) }}
</div>
<div class="artistBio">
{{ apos.singleton(data.widget, 'singletonBio', 'apostrophe-rich-text', {
widgets: {
'apostrophe-rich-text': {}
}
}) }}
</div>
</div>
widget index.js
module.exports = {
extend: 'apostrophe-widgets',
label: 'Artist',
contextualOnly: true,
addFields: [
{
name: 'artistImage',
type: 'singleton',
label: 'Image Area',
required: true
},
{
name: 'artistName',
type: 'singleton',
label: 'Name Area',
required: true
},
{
name: 'artistBio',
type: 'singleton',
label: 'Bio Area',
required: true
},
]
};
Thanks in advance!
There is nothing preventing you from lining up horizontally, however, to maintain the proper flex contexts, you'll need to apply styles to apostrophe-generated markup instead of just your project level classes. Here is some sample code I just demo'd
.horizontal-area {
.apos-area-widgets, // proper context for logged-in user
.apos-area { // proper context for logged-out user
display: flex;
}
.apos-area-widget-wrapper {
flex-grow: 1;
flex-basis: 0;
}
}
http://g.recordit.co/IlOPYKRUo0.gif
You might want to provide additional UI changes to adjust the horizontal Add Content line within the horizontal area scope.
I'm trying to build a vue.js front-end and the design is calling for 100% width tiles with a dynamic background image that will be passed along the rest of the content to the page. I already have the payload passing to the component that renders each tile, but I need to render the background image for each of the tiles. I also need to mention that the images are actually 3 images for each tile that need to render for each of our 3 breakpoints. So far I was able to pass one image by using :style="'background-image: url(' + backgroundImage + ')'" but this only serves one image per tile. My question is, what would be the best way to pass all 3 images per tile and render them correctly?
I have heard online that I should just use srcset and pass all 3 to an <img> tag, and make that image the background by using CSS, but that just seems unorthodox.
Is there a more elegant way to deal with responsive background images in reusable components in vue.js?
Home Page
<template>
<div class="Home">
<HomePageTile v-for="tile in tiles" :key="tile.title" :tile-title="tile.title" :tile-desc="tile.description" :tile-type="tile.position" :background-image="tile.backgroundImage"/>
</div>
</template>
<script>
import HomePageTile from '#/components/HomePageTile'
import tileImage1 from '#/assets/optimized/image1.jpg'
import tileImage2 from '#/assets/optimized/image2.jpg'
import tileImage3 from '#/assets/optimized/image3.jpg'
import tileImage4 from '#/assets/optimized/image4.jpg'
export default {
name: 'Home',
components: {
HomePageTile: HomePageTile
},
data () {
return {
tiles: [
{
title: 'Title 1',
description: 'Content 1',
position: 'right',
backgroundImage: tileImage1
}, {
title: 'Title 2',
description: 'Content 2',
position: 'right',
backgroundImage: tileImage2
}, {
title: 'Title 3',
description: 'Content 3',
position: 'right',
backgroundImage: tileImage3
}, {
title: 'Title 4',
description: 'Content 4',
position: 'right',
backgroundImage: tileImage4
}
]
}
}
}
</script>
Tile Component
<template>
<div :class="tilePosition(tileType)" :style="'background-image: url(' + backgroundImage + ')'">
<template v-if="tileType">
<div class="home-page-tile--container home-page-tile--container__with-desc">
<h2 class="home-page-tile--container--title">{{ tileTitle }}</h2>
<p class="home-page-tile--container--description">{{ tileDesc }}</p>
</div>
<div class="home-page-tile--call-to-action" v-if="callToAction">
<p class="home-page-tile--call-to-action--text">{{ callToAction.text }}</p>
<Button class="home-page-tile--call-to-action--button" :button-route="callToAction.buttonPath" :button-text="callToAction.buttonText" :button-style="callToAction.buttonStyle" />
</div>
</template>
<template v-else>
<div class="home-page-tile--container">
<h2 class="home-page-tile--container--title">{{ tileTitle }}</h2>
<Button :button-route="buttonPath" :button-text="buttonText" button-style="pill"/>
</div>
</template>
</div>
</template>
<script>
import Button from './Button'
export default {
name: 'HomePageTile',
props: {
tileType: String,
tileTitle: String,
tileDesc: String,
backgroundImage: String,
buttonText: String,
buttonPath: String,
callToAction: Object
},
components: {
Button: Button
},
data () {
return {
tilePosition: function (el) {
if (el) {
return 'home-page-tile home-page-tile__' + el
} else {
return 'home-page-tile'
}
}
}
}
}
</script>
I am using bootstrap table and have a column of check box type.
$('#table').bootstrapTable({
columns: [{
field: 'GroupId',
title: 'Group ID'
}, {
field: 'IsActive',
title: 'Active',
checkbox: true
}]
});
When i am using 'checkbox:true' then the column comes with checkbox icon including the header. Can i keep the check box icons in rows but a title for header ?
You have to add two configurations:
First disable default checkbox header in table options adding:
checkboxHeader: false
Enable checkbox title & setup custom title in column options adding:
checkbox: true,
showSelectTitle: true,
field: 'IsActive',
title: 'Active'
In your example:
$('#table').bootstrapTable({
checkboxHeader: false,
columns: [{
field: 'GroupId',
title: 'Group ID'
}, {
checkbox: true,
showSelectTitle: true,
field: 'IsActive',
title: 'Active'
}]
});
<table class="table table-bordered" id="testbedsTable"
data-pagination="true"
data-search="true"
data-checkbox-header="false">
<thead>
<tr>
<th scope="col" data-field="State" data-checkbox="true" id="tableDefaultCheck" data-show-select-title="true">Validate</th>
whereas data-checkbox-header="false" and data-show-select-title="true">Validate solved my problem
I ran a sample of this and I was able to get it to work when adapting it to a sample I already have. I doubt it is populating the checkbox properly but I wasn't concerned with trying to make that work.
http://www.codeply.com/go/h7PZLLTY0b
{
field: 'price',
title: 'Item Price',
checkbox: true
}
{
field: 'ActionField',
title: '',
sortable: false,
width: '25',
halign: "center",
formatter: "CheckBoxFormat",
checkbox: false,
clickToSelect: true,
},
function CheckBoxFormat(value, row) {
return '<input type="checkbox" class="chk" data-ID="' + row.ID + '" onclick="AddRemoveItems(this);"/>';
}
I'm creating an asp gadget and trying to add tinymce text editor to the text area. But it doesn't appear the editor .So the added code is as follows, Input Fields are showing in the view but doesn't appear the editor
<script src="JavaScripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="JavaScripts/tiny_mce/tiny_mce.js" ></script>
<script type="text/javascript">
// Initialize your tinyMCE Editor with your preferred options
tinyMCE.init({
// General options
mode: "textareas",
theme: "modern",
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Example content CSS (should be your site CSS)
content_css: "css/example.css",
});
</script>
<div class="form">
<%=Html.Partial("Menu") %><br /><br />
<% Html.BeginGadgetForm("Update"); %>
<label for="message">Title :</label>
<%= Html.TextBox("updatedTitle",Model.Title %>
<label for="message">Message :</label>
<%= Html.TextAreaFor("updatedName",x=>x.Message %>
<input type="hidden" name="id" value="<%= Model.Id %>" />
<input type="submit" value="Update" />
<% Html.EndForm(); %>
</div>
The Text area doesn't apply the tinymce editor
You need to add the tinyMCE class and name to the text field:
TextMode="MultiLine" class="myTextEditor" name="tinymce"
Don't know if you got this working in the end...but I had tons of trouble getting the tinyMCE working. Followed loads of posts to the letter and no joy. In the end I found a post with a simple example that finally worked. No idea what it was about the particular post that was different but do notice you have mode specifying textareas and this example has selector specifying textarea. Just in case it helps you or anyone else who comes across this the question, the below code is working for me:
<div class="textarea mce-tinymce">
<script type="text/javascript">
tinymce.init({
selector: "textarea",
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern imagetools"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
]
});
</script>
#Html.TextAreaFor(model => model.BlogPost)
#Html.ValidationMessageFor(model => model.BlogPost)
</div>
first be sure the java link is correct
<script src="../tiny_mce/tiny_mce.js"></script>
second add new java item and add this code
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
// Theme options
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Example word content CSS (should be your site CSS) this one removes paragraph margins
content_css: "css/word.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "me",
staffid: "991234"
}
});
i named this file TMS
<script src="../tiny_mce/utils/TMS.js"></script>
and add the first java link and the second links to your code like this
<script src="../tiny_mce/tiny_mce.js"></script>
<script src="../tiny_mce/utils/TMS.js"></script>
now how we can add editor to textbox :
<asp:TextBox ID="T25" runat="server" TextMode="MultiLine" Width="532px"></asp:TextBox>
thanx
I'm using MVC4,Kendo tabstrip along with jQuery Tooltipster for showing validation messages.
My issue is the validation message from Tab 1 is getting overlapped on Tab 2 due to z-index. I have tried setting z-index for tooltipster-base but isn't working.
My HTML code looks like something this:
<div id="tabstrip">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div><form id="myform">
<input type="text" name="field1" />
<input type="text" name="field2" />
<br/>
<input type="submit" />
</form></div>
<div><form id="myform2">
<input type="text" name="field3" />
<input type="text" name="field4" />
<br/>
<input type="submit" />
</form></div>
</div>
Script:
$(document).ready(function () {
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(0);
// initialize tooltipster on text input elements
$('#myform input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
$('#myform2 input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
// initialize validate plugin on the form
$('#myform').validate({
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
success: function (label, element) {
$(element).tooltipster('hide');
},
rules: {
field1: {
required: true,
email: true
},
field2: {
required: true,
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
// initialize validate plugin on the form2
$('#myform2').validate({
errorPlacement: function (error, element) {
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');
},
success: function (label, element) {
$(element).tooltipster('hide');
},
rules: {
field3: {
required: true,
email: true
},
field4: {
required: true,
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
});
Please check this:
JSFiddle: http://jsfiddle.net/vishalvaishya/bCZWd/2/
Please help me for setting proper css style.
Found solution myself only. Might be helpful for someone.
Done some updation in tooltipster logic.
Added extra option (appendTo) to place tooltip over specific element only:
c = {
animation: "fade",
appendTo: "body",
arrow: true,
...
And changed parameter of tooltipster.appendTo('body') in showTooltip function like;
tooltipster.appendTo($(l.options.appendTo));
Usage:
$('#profileForm input[type="text"]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right',
appendTo: '#profileForm'
});
Like this you can use tooltipster on different kendo-tabs or on different divs.
See on JSFiddle:
Previous : http://jsfiddle.net/vishalvaishya/bCZWd/2/
Working : http://jsfiddle.net/vishalvaishya/bCZWd/3/