I'm using a third party plugin to show a form for adding and saving the Birthday.
It shows the input fields vertically ordered as:
Day
Year
Month
I used flex and order attribute to reorder the input fields as follow:
Day
Month
Year
But now if I tab through the inputs, the focus goes from Day to Year.
I would be able to fix it by using the tabindex inside the HTML markup, but I don't have access to the HTML.
Is there any other way to change the tabindex to: Day -> Month -> Year?
Is there any other way to change the tabindex to: Day -> Month -> Year?
No. When using tab the focus follows the order of elements in the HTML, unless tabindex attributes are present.
Changing the focus order is really not within the scope of CSS as a stylesheet.
I had a similar problem. As a javascript solution you could reassign the tabindex to the order value.
Here is part of the code I used to solve it :
/**
* for ex. : ELEMENT_TO_SET = 'input,textarea'
* ELEMENT_WITH_ORDER_VALUE = document.getElementById('elementId')
*
* this will set all inputs and textareas that are containing in my element who has an order value
*/
$(ELEMENT_TO_SET).each(function(){
$(this).attr("tabIndex", getComputedStyle(ELEMENT_WITH_ORDER_VALUE,null).order);
});
Related
How can I set classes to check if input or date range picker has value or not.
Also, the placeholder in date picker not showing until the focus.
How can I fix that without adding extra TS code?
You could do it like this:
<input [(ngModel)]="inputValue" [ngClass]="{'error': !inputValue}">
I'm using the full-calendar component for Angular and I want to customize the content of each date cell according to different conditions. For example if the date is invalid (I have a function that validates the date), I want to change the date's cell background color. Otherwise, if its valid I want to add a plus button inside to add events. Besides that I want to add custom animations and hover effects.
How can I take control of the date is being render ?
I manage to change the background color with dayCellDidMount hook:
dayCellDidMount: (arg) => {
if(!this.dateIsValid(arg.date, arg.isPast)){
arg.el.style.backgroundColor = "#eeeeee";
}
},
I don't think that's the best way to do it and I still can't manage to add the plus button inside the cell.
Can someone achieve this or something similar? Your help would be appreciated, thanks.
If you know another calendar to integrate with Angular that has this features I'm open to suggestions.
I want to create a "Click Element" trigger with a CSS selector... basically I want to set a trigger on a specific element, rather than all elements. So I create a trigger called "Click - All Elements" and then "Some clicks"... but it asks me to attach a variable to it??
So I tried to create an Auto-Event Variable with type "Element"... but then "element" in the data layer just returns the URL that element links to, rather than the entire element (it's returning "http://example.com/signup", rather than the actual HTML element)
This doesn't make any sense. All I want is to set a trigger on a specific CSS selected element. Please help!
To check for a CSS selector in a trigger, you need to create a variable that looks for your specific CSS selector. To do this, you need a variable called "DOM-element" to specify to your click trigger with the "Some clicks" option.
Instructions:
If you go to the section with variables, click the "NEW"-button to create a new variable. Once the right hand side pans out, open the "Variable configuration" and click on the one called "DOM-element". In the drop-down, you can select CSS-selector. Insert the value you'd like to check for in your trigger, and this should do as you ask.
So I'm assuming you have multiple elements that have the same class, and yet you only want to target one with your click element trigger? If you can add IDs or data elements instead of just relying on a class, you can still do it using a "Click" event and "matches css selector" in your "Fires On" setting.
So if you had the following element:
<a id="whatever" href="whatever">My Link</a>
Since IDs are unique you would just use the following selector "matches css selector":
#whatever
With data attribute on specific element, you can target all elements with specific classes, but limit it based on a unique identifier you set in a data attribute:
So if you had the following element:
<a href="whatever" data-mytrack='4'>My Link</a>
You would use the following selector for "matches css selector":
a[data-mytrack='4']
I'm using like this, and it works.
Trigger Configuration
I'm creating a CakePHP 3.0 form, and I have several input fields (Form->input) where users will enter values of United States Currency. I'd like to add a $ symbol to the left of the input box. From my research, it does not appear that CakePHP's Form supports this on its own, so I believe that a CSS solution would be ideal. The corresponding fields in the database are floats.
:before and :after are applied inside a container, which means you can use it for elements with an end tag.
Source
Basically, what that means is you cannot use before on inputs, since it would insert the content into the input.
You can do it with CSS's :before pseudo element, but you have to wrap the input in a element, or place an element before it:
.inputcon:before{
content:'$'
}
Or, you can do it with jQuery:
$("input").wrap("<span class='inputcon'>");
Or with Vanilla JS:
var inputs = document.getElementsByTagName("input");
for(var i =0;i<inputs.length;i++){
var wrapper = document.createElement("span");
wrapper.classList.add("inputcon")
inputs[i].parentNode.insertBefore(wrapper,inputs[i]);
wrapper.appendChild(inputs[i])
}
It sounds like you want to override the input template to include a $ before the input field. The default input template is <input type="{{type}}" name="{{name}}"{{attrs}}>, so it would change to $ <input type="{{type}}" name="{{name}}"{{attrs}}>.
http://book.cakephp.org/3.0/en/views/helpers/form.html#customizing-the-templates-formhelper-uses
You could override the entire form (probably not what you want), or just that one input. Most of the examples in the book show you how to override for the entire form, but you can override for just that one input field.
http://api.cakephp.org/3.0/class-Cake.View.Helper.FormHelper.html#_input
Restricting the field itself to only numbers/symbols that are appropriate for a currency is a javascript/html5 issue, separate from cake. If this is what you want, you should also validate server side with cake.
Additionally, somewhat off topic, currency fields should not be stored as floats in the database. They should be stored as some fixed precision type (such as the decimal type in mysql).
I'm creating composite control, which has two other components that rely on each other.
In component A (image), I access component's B (input) UniqueID which equals
MyTextBox1$BoldTextBox
I use it in onclick JavaScript code...
But in rendered HTML input element has following id
MyTextBox1_BoldTextBox
So my javascript code , generated inside composite control has something like this:
onclick=$('#MyTextBox1$BoldTextBox').....
instead of:
onclick=$('#MyTextBox1_BoldTextBox').....
Could somebody please explain what is happening, and how can I reliably associate those two controls ?
Thanks , Paweł
You want the ClientID property instead of the UniqueID property.
The reason for this is (sort of) explained on Atanas Korchev's blog post "The difference between Id, ClientID, and UniqueID".