I want to apply a specific css class on the entire ionic2 selector class, rather than on the ion-content.
For example I have a page with a selector:
selector: 'home-page'
Now I want to toggle a css rule ( toggle a class 'resize-page' ) via TS function inside the ionic2 page. So each time I push the button it adds or toggles this class to the entire page selector.
You can use ngClass:
<ion-content [ngClass]="getClass()">
</ion- content>
And in your .ts file:
buttonClickedTimes = 0;
getClass(): string {
// based on how many times the button is clicked
// return 'class-1' or 'class-2'
this.buttonClickedTimes % 2 == 0 ? 'class-1' : 'class-2';
}
clickButton(): void {
this.buttonClickedTimes ++;
}
OR, as iWork suggested in a comment:
<ion-content [class]="buttonClickedTimes%2 === 0 ? 'class-1' : 'class-2'"></ion-content>
Related
How to fix the problem of having the navbar as position: fixed in Sitecore 9.3. I saw some solutions on the blogs, but it only fixes the issue on the Sitecore 8 versions.
Basically when I open the partial design in Sitecore Experience Editor, I have set my navbar as position fixed in theme css file, and it shows the navbar below the scWebEditRibbon. I also saw that scWebEditRibbon is now position fixed, still it does not fix my issue since I also have position fixed on my element.
I fixed the issue by using the script provided Richard Szalay, I just changed the variable as you can see here:
Here is the script:
// Repositions a position-fixed header so that it always appears under the SC experience editor ribbon
define(["sitecore"], function (Sitecore) {
return {
priority: 50,
execute: function (context) {
// TODO: Change this CSS selector to suit your application
var FIXED_NAV_SELECTOR = '#navbar';
// the 'cross piece' is a blank div that is sized to match the iframe content (where the actual ribbon is)
var scWebEditRibbon = window.parent.document.getElementById('scWebEditRibbon');
var nav = window.parent.document.querySelector(FIXED_NAV_SELECTOR);
if (scWebEditRibbon && 'MutationObserver' in window) {
var observer = new MutationObserver(function (mutations) {
nav.style.top = scWebEditRibbon.style.height;
});
observer.observe(scWebEditRibbon, { attributes: true, attributeFilter: ['style'] });
}
}
};
});
I have used primeNg component on bootstrap's bs-modal,i used scrollbar for multiple notes. when click on p-calendar component, calendar is hiding behind scroll bar. As per showing in image.
Add following dependacnies
HostListener from angular-core
import $ from 'jquery';
and write following code to your ts component file.
#HostListener('document:click', ['$event'])
openCloseCalendar(ev) {
if("P-CALENDAR" == ev.path[2].tagName || ev.path[3].tagName){
let calElem = ev.path[2] || ev.path[3];
let target = $(calElem).find(".ui-datepicker")[0];
let calTop = $($(calElem).find("input")[0]).offset();
if(calTop && calTop.top){
$(target).css({"display":"block", "min-width": "200px", "position": "fixed", "top": calTop.top, left: ev.offsetY})
}
}
}
Try adding [appendTo]: 'body' in your p-calendar.
I'm looking for some help about using different templates for each page. I'm using everything is on the TYPO3 video tutorial (linked below) but isn't explain there how to do what I need (which code must be write and where).
Site Package tutorial part 1
Site Package tutorial part 2
Site Package tutorial part 3
I suggest to start with the site package builder: https://sitepackagebuilder.com/ based on Bootstrap package which will a) bring you already helpful templates and b) shows you how to make your own ones (Example.html / Configuration/TsConfig/Page/Mod/Weblayout/BackendLayout.tsconfig).
Some helpful references: https://docs.typo3.org/typo3cms/SitePackageTutorial/FluidTemplates/Index.html
Connecting Fluid templates to Backend Layouts
So you have a special template for the about page and want to use it in TYPO3. You'll have to create a new Backend Layout for this template.
The Backend Layout could be configured in Page TSconfig like that:
mod.web_layout.BackendLayouts {
about {
title = About page
config {
backend_layout {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = main column
colPos = 0
}
}
}
}
}
}
icon = EXT:your_sitepackage/Resources/Public/Images/BackendLayouts/About.svg
}
}
In the next step, you'll have to connect your new Backend Layout with your template. This is done in TypoScript setup:
page = PAGE
page {
10 = FLUIDTEMPLATE
10 {
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
// select a layout template depending on the page's BackendLayout:
key.data = pagelayout
// Important! If you set BackendLayouts through TSconfig, you MUST use the prefix 'pagets__':
pagets__1_column = TEXT
pagets__1_column.value = EXT:your_sitepackage/Resources/Private/Templates/1Column.html
pagets__about = TEXT
pagets__about.value = EXT:your_sitepackage/Resources/Private/Templates/About.html
default = TEXT
default.value = EXT:your_sitepackage/Resources/Private/Templates/1Column.html
}
layoutRootPaths {
10 = EXT:your_sitepackage/Resources/Private/Layouts/
}
partialRootPaths {
10 = EXT:your_sitepackage/Resources/Private/Partials/
}
variables {
}
}
}
Official video tutorial
See also the YouTube video about this topic: How to implement frontend layouts in TYPO3 using backend layouts
Finally, assign your new Backend Layout to single pages in TYPO3 backend
This is done in the page properties:
Open the page properties of a page in the TYPO3 Backend.
In the tab 'Appearance', you will find two options to assign Backend Layouts:
'Backend Layout (this page only)'
'Backend Layout (subpages of this page)'
These are pretty much self-explanatory:
The first option sets the desired Backend Layout only for this single page.
The second option will assign the Backend Layout for all sub pages of the current page. You can override this Backend Layout again: open the page properties of the sub page where you want a different layout and assign a new one.
On this website you can find an even more detailed explanation with screenshots (taken from the Backend of TYPO3 6.2).
I'm using Drupal 8. How to remove N/A option in radio button?
n/a option doesn't shows up if your field is required.
Assuming you don't want to make it required, here are the steps to remove this option.
Firstly, you need to add a process function for the radio buttons (you must create a module and insert this code in it)
function yourmodule_element_info_alter(array &$types) {
if (isset($types['radios'])) {
$types['radios']['#process'][] = 'remove_radio_na';
}
}
Then create the process function. Let say that you have several boolean fields and you would like to remove the n/a option only for the field "field_bool_no_na"
function remove_radio_na($element) {
if ($element['#field_name']=='field_bool_no_na') {
unset($element['_none']);
}
return $element;
}
Try this
function MODULENAME_options_list_alter(array &$options, array $context) {
unset($options['_none']);
}
If you want a CSS solution, you can hide the 1st child of the .form-radios item like this:
.form-radios > .form-item:first-child {
display: none;
}
(as long as you don't have any required Booleans.)
The best solution will be using hook_form_alter
After adding bellowed code on your hook_form_alter "N/A" removed from Radio Buttons.
Sample code for removing n/a in user profile custom radio button field:
function your_module_name_form_alter(array &$form, FormStateInterface $form_state, $form_id) {
if (strpos($form_id, 'user_form') !== FALSE) {
unset($form['your_field_name']['widget']['#options']['_none']);
}
}
I am trying to make people picker column in my list edit form "Read-only". I found many solutions that worked on SharePoint 2010 but couldn't find a reliable solution for SharePoint 2013/Office 365.
It would be great if someone can point me to a good solution.
To make People picker readonly, you can use the below JQuery code:
$(".sp-peoplepicker-delImage").css({ 'display' : 'none'});
$(".sp-peoplepicker-editorInput").css({ 'display' : 'none'});
You can also apply them with the help of css:
<style>
.sp-peoplepicker-delImage{
display:none;
}
.sp-peoplepicker-editorInput{
display:none;
}
</style>
This is the easiest and fastest way to make people picker fields read only in SharePoint
2013/online, but it will make every people picker field on the form read only. So please let
me know if you want for a specific column.
Since in SharePoint 2013 for rendering List Forms was introduced a new client side rendering engine (called CSR) that is based on JavaScript/HTML i would recommend the following approach. To customize edit form in order to render People Picker in edit form using display mode as explained below.
Steps
1) Create a JavaScript template for rendering People Picker in display mode:
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Fields: {
"AssignedTo": {
EditForm: renderAssignedTo
}
}
}
});
});
function renderAssignedTo(ctx) {
var item = ctx['CurrentItem'];
var userField = item[ctx.CurrentFieldSchema.Name];
var fieldValue = "";
for (var i = 0; i < userField.length; i++) {
fieldValue += userField[i].EntityData.SPUserID + SPClientTemplates.Utility.UserLookupDelimitString + userField[i].DisplayText;
if ((i + 1) != userField.length) {
fieldValue += SPClientTemplates.Utility.UserLookupDelimitString
}
}
ctx["CurrentFieldValue"] = fieldValue;
return SPFieldUserMulti_Display(ctx);
}
2)Open Edit Form page in edit mode
3)Place Script Editor web part on the page and insert the specified template by enclosing it using script tag
That's it.
Result
ยจ