I am trying to align the fields that are part of radio button. But it's not working.
How can I get all the fields in one line ?
.container3 {
display:flex
}
<body>
Suspension flag
<div class=container3>
<div id="suspy" >
<input type="radio" id="suspension-flag-yes" name = "suspension-flag" value="Y">
</div>
<div>
<label for="suspension-flag-yes"> yes</label>
</div>
<div id="suspn" >
<input type="radio" id="suspension-flag-no" name = "suspension-flag" value="N">
</div>
<div>
<label for="suspension-flag-no"> no</label>
</div>
</div>
</body>
Related
When I use a text-input type , i can just give it a value and use that, even on another page
example:
<input type="text" class="form-control" name="name" value="<?php echo $row['name'];?>">
Can I do the same with a textarea?
example :
<textarea class="form-control" rows="3" cols="123" name="comments" value="<?php echo $row['comments'];?>" ></textarea>
This is my code in where I retrieve an existing row of information from a given ID. The info consists of a name, emailaddress and comments :
<form method="post">
<div class="row gy-2 text-left">
<div class="row">
<div class="col-auto gy-2">
<label>Name</label> <br>
<input type="text" class="form-control" name="name" value="<?php echo $row['naam'];?>">
</div>
</div>
<div class="row">
<div class="col-auto gy-2">
<label>Email address</label><br>
<input type="email" class="form-control" name="email" value="<?php echo $row['email'];?>">
</div>
</div>
<div class="row">
<div class="col-auto gy-2">
<label>Tell me about it</label><br>
<style>
textarea {resize: none;}
</style>
<textarea class="form-control" rows="3" cols="123" name="comments" value="<?php echo $row['comments'];?>" ></textarea>
</div>
<div class="row">
<div class="col-auto gy-3">
<button class="btn edit btn-info border border-dark" name="Update">Update</button>
</div>
</div>
</div>
</form>
For the textarea element, it goes between <textarea> and </textarea> tags:
<textarea><?php echo $row['comments'];?></textarea>
The <textarea> element does not use an HTML attribute named value like the <input> element does.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes
However, when the HTML markup which contains a textarea element is parsed by the browser, an HTMLTextAreaElement object is created. This DOM element object, which represents the state of the textarea element on the web page does have a JavaScript object property named .value, which gives access via JavaScript to the text which the textarea element contains.
This JavaScript code logs the text that is contained in a textarea element:
console.info(document.querySelector('textarea').value);
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement
Here In the modal pop up when i enter the Order number as 1307 it need to display the all the items of that order number
Here I am attaching the screenshot of my Items list that need to be displayed in my drop down when i enter the order number
Here in dropdown i need to see items(laptops, Note books,Samsung Note 3) When i give this order number
Here is my html code
<div class="modal-body">
<form class="form-horizontal" id="adhoc-form" method="GET">
{% csrf_token %}
<fieldset>
<div class="control-group">
<label class="control-label pull-left" for="capacity">Date</label>
<div class="controls">
<input name="date_manual" type="date">
</div>
</div>
<div class="control-group">
<label class="control-label pull-left" for="capacity">Process</label>
<div class="controls">
<select name="p_process">
<option value="">----------</option>
{% for process in production_process %}
<option value="{{process.id}}">{{process.name}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="control-group">
<label class="control-label pull-left" for="capacity">Sales order</label>
<div class="controls">
<input name="order_number" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label pull-left" for="capacity">Items</label>
<div class="controls">
<select name="item_part">
<option value="">-----</option>
</select>
</div>
</div>
</fieldset>
<div id="form-buttons-container" class="form-actions" style="padding-left: 0px;">
<div class="controls">
<input type="submit" class="btn btn-primary btn-medium" value="Submit">
</div>
</div>
</form>
</div>
In the above code i need to display those 3 items of this order in label - Items
Please help me out to write view and script
I'm trying to click in the third input box but I can't use a xpath [3] because it's isolated by divs. How can I get the third "div class price filter" and then get the input?
<div class="search-prices">
<div class="search-price-header">
<h1>Bid Price:</h1>
<button class="flat camel-case disabled" disabled="">Clear</button>
</div>
<div class="price-filter">
<div class="info"><span class="label">Min:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled" disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button></div>
</div>
<div class="price-filter">
<div class="info"><span class="label">Max:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled" disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button></div>
</div>
<div class="search-price-header">
<h1>Buy Now Price:</h1><button class="flat camel-case disabled" disabled="">Clear</button>
</div>
<div class="price-filter"></div>
<div class="info"><span class="label">Min:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled"disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button></div>
</div>
<div class="price-filter">
<div class="info"><span class="label">Max:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled"disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button>
</div>
</div>
</div>
I tried something like
var priceFilter = driver.findElement(By.xpath("//div[#class='price-filter'][3]"));
var numericInput = priceFilter.findElement(By.xpath("//input[#class='numericInput']"))
numericInput.click();
But my click always happens in the first input, any idea why?
Try this and let me know whether this works or not.
var numericInput =priceFilter.findElement(By.xpath("(//input[#class='numericInput'])[3]"))
numericInput.click();
Try this xpath: (//div[#class='price-filter']//input)[3]
The xpath that works for me is:
//div[#class='price-filter'][3]//input[#class='numericInput']
thank you guys!
I'm pretty new to Angular and have been tasked to complete a "Contact Us" form to allow customers to send emails through the web form.
The HTML:
<div class="content-section">
<div class="container">
<div class="row">
<div class="">
<h2 class="intro-title">Contact Us</h2>
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<div class="col-lg-6 spacer">
<div class="fadeIn-1">
<p>
<strong>Contact us</strong>
<br />
111.222.3333
<br />
information#mysite.com
</p>
</div>
<br />
<div class="fadeIn-2">
<p>
<strong>Office 1</strong>
<br />
Our street address
<br />
City, state, zip
</p>
</div>
<br />
<div class="fadeIn-3">
<p>
<strong>Office 2</strong>
<br />
street address
<br />
City, state, zip
</p>
</div>
</div>
<fieldset>
<!-- Form Name -->
<legend>Send us a message</legend>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">First Name</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-1">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="name" placeholder="Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">E-Mail</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-2">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">Phone #</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-3">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="(801)222-3333" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<!--<label class="col-md-4 control-label">Subject</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-bookmark"></i></span>
<input name="subject" placeholder="Subject" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<!--<label class="col-md-4 control-label">Message</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-5">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea rows="9" class="form-control" name="comment" placeholder="Message">
</textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Send
<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
This is this the component:
import { Component } from '#angular/core';
import { trigger, state, style, transition, animate } from '#angular/animations';
import { slideInOutAnimation, fadeInAnimation } from '../_animations/index';
#Component({
selector: 'contact-page',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css'],
animations: [slideInOutAnimation, fadeInAnimation, trigger('slideInOut', [
state('in', style({
transform: 'translate3d(0, 0, 0)'
})),
state('out', style({
transform: 'translate3d(100%, 0, 0)'
})),
transition('in => out', animate('400ms ease-in-out')),
transition('out => in', animate('400ms ease-in-out'))
]),
],
host: {
'(window:scroll)': 'updateHeader($event)',
'[#slideInOutAnimation]': '',
'[#fadeInAnimation]': ''
}
})
export class ContactComponent {
title = 'app';
isScrolled = false;
currPos: Number = 0;
startPos: Number = 0;
changePos: Number = 0;
menuState = 'out';
constructor() { }
updateHeader(evt) {
this.currPos = (window.pageYOffset || evt.target.scrollTop) - (evt.target.clientTop || 0);
if (this.currPos >= this.changePos) {
this.isScrolled = true;
} else {
this.isScrolled = false;
}
}
}
I've looked at options such as "nodemailer" and I just can't seem to figure out how it all works.
I need the email to be sent to our email address when a customer clicks the submit button. Any suggestions?
Also, I'm not really sure what else is needed to get help, so if you need anything else, I am happy to post it up.
After having removed critical features such as input-xlarge and input-large, what is the substitution for it in bootstrap 3?
Of course I could use col-lg-12 etc but that is giving an error in tab pane.
I could also use style = "width:30px;" but then It would loose its responsiveness unlike input-xlarge.Any suggestions etc?
In Bootstrap 3, .form-control (the class you give your inputs) has a width of 100%, which allows you to wrap them into col-lg-X divs for arrangement. Example from the docs:
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
See under Column sizing.
It's a bit different than in Bootstrap 2.3.2, but you get used to it quickly.
You can use these classes
input-lg
input
and
input-sm
for input fields and replace input with btn for buttons.
Check this documentation http://getbootstrap.com/getting-started/#migration
This will change only height of the element, to reduce the width you have to use grid system classes like col-xs-* col-md-* col-lg-*.
Example col-md-3. See doc here http://getbootstrap.com/css/#grid
<form role="form">
<div class="form-group">
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
<label for="ex2">col-xs-3</label>
<input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
<label for="ex3">col-xs-4</label>
<input class="form-control" id="ex3" type="text">
</div>
</div>
</form>
i solved with a max-width in my main css-file.
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
It's a simple solution with little "code"
<div class="form-group">
<div class="input-group col-md-5">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<input class="form-control" type="text" name="text" placeholder="Enter Your Email Id" width="50px">
</div>
<input type="button" name="SIGNUP" value="SIGNUP">
</div>