Is there a way to customize the ion-range with the disabled property active?
Using ion-range as a visual cue to show where the user is in the (order)process. The user will not have the option to change the range, so the disabled property is added. This property overwrites all the custom color css. But I can't find the disabled css to overwrite it again to the desired result.
This is the custom css of the ion-range. The secondary color is the green color seen below.
Can we achieve the desired result below with the ion-range where the user can't control the slider?
<ion-range value="{{ range }}" min="0" max="2" color="secondary" disabled></ion-range>
Result (with disabled property)
Desired result (without disabled property)
EDIT
Since you can't change the disabled property and it's css variables, we want to display the slider without pointer or touch control by the user.
pointer-events:none stops you from interacting with it
<ion-range style="pointer-events: none;"value="{{ range }}" min="0" max="2" color="secondary"></ion-range>
:) my final answer
just add style="pointer-events: none;"
Related
I'm working on a form. One of the fields must ask the user to choose an image from a selection. I would like to achieve a similar result.
So I thought of an <ion-select> which would have a corresponding <ion-select-option> for each image, like this
<ion-item>
<ion-label>Images</ion-label>
<ion-select>
<ion-select-option>
<ion-img value="image1" src="https://via.placeholder.com/150"></ion-img>
</ion-select-option>
<ion-select-option>
<ion-img value="image2" src="https://via.placeholder.com/150"></ion-img>
</ion-select-option>
</ion-select>
</ion-item>
but I get the following result.
The problem is that the images are not displayed and that the ion-select dialog box is not very suitable for image selection. So I don't know if another ionic component would do a better job or if I should choose a non-ionic solution...
It is not possible to add images in ion-select-option but you can achieve the same thing by your own by :
create a page and make normal ion-list with a ngfor and inside
each item put an image and before it a radio button for single
choice or checkbox for multichoice.
open this page as modal and give this modal custom css in golobsl
.scss file as normal select alert like (width:450px;height:350px;).
when you open the modal send array that will contain images or
api link to requested when modal opens.
get the props of modal that is sent with it with navParams and
but that you will get what you wanted exactly.
And for any more info write a comment and will be with you anytime.
I use a php script that inserts data into the jos_content table in order to create an article. In the article content is a textarea with the attribute required.
<textarea name="comment" required></textarea>
But, when I open my article manager and find this created article, there is no required attribute anymore -- everything else is fine. The same thing happens with maxlength.
I use JCE, so I am assuming that it is responsible for killing these attributes somehow.
How can I prevent these attributes from being stripped from my textarea element within my articles?
Have you tried to change the settings of JCE editor. Go to the Editor Global Configuration > Cleanup and Output and set the HTML Validation to NO.
This will affect your code, but it will keep the attributes of textareas in the articles. Of course, you have to set the attribute to have value: required="required".
Or, just use another editor: Tiny etc...
I faced to the same issue. The problem is that JCE will remove all element which do not have any content inside.
In other words, this will be removed:
<textarea name="comment" required></textarea>
And this will not:
<textarea name="comment" required> </textarea>
When I click on an image inside a label to select/deselect a checkbox, it changes its state accordingly in Firefox and Chrome. However, in IE8, the checkbox never responds if I click on an image and only changes its state if I click on the text.
jsFiddle is here (click on the white box image before the text in IE):
http://jsfiddle.net/dzTMD/3/
I'm not sure what the problem in IE8 but you can use background image within css instead of attaching it directly in html and this will work in IE. Here is fiddle with example
put the input field inside the label tag
example:
<label>
<input name="yn00" id="yn00_1" type="checkbox">
<div class="indicator"></div>
<span>My text for this label</span>
</label>
all elements will work inside the label, your img aswell..
just remember to use opacity to hide the input field .
IE8 will not fire events on display:none or visibility:hidden elements
I have a mobile webpage that is just a simple form with a submit button.
I have just tried to make the submit button bigger in the css file and also inline on the submit button itself and it doesn't show.
If I use the Ripple extension for Chrome it shows in there (but Ripple doesn't have the exact look of the iPhone form elements yet).
I was wondering if this is a known issue - i.e. incase the browser removes styling from submit buttons etc. or if it is something that I am doing wrong.
The line in question is simply:
<input type="submit" value="Submit" class="submit" style="text-align: center; width:30%; height:50px; "/>
The height rule won't apply to the button unless you specify "border: 0". However, you'll lose the default styling of the button, but you can get the styling back with your own CSS.
Not sure if you're trying to get the submit button centered in the form - but if you are, you should set the button to "display: block" and then add "margin: 0 auto". The text-align rule isn't necessary.
This should help you
-webkit-appearance: none;
add it to the input button you're styling
I've noticed navigating in websites like Dell or Google, that typing in their search text box with iPhone, in the keyboard appears a blue button 'Search' instead of the standard 'Go' button that appears on any normal form.
What should you do to display the search button?
having type="search" is usually all you need to make software Search keyboard appear however in iOS8 it is mandatory to have a wrapping form with action attribute.
So the following code would have a software keyboard with “Return” button
<form>
<input type="search" />
</form>
But this code should have blue “Search” button instead
<form action=".">
<input type="search" />
</form>
You can influence this behaviour with:
<input type="search" />
JS Bin demo
Ignore the submit button's text being 'kettle,' I just wanted to be sure that it wasn't the submit button influencing the text of the iOS keyboard...
This is, of course, backwards compatible since a browser that doesn't understand type="search" will default to type="text", which is useful for creating forward-planning html5 forms.
I was not able to get the search button with
<input type="search" />
However, I did get it to appear with
<form>
<input name="search" />
</form>
On iOS 8 you can enable the blue "Search"-button on the keyboard by doing one of:
add input name=search
add input type=search
add id to input with the case sensitive word "search" in the ID, for
example the-search or thesearchgod
In HTML5 standard, adding enterkeyhint attribute on the input is the proper way to change the label on the virtual keyboard
<input enterkeyhint="search" />
If no enterkeyhint attribute is provided, the user agent might use contextual information from the inputmode, type, or pattern attributes to display a suitable enter key label (or icon).
See MDN Docs about enterkeyhint
When using #Anton Bielousov suggested solution, this also changes the styling of Android Devices. To counter this I had to:
Add form around input.
Add type="search"
Add name containing search
Add styling to counter the unwanted android styling
Android styling:
input[type=search] { -webkit-appearance: none; }
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
<form action="" class="search-bar__form-form">
<input
class="search-bar__input"
name="search-bar"
type="search"
/>
</form>
The keyboard is handled by the operating system (iOS) and cannot be directly altered. The type of input required determines the type of keyboard to display.
If the website in question is HTML5, then #David's answer is valid.