How to replace style class with mootools.Consider,
<form>
<div class="form-label">
<label>User ID</label>
</div>
<div class="form-element">
<input type="text" name="userid">
</div>
<div class="form-label">
<label>password</label>
</div>
<div class="form-element">
<input type="text" name="password">
</div>
</form>
Here, I would like to replace style class form-label with form-label-new.
Thanks
$$('.form-label').set('class', 'form-label-new');
Related
Your toggles.demo.html in your documentation needs a section show the usage of the supported right-label class. Generally speaking, the .toggle-switch.right-label class isn't documented anywhere. We found out about it by digging into the code.
<section class="form-block">
<div class="form-group">
<label for="formGroupExampleInput">Right Label Toggles</label>
<div class="toggle-switch right-label">
<input type="checkbox" id="toggle_4">
<label for="toggle_4">Toggles turn on and off</label>
</div>
<div class="toggle-switch right-label">
<input type="checkbox" id="toggle_5" disabled>
<label for="toggle_5">Toggle off and disabled</label>
</div>
<div class="toggle-switch right-label">
<input type="checkbox" id="toggle_6" checked disabled>
<label for="toggle_6">Toggle on and disabled</label>
</div>
</div>
</section>
i am trying to make css for input box in html. i have little knowledge of css can any one please solve my small query. i want different-different style and size for all input box. want no change in html code.
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]" class="vp-input input-large" value="" type="text">
</div>
</div>
No need to change the html.
You can use a wildcard in an attribute selector
According to MDN
[attr*=value] Represents an element with an attribute name of attr the
value of which contains at least one occurrence of string "value" as
substring.
Since your inputs have distinct name properties we can target those.
The names of your inputs are
post_rehub_offers[rehub_multioffer_group][0][multioffer_url]
post_rehub_offers[rehub_multioffer_group][0][multioffer_name]
post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]
So we can target
input[name*="url"]
input[name*="name"]
input[name*="desc"]
And apply whatever styles you want to them like so:
input[name*="url"] {background:red}
input[name*="name"] {background:green}
input[name*="desc"] {background:blue}
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]" class="vp-input input-large" value="" type="text">
</div>
</div>
Write a CSS referring the below example.
<html>
<head>
<style>
input {
width: 100%;
box-sizing: border-box; }
</style>
</head>
</html>
Put this script in the head tag of html.
.input-element-1{
width:300px;
}
.input-element-2{
width:200px;
}
<div class="field">
<div class="input1">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large input-element-1" value="" type="text">
</div>
</div>
<div class="field1">
<div class="input2">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large input-element-2" value="" type="text">
</div>
</div>
I am trying to align textfields with bootstrap however I keep failing to adopt anything I found on sources to my project. What I am trying to do is aligning e-mail and password text-fields but leave 'Remember me' and 'Login' centered.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
You can use Bootstrap's form-horizontal class to help achieve the layout.
Demo: http://www.bootply.com/nJ2P2gi76B
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Log in</button>
</div>
</div>
</form>
You can access only the text input by using a css attribute selector.
For Example...
input[type="text"] {
...
}
You can get more specific if needed...
#someID input[type="text"] {
...
}
you can use text-center to center the inner content of your div. you can use text-left, text-center, text-right classes to align the contents.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css);
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group text-center">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
It would help if you could post a JSFiddle with the css you are using!
Guessing from what i see:
You could add a class to both fields and override the css.
or put both fields in a div and align them without impacting the rest.
Using an enclosing div:
JSFiddle
CSS:
.input-fields {
width: 300px;
}
.input-fields .form-group {
float: right;
}
.form-group {
clear: both;
text-align: center;
}
HTML:
<form method="POST" action="/auth/login">
<div class="input-fields">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
Here I have a bootstrap form v3 and I try to make this form to be inline so ha,ar,m2 to be inline... I have:
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="naziv">Naziv</label>
<div class="col-md-4">
<input id="naziv" name="naziv" type="text" placeholder="naziv parcele" class="form-control input-md" required="">
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="ha">Povrsina</label>
<div class="col-md-2">
<div class="input-group">
<input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
<span class="input-group-addon">ha</span>
</div>
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="ar"></label>
<div class="col-md-2">
<div class="input-group">
<input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
<span class="input-group-addon">ar</span>
</div>
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="m2"></label>
<div class="col-md-2">
<div class="input-group">
<input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
<span class="input-group-addon">m2</span>
</div>
</div>
</div>
</fieldset>
</form>
But how I can put #ha, #ar, #m2 elements inline so in the same row?
Any idea?
I try with form-inline but dont work.
Here is a fiddle
In order to keep the inputs in one row, you could put the columns containing .input-group in one form-group element, as follows:
<div class="form-group">
<label class="col-md-3 control-label" for="ha">Povrsina</label>
<div class="col-md-3">
<div class="input-group">
<input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
<span class="input-group-addon">ha</span>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
<span class="input-group-addon">ar</span>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
<span class="input-group-addon">m2</span>
</div>
</div>
</div>
WORKING DEMO.
Note that you should change the class names of the columns within your own demo to prevent exceeding the 12-column grid.
<div class="control-group">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
this is not working for me, I dont wanna use 'form-horizontal' class or a table for this. I have tried with row and row-fluid class but its not working.
You can wrap your code with <div class="form-horizontal">. You don't need to have a form to use form-horizontal.
Example:
<div class="form-horizontal">
<div class="control-group row-fluid form-inline">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
</div>
</div>
You want horizontal form layout. This can be achieved by wrappping your code between a div having class as form-horizontal.
<div class="form-horizontal">
<div class="control-group">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
</div>
To learn more click here