I have the following form, but I don't get align checkbox
<!-- Multiple Checkboxes (inline) -->
<div class="form-row">
<label class="chkdonar" for="donarchkform-0">Si, quiero donar a AMIAB</label>
<input id="donarchkform-0" checked="checked" name="donarchkform" type="checkbox" value="Si, quiero donar a AMIAB" />
</label>
this is the field where I have problem for getting align
Here is my code from the form
http://jsbin.com/mazuyinobu/edit?html,css,output
I would like to align my form look like this:
http://www.amiab.com/hacerte-socio
I hope i didn't edit your own jsbin.
http://jsbin.com/pewariguro/1/edit?html,css,output
Here's what I've done:
No need for negative margin on div.
Set margin to 0 on the inputs
Make sure the text fits on 1 line.
Align the checkbox to the left.
Related
When I was reading the documentation in Material Design Lite's official page, no class name is mentioned for the fixed label with a textbox. In case of textarea they have a solution. But same code like the following one is creating only placeholder instead of a label for input type = "text".
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample5">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
I haven't seen this documented anywhere but it was annoying me so I delved into the SCSS to see what I could do. No changes to CSS are required. I managed to solve it by doing the following:
Add the mdl-textfield--floating-label has-placeholder classes to the outer <div> element.
Add a placeholder attribute to the <input> element, it can contain a value or remain empty; either way it will still work.
This will force the label to float above the input, instead of acting as a placeholder.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
<input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
I want to create custom styling for my form elements. Therefore I have to add a parent element to each input and select element. The parent element will contain the CSS classes for the styling. Example:
<div class="o-form-field is-valid">
<input formControlName="foo">
</div>
<div class="o-form-field is-invalid">
<input formControlName="bar">
</div>
<div class="o-form-field has-error">
<input formControlName="baz">
</div>
I am looking for a solution where I can replace the outer DIV with a component that watched the child input state and figures out what classes are needed. Renders the DIV in it's template and transcludes the input element. So my form template would look something like this.
<form-field-container>
<input formControlName="foo">
</form-field-container>
<form-field-container>
<input formControlName="bar">
</form-field>
<form-field-container>
<input formControlName="baz">
</form-field>
I am using Reactive forms.
I'm working on a "contact me" form in ASP.NET Core that will have a name, email, subject and message field. I have a few chunks of code like this in my view for the text boxes:
<div class="form-group">
<label asp-for="Message" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Message" class="form-control"/>
<span asp-validation-for="Message" class="text-danger"></span>
</div>
</div>
For this message text box, I would like the the text box to be larger vertically than my previous ones. How do I do this without changing the other boxes?
You just need to change input field into textarea for the message. Textarea element has multiple rows.
I am trying to put an html input to the right of ion checkbox but it is not working.
<label>
<ion-checkbox ng-model="mode" ng-checked="checked">
<input type="text">
</ion-checkbox>
</label>
However, it works if text is being inserted
<label>
<ion-checkbox ng-model="mode" ng-checked="checked">
Label
</ion-checkbox>
</label>
Technically it is working,
First I would add a placeholder value to the input box so you can see some sort of value.
<label>
<ion-checkbox ng-model="mode" ng-checked="checked">
<input type="text" placeholder="Input">
</ion-checkbox>
</label>
Now that we see the input, we can't click on it, because ionic have added a class in the background to disable all pointer events on Inputs that are inside of Checkboxes.
To fix this, we simply add this to our css.
.item-checkbox .item-content{
pointer-events: auto;
}
I was wondering how could you set height of an image to the neighboring elements height. So, essentially I want to have it like this:
[div] [img]
Other than javascript I can't see a way how can I do this. So, instead of using js can I just use CSS?
Thank you
Code so far(nothing special):
<div style="text-align:right;">
<label for="file-upload">Choose file</label>
<img><!-- Updates dynamically using js-->
<input id="file-upload" type="file" name="photo"/>
<input type="submit" value="Upload Image" name="submit" />
</div>
In order to style neighboring elements in CSS you can use adjacent selector(plus sign).
As in following:
label + img{height:300px}
That will target img in your code "after" any label.
JSFiddle