function displayEditProfileStudent() {
document,getElementById('editstudentprofile').setAttribute('class', 'unhide');
document.getElementById('profile_viewStudent').setAttribute('class', 'hide');
document.getElementById('ViewStudent').setAttribute('class', 'unhide');
}
function displayProfileViewStudent() {
document,getElementById('editstudentprofile').setAttribute('class', 'hide');
document.getElementById('profile_viewStudent').setAttribute('class', 'unhide');
document.getElementById('ViewStudent').setAttribute('class', 'unhide');
}
<div id="ViewStudent" class="hide">
<a href="#ViewProfileStudent" class="student_profile_view col-sm-1" onclick= "displayProfileViewStudent()" >View Profile</a>
Edit Profile
<form id="editstudentprofile" class="hide">
<h4>Edit Profile</h4>
<label class="col-sm-3">Major:</label>
<input class="major_input col-sm-5" name="studentmajor" type="text" placeholder="Enter your Major">
<br/>
<label class="col-sm-3">Cumulative GPA:</label>
<input class="GPA_input col-sm-1" name="studentGPA" type="text" placeholder="GPA">
<br/>
<label class="col-sm-3">Expected Graduation Date:</label>
<input class="graduation_input col-sm-2" name="studentgraduationdate" type="text" placeholder="MM/DD/YYYY">
<br/>
<label class="col-sm-3">Have you served as a TA before?</label><br/>
<input class="previousTA_input" name="previousTA" type="radio"> Yes<br/>
<input class="previousTA_input" name="previousTA" type="radio"> No<br/>
<a href="#EditProfileStudent" class="editaccount_btn btn btn-default" >Update Profile</a>
</form>
<div id="profile_viewStudent" class="hide">
<h4>Profile</h4>
</div>
</div>
when I click on the link for view profile/edit profile it wont show or hide the other, I am left looking the same screen. Any help is appreciated, I've tried scanning other posts and to my knowledge none have been helpful yet.
Also, here's the CSS of the hide class.
div.hide {
display: none;}
form.hide {
display: none;}
You could try
document.getElementById('editstudentprofile').classList.add('unhide');
document.getElementById('editstudentprofile').classList.remove('hide');
Furthermore, in your example your using a , instead of a . after document in two lines.
Related
I want to my text box start at in line. What should I do? This my code.
<div id="middle">
<div id="left">
</div >
<div id="m">
Name: <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
Family: <input type="text" name="y1" id="Family1"> <label style="display: none " id="Family" name="y2" >B </label><br />
Phone: <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />
<button onclick="myFunction()">save</button>
<button onclick="myFunction1()">refresh</button>
<div>
The result is:
But I want it to display like so without using space:
label{
width:50px;
display:inline-block
}
<div id="middle">
<div id="left">
</div >
<div id="m">
<label>Name:</label> <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
<label>Family:</label> <input type="text" name="y1" id="Family1"> <label style="display: none " id="Family" name="y2" >B </label><br />
<label>Phone:</label> <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />
<button onclick="myFunction()">save</button>
<button onclick="myFunction1()">refresh</button>
adding label solve it!
There are quite a few improvements that you could implement into your code. I would like to help solve your problem and improve your coding standards.
First of all to solve the issue in question. First, you need to wrap your label text in an element, this will allow you to apply a width to them so they align nicely, a <label> element will be best suited.
Like so:
HTML
<label>Name:</label> <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
<label>Family:</label> <input type="text" name="y1" id="Family1"> <label style="display: none " id="Family" name="y2" >B </label><br />
<label>Phone:</label> <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />
CSS
label {
display: inline-block; // a label is display: inline; by default so needs to be set to display: inline-block; so it takes a new width
width: 70px;
}
This will solve the issue.
To take your code further I have some recommendations.
Try and use IDs less, it is a good practice to use classes for all styling and only use IDs when necessary for JS DOM manipulation.
<label> elements can be given a for attribute that links it to an input, meaning when you click the label it will select the input, this is better user experience.
I recommend using the BEM class naming conventions to make sure you have clear and understandable CSS class names. BEM
In your <input> elements you have the same name. This is semantically ok but only when using type="radio", for all other input types they should each have a unique name.
Try and avoid putting inline style="..." unless absolutely necessary, it is much cleaner to keep CSS inside a CSS file.
If we apply all of these you will end up with code like so:
.inputs__row {
margin-bottom: 10px;
}
.inputs__label {
display: inline-block;
width: 70px;
}
<div class="inputs">
<div class="inputs__row">
<label class="inputs__label" for="name">Name:</label>
<input type="text" class="inputs__input" name="name" id="name" />
</div>
<div class="inputs__row">
<label class="inputs__label" for="family">Family:</label>
<input type="text" class="inputs__input" name="family" id="family" />
</div>
<div class="inputs__row">
<label class="inputs__label" for="phone">Phone:</label>
<input type="text" class="inputs__input" name="phone" id="phone" />
</div>
<div class="inputs__row">
<button onclick="myFunction()">save</button>
<button onclick="myFunction1()">refresh</button>
</div>
</div>
Hope this helps.
I have this html snippet:
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
And I would like to select first fieldset in the form. This what I am doing:
form.job-manager-form:first-child {
background-color: red;
}
But it selects all fieldset elements. How does :first-child works?
JSFiddle is here.
You need to target the element you want and then say it's the first-child.
There is an excellent article explaining how these selectors works:
useful-nth-child-recipies
fieldset:first-child {
background-color: red;
}
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
fieldset:first-child {
background-color: red;
}
This will work. However, your first-child fieldset is set to display:none; so it will not actually show the background color.
It selects an element if it is the first child of its parent.
Your selector doesn't select any fieldsets. It selects the form.
The fieldsets have a (default) transparent background, so you can see the red through them.
To select the fieldset that is the first child of a form you would need:
form.job-manager-form > fieldset:first-child
I have a checkbox button and a Paragraph side-by-side.
It's inline-block and everything is nice... Look:
When I turn my view into responsive, it just drops down a line. Like this:
How do I overcome this issue elegently in CSS without starting build divs around elements and bootstrap the whole deal here? Thanks!
re code; those are 2 columns and both button and paragraph reside in he left column.
EDITED FOR CODE ADDITION:
<div class="row no-pad">
<div class="col-xs-6 left-hand-input">
<!--FORM BEGIN-->
<form class="form-control-static" action="leadGen.php" method="post">
<p>PERSONAL DETAILS</p>
<hr>
<label for="firstName">FIRST NAME:</label><br>
<input name="firstName" id="firstName" type="text"><br>
<label for="email">EMAIL:</label><br>
<input name="email" id="email" type="email">
<p>SHIPMENT ADDRESS</p>
<hr>
<label for="address">ADDRESS:</label><br>
<input name="address" id="address" type="text"><br>
<label for="country">COUNTRY:</label><br>
<input name="country" id="country" type="text"><br>
<label for="zip">ZIP CODE:</label><br>
<input name="zip" id="zip" type="text"><br>
<input type="submit" id="submit" value="SEND">
<p style="display: inline-block; vertical-align: -10px;"> *Required fields</p><br>
<input checked type="checkbox" id="mailingList"/>
<p style="display: inline-block; font-size: 75%;">
Receive exclusive membership deals and offers.</p>
</form>
</div>
</div>
You need to use labels
<label><input type="checkbox" value=" id="mailingList">Receive exclusive membership deals and offers.</label>
Here is the jsfiddle demo: https://jsfiddle.net/o4qgu4gv/2/
You should also consider using col-sm-6 instead of col-xs-6 because it may look nice on an iPhone 4 screen
if it is for the checkbox or any input type tag in particular then a more suitable choice would be to use a label tag instead of a paragraph.
You could use label with its for attribute and it should work fine.
<div id="wrapper">
<input type="checkbox" id="btn"> check
<label for="btn">
this should not shift
</label>
</div>
I just started using bootstrap CSS with a setting form I am designing.
The form has 3 top level settings, radio1 (y or n), TopSettings (which has 3 sub-settings: Enable, textbox1, textbox2) and mediaDir (textbox). I am trying to align these 3 top level labels on the left, and align the 3 sub-settings of TopSettings on the right.
Before bootstrap, I was able to achieve these using hard-coded html tables.
(In the image: Top - the look I wanted, and achieved with hard-coded tables in html. Bottom - what from looks like with bootstrap)
<form name="serverSetting">
<fieldset> <legend> <b>Settings</b> </legend>
<div>
<table class="code">
<tr>
<td class="padded"> radio1= </td>
<td class="padded"> <input type="radio" name="radio1" value="Y">y
<input type="radio" name="radio1" value="N">n </td>
</tr>
<tr>
<td class="padded"> TopSettings=</td>
<td class="padded">
<table class="code" cellspacing = "0" cellpadding = "0">
<tr>
<td>Enabled= </td>
<td> <input type="radio" name="Enabled" value="Y">y
<input type="radio" name="Enabled" value="N">n ; </td>
</tr>
<tr>
<td>texbox1=</td>
<td><input type="number" name="textbox1" value=40>;</td>
</tr>
<tr><td>textbox2=</td>
<td><input type="number" name="textbox2" value=640>;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="padded">mediaDir= </td>
<td class="padded"><input type="text" name="mediaDir" value="/data/media">;</td>
</tr>
</table>
</div>
</fieldset>
</form>
However when I switched to Bootstrap, the inline property of the 3 sub-settings has lost. I did add "inline" class with div and the Enable radio is displayed inline, but textbox1 and textbox2 are not.
<form class="form-horizontal" name="serverSetting">
<fieldset> <legend> <b>Settings</b> </legend>
<div class="control-group code">
<label class="control-label code" for="xcode">radio1=</label>
<div class="controls">
<input type="radio" name="radio1" value="Y">y
<input type="radio" name="radio1" value="N">n
</div>
</div>
<div class="control-group code">
<label class="control-label code" for="TopSettings">TopSettings=</label>
<div class="controls form-inline">
<label class="inline" for="TopSettings">Enabled= </label>
<input class="code" type="radio" name="Enabled" value="Y">y
<input class="code" type="radio" name="Enabled" value="N">n
</div>
<div class="controls form-inline">
<label>textbox1e=</label>
<input type="number" name="textbox1e" onblur="if(this.value=='') this.value = 40" placeholder=40>
</div>
<div class="controls form-inline">
<label for="textbox2">textbox2=</label>
<input type="number" name="textbox2" placeholder=640>
</div>
</div>
<div class="control-group code">
<label class="control-label code" for="mediaDir">mediaDir=</label>
<div class="controls">
<input type="number" name="mediaDir" placeholder="/data/meida/">
</div>
</div>
</fieldset>
</form>
I was opening the html in Firefox. (I also tried to chrome, it was displayed inline but not align.) Does anyone know how to achieve the display as the above picture?
EDIT: my css file:
div{
max-width:550px;
}
.code {
font-family: "Courier New", Courier, monospace;
}
input{
}
.code {
font-family: "Courier New", Courier, monospace;
}
label.code {
font-family: "Courier New", Courier, monospace;
}
Here is a working version of your code on fiddle.
What was causing the problem:
When using Bootstrap horizontal forms always remember that the structure should be as follows:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
</form>
So in your case you should nest the "sub-settings" in a single div class="controls": the one after the "TopSettings=" label block. This is logical as all of the "sub-settings" form one nested block that is the control corresponding to the label "TopSettings=".
Then, there is no need to use form-inline: notice that the nested block (the "sub-settings" group) is nothing else than another nested instance of form-horizontal. Since the properties of form-horizontal are already inherited from the parent form, there is no need to repeat oneself. Instead, you should wrap each of the three "sub-settings" in a control-group div which in its turn will contain the label and the control.
Here is the revised code:
<div class="control-group code">
<label class="control-label code">TopSettings=</label>
<div class="controls">
<div class="control-group code">
<label class="control-label">Enabled= </label>
<div class="controls">
<input class="code" type="radio" name="Enabled" value="Y"/>y
<input class="code" type="radio" name="Enabled" value="N"/>n
</div>
</div>
<div class="control-group code">
<label class="control-label">textbox1=</label>
<div class="controls">
<input type="number" name="textbox1e" onblur="if(this.value=='') this.value = 40" placeholder=40 />
</div>
</div>
<div class="control-group code">
<label class="control-label">textbox2=</label>
<div class="controls">
<input type="number" name="textbox2" placeholder=640 />
</div>
</div>
</div>
</div>
EDIT
To align the sub-controls you can add the following custom two classes to your css:
.form-horizontal .control-label.subcontrol-label{
width: auto;
}
.form-horizontal .controls.subcontrols{
margin-left: 80px;
}
and use them accordingly with the sub-settings labels e.g.
<label class="control-label subcontrol-label">
and controls div e.g.
<div class="controls subcontrols">.
You can find the updated version of the demo here.
I have a Dropdown in my TopBar, built with the Twitter Bootstrap CSS framework.
I have 3 problems with it that I can't find any solution to:
The text and password input fields are far too big, how can I adjust them? Making the dropdown box bigger would be OK too.
The labels for the fields are too dark, how can I lighten them up a bit?
The Dropdown is closing when I click into one of the fields. I have to reopen it and then I can type until clicking in the next field. The values are preserved even when the dropdown is closed. How can I make it stay open?
Here is a screenshot of problems 1 and 2:
Also here is the HTML for the TopBar as it is now.
<div class='topbar-wrapper'>
<div class='topbar'>
<div class='topbar-inner'>
<div class='container'>
<h3>
Webworld
</h3>
<ul class='nav'>
<li>FILLER...</li>
</ul>
<ul class='nav secondary-nav'>
<li class='dropdown' data-dropdown='dropdown'>
Login
<div class='dropdown-menu' id='signin-dropdown'>
<form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div>
<fieldset class='textbox'>
<label id='js-username'>
<span>Username</span>
<input autocomplete="on" id="username" name="username" type="text" />
</label>
<label id='password'>
<span>Passwort</span>
<input id="userpassword" name="userpassword" type="password" />
</label>
</fieldset>
<fieldset class='subchk'>
<input name="commit" type="submit" value="Log In" />
</fieldset>
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
There hidden input is needed by rails and autogenerated.
I've already tried to copy the implementation of the login form that twitter uses, but when I tried that, the TopBar is about 250px in height and the content of the dropdown is open, not closeable.
I have no custom CSS or JavaScript so far, except for the top-padding of 40px in the body as suggested by the bootstrap docs.
Can someone help me with this?
Try adding the code below somewhere in your javascript. It should stop it from happening.
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
(Twitter Bootstrap 2.x)
You may want to move the contents of style="" to your stylesheets...
If user entered wrong password:
add class open to li class="dropdown open"
and class error to fieldset class="control-group error"
<ul class="nav pull-right">
<li class="dropdown">
Login <b class="caret"></b>
<div class="dropdown-menu">
<form action="" id="form_login" style="margin: 0; padding: 3px 15px" accept-charset="utf-8" method="post">
<fieldset class="control-group">
<label for="form_email" class="control-label">Email address</label>
<div class="controls">
<div class="input-prepend" style="white-space: nowrap">
<span class="add-on"><i class="icon-envelope"></i></span>
<input type="email" name="email" id="form_email" autocomplete="on" class="span2">
</div>
</div>
</fieldset>
<fieldset class="control-group">
<label for="form_password" class="control-label">Password</label>
<div class="controls">
<div class="input-prepend" style="white-space: nowrap">
<span class="add-on"><i class="icon-lock"></i></span>
<input type="password" name="password" id="form_password" class="span2">
</div>
</div>
</fieldset>
<label class="checkbox">
<input type="checkbox" name="remember" value="true"> Remember me
</label>
<p class="navbar-text">
<button type="submit" class="btn btn-primary">Login</button>
</p>
</form>
</div>
</li>
</ul>
You don't need any extra css or javascript to make this look nice (with TB2.x)
In case you don't want to stop propagation of your events, or that solution didn't work for you, you can add this code somewhere near initialization of bootstrap-dropdown:
$('html').off('click.dropdown.data-api');
$('html').on('click.dropdown.data-api', function(e) {
if(!$(e.target).parents().is('.dropdown-menu form')) {
$('.dropdown').removeClass('open');
}
});
For your third question - In your bootstrap-dropdown.js comment source code row
$('html').on('click.dropdown.data-api', clearMenus)
and write there this:
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("dropdown-menu") &&
!$clicked.parents().hasClass("dropdown-menu")){
clearMenus();
}
});
https://github.com/twitter/bootstrap/blob/master/bootstrap.css#L1559
max-width is set to 220px, remove the attribute and it will stretch itself.
Its looks like a CSS based problem u are facing.
I fixed it with the following styles:
#signin-dropdown {
padding-left: 5px;
padding-right: 5px;
padding-top: 1em;
}
#signin-dropdown form {
margin:0px;
}
#signin-dropdown form .textbox {
margin-bottom:0em;
padding-top:0em;
}
#signin-dropdown form .subchk {
margin-bottom: 5px;
padding-top: 8px;
}
#username, #password, #userpassword {
color: #404040;
float: left;
font-size: 13px;
line-height: 18px;
padding-top: 0px;
text-align: left !important;
width: 140px;
}
About your questions 1 and 2.
Have you tried setting the length of the input? You can do this by setting the "size" attribute of the input tag. You can read more here
Did you try changing the style of the label? For example:
<span style="color:#FFFFFF">Username </span>
you just add your content in <form></form> tag
like this:
<div class="dropdown dropdown-scroll" id="selectedClient">
<button class="btn btn-block btn-lg btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
انتخاب <span class="caret"></span>
</button>
<div class="dropdown-menu " role="menu" aria-labelledby="dropdownMenu1">
<button type="button" class="close">×</button>
<form>
<ul>
<li role="presentation">
<input id="searchSubClientInput" type="text" class="form-control" placeholder="جستجو بر اساس نام خانوادگی" ng-model="query">
</li>
</ul>
</form>
<ul class="select-list scrollable-menu">
<li class="dropdown-header">خودم</li>
</ul>
</div>
</div>