We Keep Coding

Drop down List is moving Up when searching

My Angular application using ngx-intl-tel-input library when i search country on country list dropdown moving to top .I want to fix postion of dropdown menu when searching on that.
Demo:https://stackblitz.com/edit/ngx-intl-tel-input-demo-5u5c1p?file=src%2Fapp%2Fapp.component.ts
<div style="margin: 50px">
<br>
<form #f="ngForm" [formGroup]="phoneForm">
<div class="mb-2">
<ngx-intl-tel-input
[cssClass]="'custom'"
[preferredCountries]="preferredCountries"
[enableAutoCountrySelect]="true"
[enablePlaceholder]="true"
[searchCountryFlag]="true"
[searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
[selectFirstCountry]="false"
[selectedCountryISO]="CountryISO.India"
[maxLength]="15"
[tooltipField]="TooltipLabel.Name"
[phoneValidation]="true"
[separateDialCode]="separateDialCode"
name="phone" formControlName="phone">
</ngx-intl-tel-input>
</div>
<div class="mb-2">
<button (click)="f.reset()">Reset</button>
</div>
</form>
<br>
</div>
GIF:Issue gif

Update ngx-intl-tel-input package to 2.5.0

Add to your css code as below to give the box a fixed position(use !important to prevent override)
:host ngx-intl-tel-input ::ng-deep .country-dropdown{
left: 0px!important;
right: auto!important;
top: 100%!important;
transform: translateY(0px)!important;
bottom: auto!important;
}
SEE EXAMPLE

Your html page contains overflow style that's why it scroll up when type specific country, so you just need to unset it.

Show checkboxes tethered beneath input box on click

I am looking for a way to have a list of checkboxes slide out from an input box when I click it. Basically what I'm looking for is a way to create an overlay form that's tethered to the input box. This image shows what I have before click (left) and what I want to happen on click (right).
Right now I have a bootstrap modal pop up on click, but obviously that's not very user friendly. Any working solution will do, from pure css to js packages. My front end currently works with just html, css, js & jquery.
I've tried the following, but that shows my checkboxes through/behind the text that's already there.
.change-search__form-container {
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}

A pure css solution based on previous answers and Pete's comments.
#myDiv{
display:none;
}
#myDiv:hover, #myDiv:focus-within {
display: block;
}
#myInput:focus + #myDiv {display:block}
<input id="myInput" placeholder="search query">
<div id="myDiv">
<input type="checkbox" id="box1">
<label for="box1">Stuff 1</label>
<input type="checkbox" id="box2">
<label for="box2">Stuff 2</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Stuff 3</label>
<input type="checkbox" id="box4">
<label for="box4">Stuff 4</label>
</div>

The DIV can be shown by using the below jQuery code
$("#searchbox").focus(function(){
$("#searchresults").show();
});
By using this code the DIV won't go away if the focus from textbox is lost

I solved the problem with the help of the comments. My CSS:
#change-search__form-container {
position: relative;
}
#change-search__dropdown-form {
z-index: 1;
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
My jQuery:
$('#change-search__form-container').click(function () {
$('#change-search__dropdown-form').show();
});
This way the container shows on clicking the input box, and doesn't disappear when I click elsewhere (on one of the checkboxes, for example).

there is a great post for a very similar problem:
Css Focus on input div appearing
Runs for Safari and soon in chrome..
#myDiv2{display:none;}
#myInput:focus + div { display: block; }
#myDiv1:focus-within #myDiv2 { display: block; }
<div id="MyDiv1">
<input id="myInput" type="text"/>
<div id="myDiv2">
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div style="display:none">
<span> aaa </span>
</div>
</div>

log in webpage -> <div> and comparing user input

I am trying to create a simple log in webpage. But my page is not being rendered as I expect it to be.
Here is my code:
function logIn(username, password){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username == "a" && password == "a"){
window.location.href="awesomePage.html";
}else{
alert("Incorrect username or password!");
}
}
#user {
position: absolute;
top: 10px;
left: 5px;
}
#pass {
position: absolute;
top: 40px;
left: 7.5px;
}
#username {
position: absolute;
top: 5px;
left: 40px;
}
#password {
position: absolute;
top: 20px;
left: 40px;
}
#logIn {
position: absolute;
top: 75px;
left: 80px;
}
<form action="javascript:logIn(username, password);" method="post">
<div id="user"> Username: </div>
<div id="username">
<input type="text" id="username" placeholder="Enter username here." />
</div>
<div id="pass"> Password: </div>
<div id="password">
<input type="password" id="password" placeholder="Enter password here." />
</div>
<div id="logIn">
<input type="button" value="Log In" onClick="javascript:logIn(username, password);"/>
</div>
</form>
Before, when I typed a for username and a for password and I clicked log in I got the alert message: Incorrect username or password.
I tried changing the HTML to (other code remains the same):
<div id="un"> <input type="text" id="username" placeholder="Enter username here." /> </div>
<div id="pw"> <input type="password" id="password" placeholder="Enter password here." /> </div>
And therefore changing the CSS to (other code remains the same):
#un {
position: absolute;
top: 5px;
left: 40px;
}
#pw {
position: absolute;
top: 20px;
left: 40px;
}
When I type a for username and a for password it takes me to awesomePage.html, but the input fields are positioned where I don't want them to be.
My question is: How do I fix this?
Also, another small question: Should I name other pages I have: awesomePage.html or awesome_page.html, or is Awesome Page.html just fine?

Just to solve your problem with minimum changes in code:
I have just did a small change in the css and another small change in the html IDs, which keep everything looks the same and functional.
For sure you can improve this a lot by not depending on positions as previous answers listed.
function logIn(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
debugger;
if(username == "a" && password == "a"){
window.location.href="awesomePage.html";
}else{
alert("Incorrect username or password!");
}
}
#user {
position: absolute;
top: 10px;
left: 5px;
}
#pass {
position: absolute;
top: 40px;
left: 7.5px;
}
#username-ctr, #username {
position: absolute;
top: 5px;
left: 40px;
}
#password-ctr, #password {
position: absolute;
top: 20px;
left: 40px;
}
#logIn {
position: absolute;
top: 75px;
left: 80px;
}
<form action="javascript:logIn(username, password);" method="post">
<div id="user"> Username: </div>
<div id="username-ctr">
<input type="text" id="username" placeholder="Enter username here." />
</div>
<div id="pass"> Password: </div>
<div id="password-ctr">
<input type="password" id="password" placeholder="Enter password here." />
</div>
<div id="logIn">
<input type="button" value="Log In" onClick="logIn()"/>
</div>
</form>
Answer to your second question:
It depends on many factors, but you can find many SEO recommendations and best practices if you google "website page naming convention", my recommendations:
- Don't use spaces in page names.
- Don't use _ , as I know some search engines count this as a normal character not a separator, use - instead.
- Be consistent with all other website pages naming convention for better user experience.

As the comments say, this is not a real login, but if you want to use it your problem is that you are using repeated ids on "div" and "input". After changing them to #un and #pw you need to also update your css:
#username, #un {
position: absolute;
top: 5px;
left: 40px;
}
#password, #pw {
position: absolute;
top: 20px;
left: 40px;
}

Just Change your JavaScript code like this:
<script type="text/javascript">
function logIn(){
var username = document.querySelector("input[id='username']").value;
var password = document.querySelector("input[id='password']").value;
if(username == "a" && password == "a"){
window.location.href="awesomePage.html";
}else{
alert("Incorrect username or password!");
}
}
</script>

I would like to iterate again, please don't ever write production code like this, as this is not a real login and nothing is preventing anyone from inspecting your page source and they will then be able to see what your username and password is.
To fix your layout issue you will need to add both the child and parent elements to your CSS styling since you are using absolute positioning
#un, #username {
position: absolute;
top: 5px;
left: 40px;
}
#pw, #password {
position: absolute;
top: 20px;
left: 40px;
}
I also want to explain what went wrong with your initial code as it might help someone else understand why you changed the element ids.
Firstly in your JavaScript function you are expecting parameters for username and password, but neither are used in your code example which makes passing them in completely redundant, and you can remove them as from the function definition, you are using document.getElementById to obtain both the username and the password anyway.
When you run your code and log the output of the username and password values you will notice that they both return as undefined. The reason for this is that you have duplicate id values in your HTML source, so it is actually trying to obtain the value from another element (in this case it is identifying the parent div elements instead of the input elements).
<div id="username">
<input type="text" id="username" placeholder="Enter username here." />
</div>
The fix for this would be to just make sure your id values are unique by changing the input id to "username_input" or the parent id to "username_container" and then alter your function to account for the modified id values.
Next issue, in your HTML code you are calling your function twice in the form, and although this won't really cause issues here, once you start doing asynchronous requests there might be issues with duplicate requests, etc.
<form action="javascript:logIn(username, password);" method="post">
(this is actually not called because you don't have a submit button elsewhere in your form)
and
<input type="button" value="Log In" onClick="javascript:logIn(username, password);"/>
You don't need an action or method in your form element, so you can really choose one or the other.
So here is a CodePen link with the amended code in which I made the modifications:
http://codepen.io/anon/pen/LbxOOP
And to answer your additional question. When naming HTML pages that will be called directly from the browser, always prefer to use snake case (ie. awesome_page.html) or a hyphen (awesome-page.html). Reason for this is that in some setups the OS might not be case sensitive when looking for the file, so if you have awesomePage.html and awesomepage.html, it will be unpredictable which file it will actually return. Never use spaces in the file names.

why the image not take full width in %?

I am trying to make small page in html. I am able to do that. But it look good when plunker screen is small. Example: when you run the project it look fine. But when user run on full screen it look awkward.
here is image what I am trying to do
http://plnkr.co/edit/Cz10CYGKBBkG0oT0eO6C?p=preview
here is my code
http://plnkr.co/edit/Cz10CYGKBBkG0oT0eO6C?p=preview
Actually When user run on full screen I notice these thing ?
Why is the image not taking 35% width
is it the way to design the layout or I am doing wrong to design the things
what to do to design responsive layout
<ion-header-bar class="bar-assertive">
<img src="https://dl.dropboxusercontent.com/s/bt3rzcwpe80r6fs/sapient-logo.png?dl=0" class="logo">
<div class="barTab">
<a>Home</a>
<a>About us</a>
<a>Projects</a>
<a id="contactus">Contact Us</a>
</div>
</ion-header-bar>
<ion-content>
<div id="wrapper">
<div id="header">
<h1> Contact us</h1>
</div>
<div id="slideTest">
<ion-slide-box pager-click="doSomething(index)">
<ion-slide ng-repeat="n in success">
<img src={{n.image}}>
</ion-slide>
</ion-slide-box>
</div>
<div id="rightContainer">
<div id="textContainer">
What you’ve already accomplished is important. But, we’re interested in what you’re going to do next. At Sapient Global Markets, we bring together the brightest minds in the financial industry and set the stage for innovation and excellence. Given the right environment, the best tools and an incredible team to work with, what can you achieve?
</div>
<div id="formID">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="password" placeholder="Password">
</label>
<label class="item item-input">
<input type="password" placeholder="Confirm Password">
</label>
<label class="item item-input">
<input type="email" placeholder="Email">
</label>
<label class="item item-input">
<input type="text" placeholder="website">
</label>
<button class="button frmbtn">
submit
</button>
</div>
</div>
</div>
</div>
</ion-content>

http://plnkr.co/edit/3fu32oUq47KSmli6TP2p?p=preview
Add these rules
.slider-slides img {
width: 100%;
height: auto;
}
.slider-pager {
background: rgba(255,255,255,0.7);
}
The latter to make the controls visible.

The actual image you used is 202px wide, while the space you want to occupy if 210px wide. If you want the image to cover that area, you can make the image itself larger and it will do that automatically.
Also, you can specify width: 100% in CSS for the img tag. But as long as the image is smaller, it will be streched and that won't look as nice as having a proper sized source image.
So I think the best solution is to do both. Set the proper size through CSS and make the source image large enough to cover that area completely.

You might want to add the following css to your code, though there is still a problem with the responsive height.
.slider-slide img {
width:100%;
}
http://plnkr.co/edit/dUvIbYDxH27o81NKJ8dg?p=preview

Have you tried? :
ion-slide img {
max-width: 100%;
display: block;
height: auto;
width: 100%;
}

#slideTest - remove height: 100px;, add overflow: hidden;
.slider-slide - remove height: 100%;
.slider-slides - remove height: 100%;, add overflow: hidden;
.slider - add overflow: hidden;
List item
.slider-slide img{
width: 100%;
height: auto;
}
-
.slider-slide{
height: auto;
}
.slider-slides{
height: auto;
overflow: hidden;
}
.slider{
overflow: hidden;
}
.slider-slide img{
width: 100%;
height: auto;
}

CSS Grid System for Forms (Multi-Column)

For future reference here is the final result with pixel perfect precision:
The CSS code:
._25 {
width: 21%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._50 {
width: 46%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._75 {
width: 71%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._100 {
width: 96%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
width: 100%;
}
input {
border: 1px solid #B3B3B3;
width: 100%;
-moz-border-radius: 3px;
}
textarea {
border: 1px solid #B3B3B3;
width: 100%;
-moz-border-radius: 3px;
}
select {
border: 1px solid #B3B3B3;
width: 100%;
-moz-border-radius: 3px;
}
And some sample HTML code:
<div class="_50">
<p><label for="in_user">Username</label><input id="in_user" type="text" value=""/></p>
</div>
<div class="_50">
<p><label for="in_pass">Password</label><input id="in_pass" type="text" value=""/></p>
</div>
Recently I've started using CSS grid systems and I find the whole process of designing a webpage much more simpler. Now I'm trying to stylize form elements but I'm having a really hard time making forms with columns, take the following example:
div (width = 400px)
form
ul
li .half
label
input (should be 200px wide)
li .half
another label
another input (should also be 200px wide)
Basically I'm applying a class that has a width attribute of 50% but putting both inputs side by side makes the row to be bigger than 100% (400px) - I guess this is because of borders, margins and paddings.
Is there any CSS grid system that I can use to have multi-column forms while still making all the form elements have the same size (inputs, selects and textareas); eg. 1 input in 1 column should have 400px while 2 columns should have 200px each.
EDIT: Wufoo has some examples of what I'm trying to do but I'm too ignorant at CSS to understand all that code and I would appreciate if someone could give me some pointers.

First off, do not use a table. Putting form elements in a table does not solve your problem and complicates your maintenance. Using tables to supplement form presentation is a sign of incompetence and complexity. It is also entirely non-semantic. Instead you might actually have to write some CSS. Honestly, if you are going to use tables for non-tabular data then don't even bother using CSS as that multiplies the complexity of maintenance.
Here are some things to keep in mind:
1) Define all your units in "em" units. Most form elements are intended to contain text. Those elements, like text fields and textarea blocks, can be increased and decreased as a feature of accessibility. This means your pixel perfect pretty CSS grid will break the moment a user changes text size on the page.
2) Don't wrap your form element in a div. Like a div, your form is a block level element. Unless the form has peer nodes under a div parent simply direct any presentation directly to the form element and not a parent element that exists only to contain the form.
3) Group your form elements. If you are floating text fields things can get all messed up if the forms are floated independently of their respective label elements. It will be easier to put an ordered list inside your form and then wrap each form element in a list item. This way you only have to worry about defining layout of the label element relative to its form control and then layout of them together by defining presentation of the list item. This method is also semantic and informs text readers of an order upon your form controls.
4) Don't use the !important declaration. This makes for a quick fix in your CSS but completely screws up inheritance and absolutely complicates maintenance. Instead take the extra time to write your code correctly the first time, so that future maintenance is a quick and minor event.
5) Don't use position absolute, unless you really know what you are doing, even if your form is set to position relative. Position absolute results in unexpected behaviors in many cases and unexpected problems.
6) To ensure your CSS code actually defines a true grid use the Firefox MeasureIt plug in. It will help you achieve stunning accuracy and save you incredible time when making your grid.
7) Do everything correctly the first time using as little code as necessary to get the job complete and present your form perfectly. Only then test your form for cross browser accuracy. Make one correction for cross browser accuracy at a time to limit unnecessary bloating to your CSS code.

Something like this may help. This is how I did it on a form.
It will take some fine tuning though to make it work at your desired width. This might help you get started though.
The CSS:
.contact ul {margin:0; padding:0; list-style:none;}
.contact li {margin-bottom:10px; overflow:hidden;}
.contact label {display:block; margin-bottom:2px;}
.contact label span {color:#999;}
.contact .input {width:592px; border:1px solid #E0E0E0; background:#F6F6F6;}
.contact select.input {border:1px solid #E0E0E0; background:#F6F6F6;}
.contact .third {float:left; width:193px; margin-right:10px;}
.contact .third .input {width:185px;}
.contact .half {float:left; width:294px; margin-right:10px;}
.contact .half .input {width:286px;}
.contact .half select.input {width:294px;}
.contact .omega {margin-right:0;}
The HTML:
<form action="/contact-us" method="post" class="contact">
<ul>
<li>
<div class="half">
<label for="name">Name:</label>
<input type="text" id="name" name="name" class="input" />
</div>
</li>
<li>
<label for="address">Address:</label>
<input type="text" id="address" name="address" class="input" />
</li>
<li>
<div class="third">
<label for="city">City:</label>
<input type="text" id="city" name="city" class="input" />
</div>
<div class="third">
<label for="state">State:</label>
<input type="text" id="state" name="state" class="input" />
</div>
<div class="third omega">
<label for="zip">Zip:</label>
<input type="text" id="zip" name="zip" class="input" />
</div>
</li>
</ul>
</form>

Here's a basic kickoff example which may be of use:
<!doctype html>
<html lang="en">
<head>
<style>
fieldset { width: 400px; padding: 1%; }
input[type=text], select, textarea { width: 98%; }
.half { float: left; width: 48%; padding: 1%; }
.full { clear: both; width: 98%; padding: 1%; }
.right { text-align: right; }
</style>
</head>
<body>
<fieldset>
<legend>Contact form</legend>
<form>
<div class="half">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half right">
<input type="submit" value="send">
</div>
</form>
</fieldset>
</body>
</html>
Note that I am using left-floated div's of half-width instead of unordered list items.
As you insist in using percentages, don't expect it to be pixelperfect in all browsers. If you want to have it all pixelperfect, you really need to use pixels.

I think this is what you are looking for:
http://www.alistapart.com/articles/prettyaccessibleforms/
It should help simplify your structure a little bit. It doesn't explicitly describe how to make multiple column forms, but the technique could probably expand to that with some creativity on your part.

No need for the fluid 960 system here, unless you want the form to expand and contract with the browser.
I would recommend the regular old 960 grid system for this. 960 width is great for grids because it divides evenly by 12 and 16 which allows you to set up pixel perfect three and four column layouts.
The best way to get familiar with the 960 grid system is to look at the souce css and the source of the html demo
<div class="grid_6">
<p>
contact form
</p>
</div>
<div class="grid_3">
<p>
name
</p>
</div>

I had to do something similar and ended up setting my half-columns to 46%. It leaves an extra bit of room for the padding and gets all your input fields consistently sized.

One answer is Blueprint. I have read where you don't think it's the answer, but it's still the way I would do it. All the ease of tables with all the power of CSS.
With blueprint the math is pretty easy. Let's say your form spans 10 columns.
<div id="contact-form" class="span-10">
<h3>Contact Form</h3>
<form action="contact">
<div id="form-sec-1" class="span-5">
<label>Name</label> <br/>
<input type="text" name="name" /> <br/>
<label>ZIP code</label> <br/>
<input type="text" name="zipcode" />
</div>
<div id="form-sec-2" class="span-5 last">
<label>Email</label> <br/>
<input type="text" name="email" /> <br/>
<label>Country</label> <br/>
<input type="text" name="country" />
</div>
<div id="form-sec-3" class="span-10 last">
<label>Message</label> <br/>
<textarea name="message" />
</div>
<div id="form-sec-4" class="span-8">
<input type="checkbox" name="copy"/>
<label>Send me a copy</label>
</div>
<div id="form-sec-5" class="span-2">
<input type="submit"/>
</div>
</form>
</div>

Oh wow,i was just thinking what in the world is the matter with the css world then i saw this css grid layout editors draft,http://dev.w3.org/csswg/css3-grid-align/
I still cannot explain why the css world hasn't really been thinking along such lines,what explanation can there be for the lack of such a feature in css.