I have a table which each row is looping based on api data. In one column I have an edit icon and on click of the icon one pop will open. I just want to show the popup once at a time, means if one popup is open user won’t able to click the remaining edit icon. I just tried to use the css - "pointer-events: none” to disable the icon but how to write the condition?
First, you will need to have access to the popup (generic utility) which can tell you that if the popup is open or closed. You can maintain it by a variable or method - depending on how you have built/using the popup functionality in your application.
If you are using any of the Angular specific built-in libraries for popup then it might have this utility.
Once you get the popup open state then there are multiple ways in Angular template which you can use to set pointer-events none to disabled icon:
NgClass - <a class="icon" [ngClass]="{'pointer-none': popup_isOpen}"></a>
Also in your css define class -
.pointer-none {
pointer-events : none;
}
NgStyle - <a class='icon' [ngStyle]="{'pointer-events': popup_isOpen ? 'none' : 'inherit'}"></a>
Related
Is there a way to change the font of Time4J CalenderPicker in css-style?
I needed a Persian DatePicker in my program so i used Time4J CalenderPicker.
using this code i could change only the font of cells:
CalendarPicker<PersianCalendar> MyDatePicker = CalendarPicker.persianWithSystemDefaults();
MyDatePicker.setCellCustomizer(
(cell, column, row, model, date) -> {
cell.setStyle("-fx-font-family: MyFont;");
}
);
I tried this code but nothing changed:
MyDatePicker.setStyle("-fx-font-family: MyFont;");
But i want to change the font of hole CalendarPicker.
In order to apply the changes, you need to use the following code and set new css styles for calender picker and applying the customizations.
private CalendarPicker<PersianCalendar> MyDatePicker = CalendarPicker.persianWithSystemDefaults();
MyDatePicker.getStylesheets().add("/MyCSS-Style.css");
The following gif, demonstrates my customizations.
The calendar picker itself is only the combination of a text editor and a popup button (bundled in a HBox). However, the calendar view is another component which pops up if users press the button. And this component whose font you wish to change is not yet publicly accessible (with the exception of the cells via a special customizer).
I agree that this should be more flexible. Therefore I have opened a new issue to track this request for enhancement.
Feel free to fork Time4J and do your experiments and submit a pull request on time4j-github. Actually I am busy with other things but can look deeper then.
I am currently working on setting up an input form in Google App Maker.
Some of the textboxes require an input and therefore the labels are tagged with an asterisk (*) when drag them to the page, e.g. "Birthday *".
But when I drag the textboxes into a panel in order to rearrange them, the asterisk keeps disappearing. How can make the asterisk appear again?
Why it happens?
Once you drop a form on a page App Maker will add the following CSS classes to form's widgets:
app-FormBody for the inner form panel
required for all input widgets with input required
Also somewhere in App Maker's internals the following CSS rules are defined:
/* Show asterisk only for direct children of 'app-FormBody' panel
marked with 'required' class */
...
.app-FormBody > .app-TextBox.required > .app-TextBox-Label:after,
... {
content: " *";
}
So, when you drop panel inside form body and drag your input inside that inner panel App Maker CSS rules stop working (the widgets are not direct children of app-FormBody anymore).
How to fix it?
you can try to override default App Maker styles
/* Note: there is no '>' selector */
.app-FormBody .app-TextBox.required > .app-TextBox-Label:after {
content: " *";
}
I'm not sure what side effects it can potentially cause...
You can explicitly add asterisk in binding
#models.MyModel.fields.FieldName.displayName + ' *'
Please, also keep in mind that App Maker will not automatically add those hidden styles to the widgets you'll add after form is generated.
The solution below worked for me, although there might be other ways of doing it too.
Please note: If you will use this only in one page, place the css code at the Page style level, otherwise, place it at the Global style level.
CSS:
.customRequired::after {
content: " *";
}
Once you've written the CSS, go to the onAttach event of the TextBox widget and use the following JS:
var elem = widget.getElement();
elem.children[0].classList.add("customRequired");
Additional notes: I tried using the appmaker default css class which is required but it didn't work. Furthermore, I only tested this on the TextBox widget.
Hope it helps!
I need create modal window with option, that when u open modal window, url is changing for example if u click a href with #123 in url will be after slash #123, and If I want to send someone link to modal window, he will redirect to this modal window after url. Can someone explain me how can I make it?:)
Because at this moment is that when u click some link, url does not change.
I use to modal window bootstrap 3 here is everything what I use in my project :
demo with whole code
https://codepen.io/Turqus/pen/rYeXvV
<a data-toggle="modal" href="#{{$index}}">Launch demo {{$index}}modal</a>
BTW
I also using AngularJS if it will help somehow to create this option.
I use the following service:
https://github.com/garakh/ngSilent
It allows you to change the URL and/or add parameters in the URL without calling the related route and controller. So before opening the modal window, you could use this service to add what you want to the URL.
Note that I have no connection to the developer, I have just used it in the past and it worked well for a similar problem.
Im using the childbrowser plugin with phonegap and jqtouch.
I have this in a menu list to open webpages:
<a href="#"
onClick="PhoneGap.exec('ChildBrowserCommand.showWebPage','http://
mobile.twitter.com/company');" >
The problem is that the onClick opens the childbrowser as soon as I
touch it, and since I have this in a menulist, I cant scroll the list
up and down without the childbrowser opens.
So how can I change the onClick so it act as a tap instead?
What do I have to do?
Thanks!
What's worked for me is to use jQuery's bind approach and bind a tap event to the element that you'd like to call the Childbrowser. Here's some generic HTML and JavaScript that should give you a sense of what to do:
HTML:
<p class="urlStyle">Your link</p>
JavaScript:
$('p.urlStyle').bind('tap',function() {
window.plugins.childBrowser.showWebPage("http://www.yourlink.com");
});
I'm looking to get ideas on how to not change at all the code used to create css tabs (so that I can place it into an include file to avoid duplicating the code across all files that use it), but my current implementation doesn't allow this because I need to select the active tab using id="selectedTab".
The only implementation I found so far that solves this is the following one:
http://unraveled.com/publications/css_tabs/
It requires assigning a class to each tab and uses the body id to determine the active tab.
Is this the only way or is there any other alternatives?
My current code looks like this (the id=noajax" is used to avoid using ajax to load certain pages):
<div class="productTabsBlock2">
<a id="selectedTab" href="/link1" >OVERVIEW</a>
SCREENSHOTS
<a id="noajax" href="/link3" >SPEED TESTS</a>
<a href="/link4" >AWARDS</a>
</div>
EDIT: asp is available as server side and is already used on these pages.
If you're looking for a non-JS solution, then the body class/id provide the easiest way to do what you want.
If you have access to JS library, you can easily add "selected" class to any of the <a> element and modify its appearance.
Just in case you haven't notice, you can use more than one class definition in an element. For example, <a class="noajax selected" /> is valid and both CSS selectors .noajax and .selected will be applied to the element.
An include file for what? If it's a server side programming language like PHP, you can pass a parameter for the selected tab through various methods.
you could use jQuery to add the `selectedTab' id (or class) like so
$('.productTabsBlock2 a').mouseover(function () {
$(this).addClass('selectedTab');
});