I'm having this totally silly problem in a custom Foundation 4 form.
What I'm trying to to is a pure CSS toggle where you can switch between "sale" and "rent". They need to be radio buttons but I don't want them to look like that, so I'm trying to follow this example to style them by hiding the inputs and making the labels look as simple links.
The markup is like this:
<form class="custom">
<input type="radio" name="switchRadio" id="sale" value="sale" checked="" class="no-custom">
<label for="sale">Sale</label>
<input type="radio" name="switchRadio" id="rent" value="rent" class="no-custom">
<label for="rent">Rent</label>
<!--more form elements-->
</form>
I know that default markup for custom forms in Foundation is to have the input nested inside of the label but I can't do it that way because I can't target a checked input parent with CSS, but I can target its sibling.
I've added the no-custom class because, as inputs are not visible, I don't need them to be pretty.
So for some weird reason, the label for="sale" works fine, clicking the label checks the input id="sale", but clicking the label for="rent" also checks the input id="sale". Any ideas why?
Ok I've found out that Foundation alters the normal behaviour of labels via javascript. If I disable my javascript, radio buttons and their labels work just fine.
So i followed the recommended markup, nesting inputs inside labels and added a span tag that is sibling to the input, and styled the span instead of the label. I keep the 'no-custom' classes because I don't need custom styles for those inputs.
So in the end it looks like this:
<form class="custom">
<label for="sale">
<input type="radio" name="switchRadio" id="sale" value="sale" checked="" class="no-custom">
<span>Rent</span>
</label>
<label for="rent">
<input type="radio" name="switchRadio" id="rent" value="rent" class="no-custom">
<span>Sale</span>
</label>
</form>
And the CSS in case someone's interested:
input[type=radio] {
display: none
}
input:checked + span {
//your styles for the span next to the checked radio
}
So simple and it had me mad for a while!
Related
I have a form which includes some hidden and visible elements inside of it and I want to submit some of the elements without validating the hidden ones. At the top of my form there are three radio buttons and they control my form elements. When radiobutton1 selected, some of my form elements become visible and when another radio button is selected, there are some other form elements are visible and some of them are hidden. My question is how am I going to submit my form elements if only they are visible? All of the inputs should be in a single form so I am not allowed to separate them into different forms or different components. What I need to do is when I click the submit button of my form, the form should only submit the visible elements, and it shouldn't send me any error because I left some of the inputs empty (the hidden ones).
I also use Vuedalite so I couldn't figure out how to handle this problem. All of the input fields in the form has the required rule but this rule should be active ONLY IF THEY ARE VISIBLE.
Here is a little code.
<form #submit.prevent="submitForm">
<!-- Content Section -->
<div v-show="showContent">
<!-- Name Field-->
<div>
<div>
<label>Name</label>
<input v-model="name" :class="{'is-invalid' : $v.networkname2GHz.$error }" type="text"/>
<small class="errorMessage" v-if="!$v.name.required && $v.name.$dirty">Name field is required.</small>
</div>
</div>
<!-- Surname -->
<!-- Content Section -->
<div v-show="showContent">
<!-- Surname Field-->
<div>
<div>
<label>Surname </label>
<input v-model="surname" :class="{'is-invalid' : $v.surname.$error }" type="text"/>
<small class="errorMessage" v-if="!$v.surname.required && $v.surname.$dirty">Surnamefield is required.</small>
</div>
</div>
<div show="showContent">
<button type="submit">Save</button>
</div>
</form>
What I want to do is when the user selects the Name radio button only the Name field of the form will be visible and Surname will be hidden, I've done that, no problem. But how do I submit only the name field when surname still empty and has the required rule?
You can use v-if instead of v-show.
The main difference between the two is that, v-if - Only renders the element to the DOM if the expression passes. v-show - Renders all elements to the DOM and then uses the CSS display property to hide elements if the expression fails.
I'm new to Materialize and I'm trying to change the active color of the Search and Close icons within a search box. When active, they appear black - I want them to appear white. The examples I've found predate Materialize 1.0. Any help would be greatly appreciated. Thanks!
<form action="" method="post">
<div class="input-field">
<input id="search" type="search" name="search" class="light-blue darken-3 white-text">
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
https://codepen.io/Cormang/pen/oNvqmmM
By default you can make your search icon active by adding active class to <label>. But it seems there is another event that makes its changes. So one of the ways to addressing this issue is using focusin and focusout.
Add a onfocusin to <input> and call a function like this :
function changeColorOnFocus() {
document.querySelector(".material-icons").style.color = "white";
}
Use a onfocusout and call a function like this to change the icon's color.
I want to achieve the same functionality in Angular 4
Replacing label with input textbox and vice versa by clicking a button in AngularJs
How can i achieve that?
It works basically the same, just use *ngIf for conditional rendering and (click) to handle the click event. editMode has to be a property in your component.ts file.
<form>
<label *ngIf='!editMode'>{{name}}</label>
<input *ngIf='editMode' [(ngModel)]="name" name='name'>
<button (click)='editMode=true'>Edit</button>
<button (click)='editMode=false'>Save</button>
</form>
I'm hoping I'm just missing something simple because I've been looking at this for too long, but I'm stumped.
I have a form with inputs bound to vuejs. I have a group of 2 radio buttons for selecting the "gender", and the binding is working perfectly. If I click on either of the radio buttons, I can see the data change in the vue component inspector.
But I'm trying to change the radio buttons to a Bootstrap 4 button group, and can't seem to get the v-model binding to work. No matter what I try, the gender_id in my vue data is not getting updated when I click either of the buttons in the button group.
The form input values are being fed in through vue component properties, but for simplicity, my data for the radio buttons/button group would look like this:
export default {
data() {
return {
genders: {
1: "Men's",
2: "Women's"
},
gender_id: {
type: Number,
default: null
}
}
}
}
Here is the code I have for the radio button version (which is working properly):
<div class="form-group">
<label>Gender:</label>
<div>
<div class="form-check form-check-inline" v-for="(gender, key) in genders" :key="key">
<input type="radio"
class="form-check-input"
name="gender_id"
:id="'gender_' + key"
:value="key"
v-model.number="gender_id">
<label class="form-check-label" :for="'gender_' + key">
{{ gender }}
</label>
</div>
</div>
</div>
Here is the button group version that is not properly binding to the gender_id data in vue.
<div class="form-group">
<label>Gender:</label>
<div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary" v-for="(gender, key) in genders" :key="key">
<input type="radio"
class="btn-group-toggle"
name="gender_id"
:id="'gender_' + key"
:value="key"
autocomplete="off"
v-model.number="gender_id">
{{ gender }}
</label>
</div>
</div>
</div>
I've been using the following Boostrap 4 documentation to try to get this working.
https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons
In the documentation for button groups they don't even include the value property of the radio inputs, whereas they do include it in the documentation for form radio buttons.
https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios
Is this for simplicity or do button groups of radio buttons not even return the value of the checked button?
I see other threads stating that buttons groups are not meant to function as radio buttons, but if that's true for BS4, then why would Bootstrap have button groups with radio buttons as they do in their documentation referenced above? If you can't retrieve the checked state, then why not just use a <button> instead of <label><input type=radio></label>?
Any ideas as to what I'm doing wrong and/or not understanding correctly?
Thanks so much!
Thanks so much to #ebbishop for his helpful insights.
The issue was related to vue and bootstrap both trying to apply javascript to the buttons in the button group.
To get around this issue, it was as simple as removing data-toggle="buttons" from the button group. By removing the data-toggle attribute, the bootstrap js is not applied and vue can manage the button group.
Nothing is actually wrong your use of v-model here.
However: you must add the class "active" to the <label> that wraps each radio-button <input>.
See this fiddle for a working example.
Is that what you're after?
I'm having troubles getting my <input type="textarea" /> to have more than 1 row,
I tried adding the properties in the html, like you would do with a normal <textarea></textarea> like this: <input type="textarea" rows="x" cols="x" />
I even tried to do it in CSS, but it did not work.
I've searched all over the internet for a solution, but i can't seem to find a topic regarding my exact problem anywhere.
The textareas i'm experiencing this with, are on this website:
Vilduhelst
When you press the "Lav dit eget dilemma" button they will appear.
I'm looking for either a HTML or CSS solution.
Why not use the <textarea> tag?
<textarea id="txtArea" rows="10" cols="70"></textarea>
Although <input> ignores the rows attribute, you can take advantage of the fact that <textarea> doesn't have to be inside <form> tags, but can still be a part of a form by referencing the form's id:
<form method="get" id="testformid">
<input type="submit" />
</form>
<textarea form ="testformid" name="taname" id="taid" cols="35" wrap="soft"></textarea>
Of course, <textarea> now appears below "submit" button, but maybe you'll find a way to reposition it.
As said by Sparky in comments on many answers to this question, there is NOT any textarea value for the type attribute of the input tag.
On other terms, the following markup is not valid :
<input type="textarea" />
And the browser replaces it by the default :
<input type="text" />
To define a multi-lines text input, use :
<textarea></textarea>
See the textarea element documentation for more details.
The "input" tag doesn't support rows and cols attributes. This is why the best alternative is to use a textarea with rows and cols attributes. You can still add a "name" attribute and also there is a useful "wrap" attribute which can serve pretty well in various situations.