Code:
#inputfield {
width:300px;
border: 2px solid #3f3f3f;
height:30px;
font-size:20px;
padding-left:5px;
color: #6f6f6f;
}
#inputname {
margin-right:10px;
font-size:20px;
color: #3f3f3f;
}
<a id="inputname>Name:</a><input name="name" id="inputfield" type="text">
<a id="inputname>Other Name:</a><input name="other" id="inputfield" type="text">
<a id="inputname>Other Other Name:</a><input name="other_2"
id="inputfield" type="text">
The names and the fields look out of place. I am trying to make the form organized like the way it looks on this page:
https://secure.hulu.com/signup
Things to change:
Don't use id. Use class and .inputfield
Make sure to set the display to inline-block so that the browser will honor the width
You don't want <a> tags. You want <label> tags.
Wrap each line of your form in its own <div> and use that to set the line height and spacing.
Related
Im using algolia to perform a search on my website, but I realized one thing. Im using search box generator to customized my search input field. However the problems occur, when I try to apply autocomplete.js on my search input field
Initially, it looks like the one below,
but when I apply the autocomplete feature it will look like this
Code - HTML
<form id="search" novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-google" style="margin-top: 7px;">
<div role="search" class="sbx-google__wrapper">
<input type="search" id="search_input" name="search" placeholder="Search" autocomplete="off" required="required" class="sbx-google__input">
<button type="submit" title="Submit your search query." class="sbx-google__submit">
<svg role="img" aria-label="Search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
</svg>
</button>
<button type="reset" title="Clear the search query." class="sbx-google__reset">
<svg role="img" aria-label="Reset">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use>
</svg>
</button>
</div>
</form>
Code - JAVASCRIPT
autocomplete('#search_input',
{ hint: false }, {
source: autocomplete.sources.hits(index, {hitsPerPage: 5}),
//value to be displayed in input control after user's suggestion selection
displayKey: 'name',
//hash of templates used when rendering dataset
templates: {
//'suggestion' templating function used to render a single suggestion
suggestion: function(suggestion) {
console.log(suggestion)
return '<span>' +
suggestion._highlightResult.title.value + '</span>';
}
}
});
The custom search box is advised by algolia themselves, on the autocomplete documentation. I have no idea on how to solve this problem, seems like the js script overwrite the css styling. This only happen if I passed in the #search_input in the autocomplete function
Here is the js fiddle https://jsfiddle.net/Ldpqhkam/
Algolia autocomplete adds a span around the input and that's what breaks the design. It has inline style changing the display, you can override it to fix the design.
.algolia-autocomplete {
display: inline !important;
}
Simply put, how can you change the border color of a Chosen jQuery select box? I am assuming you can do it with CSS but I can't quite figure out how.
$(".pnChosen").chosen({
search_contains: true
});
<select required class="pnChosen"></select>
I can use this to change the border color of all of them, but I only want to change ones that I mark as required.
.chosen-container{
border: 1px solid red;
}
And I also want to change the background color when they are disabled if that is possible.
You can use chosen's option inherit_select_classes.
Give required class on select element, and set css for this selector .required>chosen-single
$(".pnChosen").chosen({
search_contains: true,
inherit_select_classes: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet" />
<style>
.required>.chosen-single {
border: 1px solid #EE0000;
}
</style>
<select required class="pnChosen required">
<option>Option 1</option>
<option>Option 2</option>
</select>
Another option is to use the adjacent sibling combinator (+) selector in CSS to achieve the desired styling.
For example:
HTML
<select id="myselect" required="required">
...
</select>
<div id="myselect_chosen" class="chosen-container chosen-container-single">
<a class="chosen-single">
...
</a>
</div>
CSS
select:required + div.chosen-container a { ... }
This would apply the desired style(s) to your div.chosen-container a DOM element immediately following select:required. Just be aware that you may still have to establish CSS priority if you're attempting to override an existing Chosen style so your definitions can supersede any existing chosen styles.
Reference: Adjacent Sibling Combinator
i'm new to scala language . what i wanted to know is i need to select a value from a drop down.what happens here is drop down as below.
<input id="categoryDid" class=" x-form-text x-form-field print_underline x-form-empty-field x-trigger-noedit" type="text" name="category" autocomplete="off" size="24" tabindex="1" readonly="" style="width: 132px;"> drop down data some where else. <div id="ext-gen274" class="x-combo-list-inner" style="width: 148px; margin-bottom: 8px; height: 63px;">
drop down data some where else as below.
<div id="ext-gen274" class="x-combo-list-inner" style="width: 148px; margin-bottom: 8px; height: 63px;">
<div class="x-combo-list-item">--Select--</div>
<div class="x-combo-list-item">Mobile Phone</div>
<div class="x-combo-list-item x-combo-selected">Tablet</div>
</div>
i'm using gatling / scala combination .now what i need to select is "Mobile Phone". i used formParam("categoryDid", "Mobile Phone") but seems this is not working.
can some one help ?
The NAME of your parameter (see input field) is category, not categoryDid:
formParam("category", "Mobile Phone")
I have made a form in HTML using a table and that worked fine, however, my teacher told me that making forms from tables is not the proper way to do it anymore, instead I should use:
<form>
<label></label>
<input>
</form>
but he also mentioned something about using <span></span> and I'll guess it is just about this point where I got a bit confused, because where should I use it - ie. should I put the <label> and the <input> in between <span></span> ?
A few of the reason I ask is:
I don't consider myself very savvy when it comes to HTML
I would just have used a <div></div> to wrap around the <label> and the <input> and then use css to put it where I want it to appear on the webpage.
Regarding the form I want to create then I want it to look like this:
[Firstname] [lastname]
[textfield] [textfield]
[Street] [zip-code] [city]
[textfield] [textfield] [textfield]
[E-mail] [Phone]
[textfield] [textfield]
[message]
[textarea]
I hope the layout of my form makes sense to the majority of you !
Try something like this:
<form action="action.php">
<label for="firstName">First Name</label>
<input type="text" name="fname" id="firstName"><br>
<label for="lastName">First Name</label>
<input type="text" name="lname" id="lastName"><br>
....
</form>
and to line it all up you could use some css like this:
label{
width: 100px;
text-align:left;
}
Although you could use SPAN technically.. as it's an inline element and so are LABEL and INPUT, it doesn't quite sit well. Inline elements aren't really designed to be containers, so using a block level element such as a DIV would be a better way of structuring it.
Beyond this to make it line up, you're moving into the relms of CSS to float your elements.
So something alone the lines of:
<form action="">
<fieldset>
<div class="left">
<label for="FirstName">First Name</label>
<input type="text" name="FirstName" id="FirstName">
</div>
<div class="right">
<label for="LastName">Last Name</label>
<input type="text" name="LastName" id="LastName">
</div>
</fieldset>
</form>
<style type="text/css">
fieldset {
width:500px;
overflow:hidden;
}
fieldset .left {
float:left;
width:50%;
}
fieldset .right {
float:right;
width:50%;
}
fieldset label {
display:block;
}
fieldset block {
display:block;
}
</style>
You teacher probably means that you should wrap each pair of input and label in a span. You are quite right in thinking that you should use div instead of span there. Just tell your teacher to look at the page when style sheets are disabled. On similar grounds, you should prove her/him that he is all wrong about saying that a table should not be used.
To do the exercise of writing a form (that is essentially tabular data) without using table markup, just use your div approach and use tabular layout features of CSS: set display: table on the form, display: table-row on the div elements, and display: table-cell on the input and label elements. Add padding and horizontal alignment as needed. Do not forget to inform your teacher that this will only work on sufficiently modern browsers, whereas the logical approach of using an HTML table works on all browsers.
I have a search field and I want my search button image to be in line with the search fields but it isn't. I have used div tags to try and move it but it always moves the search fields not just the button!
HELP!
<form action="weezyresults.php" method="post">
<input type="text" name="search" size="35" value="Job Title e.g. Assistant Manager"
style="background-color:white; border:
solid 1px #6E6E6E; height: 30px; font-size:18px;
vertical-align:9px;color:#bbb"
onfocus="if(this.value == 'Job Title e.g. Assistant Manager'){this.value = '';this.style.color='#000'}" />
<input type="text" name="searchterm" size="35" value="Location e.g. Manchester"
style="background-color:white; border:
solid 1px #6E6E6E; height: 30px; font-size:18px;
vertical-align:9px;color:#bbb"
onfocus="if(this.value == 'Location e.g. Manchester'){this.value = '';this.style.color='#000'}" />
<input type="image" src="but.tiff" alt="Submit" height="30" width="60">
</form>
Thanks!
James
It looks like it's inline to me. You possibly have a problem because your using a tiff file for that button. I'd convert that to a JPG.
If yours doesn't look like this you possibly have some other css in your project that is breaking your layout.
Use floats - eg: input { float: left } on each element, that should do the trick.
Try this out
http://jsfiddle.net/TMy6p/
I have moved your styling into an external stylesheet to tidy it up a bit and help you to avoid repeating the same style tags on elements.
basically you just need to float elements and give them widths.