Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
<div class="ddown">
<button class="dbtn">ABC</button>
</div>
I want to make this div hide/show when a checkbox is checked/unchecked, how can I achieve this?
try The following code
<input type="checkbox" ng-model="chkCondition">
<div class="ddown" ng-show="chkCondition">
<button class="dbtn">ABC</button>
</div>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Check to show/Hide a div:
<input type="checkbox" ng-model="chkCondition">
<div class="ddown" ng-show="chkCondition">
<button class="dbtn">ABC</button>
</div>
</body>
</html>
html
<input type="checkbox" ng-model="isChecked" />
<div ng-show="isChecked" class="ddown">
<button class="dbtn">ABC</button>
</div>
Try with using ng-if to avoiding DOM element creation.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<input type="checkbox" ng-model="isChecked">
<div class="ddown" ng-if="isChecked">
<button class="dbtn">ABC</button>
</div>
</body>
</html>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
i am tying to have the h3 aligned with the form so the form goes to the right and the h3 to the left and both of them to be centered ?
<section style="background-color: #00CDCF; background-image: url(./images/services/contact.jpg);">
<div id="newsletterform">
<div class="wrap">
<h3 style="color:#EF7F1A;">Subscribe to our Newsletter</h3>
<form action="send.php" method="post" id="newsletter" name="newsletter"><input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" /><input type="submit" value="Subscribe" name="signup-button" id="signup-button">
<div id="response"></div>
</form>
</div>
</div>
</section>
use flex and learn more about flexbox
.wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
<section style="background-color: #00CDCF; background-image: url(./images/services/contact.jpg);">
<div id="newsletterform">
<div class="wrap">
<h3 style="color:#EF7F1A;">Subscribe to our Newsletter</h3>
<form action="send.php" method="post" id="newsletter" name="newsletter"><input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" /><input type="submit" value="Subscribe" name="signup-button" id="signup-button">
<div id="response"></div>
</form>
</div>
</div>
</section>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I'm looking for a way to make some CSS only apply if an input outside the style sheet has a certain value.
In the example below I only want to run the CSS if the input value below is "4625585".
It is from a form where the submit button sends the input value (among other things).
Is that possible at all when I only have access to CSS and not the HTML code of the form.
Kindly, Rasmus
-
Here is the CSS
<style type="text/css">
.wForm {
font-family: sans-serif;
}
</style>
<input value="4625585">
-
Here is the HTML:
<form>
<div id="tfa_6" class="wForm">
<input type="text" placeholder="Name">
</div>
<div class="actions">
<input type="submit" value="Submit">
</div>
<input value="4626442">
</form>
You can only apply CSS to a sibling that follows the element that's validated. Therefore I moved the input element with value 4625585 to the top in the form.
If you don't have access to the HTML, you will need javascript.
input[value="4625585"] ~ .wForm {
background: red;
}
<form>
<input value="4625585">
<div id="tfa_6" class="wForm">
<input type="text" placeholder="Name">
</div>
<div class="actions">
<input type="submit" value="Submit">
</div>
</form>
The issue was commented on and answered in a deleted threat. This short answer is "no, it can't be done".
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I would like to know if its OK for me to include a header/s (h1) inside a form-group? I have added a simple form to the snippet for an example.
I am not super clear on if I can or cannot include it in this way? Just want to make sure I am doing it correctly.
The reason why I am doing it like this, is because the headers align perfectly flush with left-hand side of the form, otherwise nesting them outside the form-group makes them sit further to the left.
So, are they similar to the legend property in a form if I wish to use headers instead?
Cheers!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-12">
<form>
<div class="form-group">
<h1>Form details</h1>
<h4>Please fill out this form</h4>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
It's okay, but not good for SEO, you miss h2 and h3 header between your headers
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to have two-column registration form using bootstrap 3, other pages of my website are fine except the registration page. My input fields and labels scattered all over the screen on the right side because I am using col-md-6 for to divide the page into two. The page looks like this now.
As you can see, the right side is idk, they are scattered. How to fix this side? My code is something like this in both sides:
<div class="container">
<div class="row">
<!-- start code on the left side of the page -->
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label"><font color="red"><b>*</b></font> First Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="firstname" id="firstname"
placeholder="Firstname" onKeyPress="return ValidateAlpha(event);" onblur="toUpper(this.value, this.id);"/>
</div>
</div>
</div>
<!-- left code ends here -->
<!-- start code on the right side of the page -->
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label"><font color="red"><b>*</b></font> E-mail</label>
<div class="col-sm-5 ">
<input type="text" class="form-control" name="email" id="email" placeholder= "email"
ondrop="return false;" onpaste="return false;" /></span>
</div>
</div>
</div>
<!-- right code ends here -->
</div>
</div>
Look at the codepen I've made for you
http://codepen.io/creativemind1/pen/QNYqqN
Kindly remove the !important from the css and make changes in your style.css
EDIT: You are not suppose to give any classes in label and <div class="col-md-6"> before input as it will automatically align for you.
Try clearfix class in bootstrap.
Codepen example http://codepen.io/smallyin/pen/vGbegv
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
It is a simple html code,when i open it in firefox,no alignment between the input lines.
<!DOCTYPE html>
<html>
<body>
<form action="">
First name(xing): <input type="text" name="firstname"><br>
Last name(min): <input type="text" name="lastname">
</form>
<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
How can i make alignment in the form?
Try putting the text before the form input in a span tag and styling it:
<span style="display:inline-block; width:125px">First name(xing): </span>
<input type="text" name="firstname">
<br>
<span style="display:inline-block; width:125px"> Last name(min): </span>
<input type="text" name="lastname">
Note: you can only use the width attribute if you use the style "display:inline-block".
Another method of doing this is:
<input type="text" name="fname" placeholder="First name(xing)"><br>
<input type="text" name="lname" placeholder="Last name(min)"><br>
This is HTML5 placeholder property.