I want to change the style of my bootstrap form to my own custom css. So, I create a class in my form, but the changes I make to the class's css isn't changing the style of the form.
Here's my form:
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-log-in"></span> Login</a>
<div class="dropdown-menu" style="padding: 5px; padding-bottom: 5px;">
<form class="login-form" action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" placeholder="Email" style="margin-bottom: 15px;" type="text" name="user_username" size="30" />
<input id="user_password" placeholder="Password" style="margin-bottom: 15px;" type="password" name="user_password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user_remember_me" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
And here's my css:
.login-form {
left:0px;
right:0px;
width:300px;
margin:0 auto;
background-color:#000000;
padding:60px;
}
If .login-form class is coming from an external style sheet you should determine that the style sheet is being loaded by the browsers. In Chrome go to the View menu and from the Developer submenu choose Developer Tools. For most these tools appear at the bottom of the browsers' view port. Click on the Sources tab and then click on your CSS file; if you see the CSS then the style is loading. If not, then the style is not loading and it may be a problem with the URL that points to the style sheet.
Additionally you should validate your style sheet in W3C validator as an error in an earlier or later style could be causing a cascading error. Common Cascading errors are failing to properly close a style rule with a curly brace or terminating a property's value(s) with a semi-colon.
Related
I need to click "SEND" once mobile number is entered in the input. I am using bootstrap material design css. Below is the html code I am using Any helps would be appreciated.
<div class="form-group">
<label for="mobile_no" class="bmd-label-floating form_input_label">Contact no</label>
<input type="text" class="form-control no-margin " id="mobile_no" style="width: 80%" placeholder="SEND">
</div>
CSS used is as below.
input[type="text"]::-webkit-input-placeholder {
text-align: right;
font-family: Lato;
font-size: 16px;
letter-spacing: 1px;
color: #00bcd4;
}
You could add a submit button:
<input type="submit" value="SEND" />
You could add a button:
<button type="button">SEND</button>
Or you could wrap something in an tag, as in:
<div class="form-group">
<a href="#">
<label for="mobile_no" class="bmd-label-floating form_input_label">Contact no</label>
</a>
<input type="text" class="form-control no-margin " id="mobile_no" style="width: 80%" placeholder="SEND">
</div>
The submit button is the most common solution.
I've created a page with 3 buttons on it but all the buttons are stuck side by side and I don't know how to add space in between them.
This is the page so far.
<div style="width: 500px; margin-left: 20px;">
<a href="https://drive.google.com/file/d/0B9B-lYnsBAPHcFlkT3NQQThpa1E/view? usp=sharing" target="_blank">
<input type="submit" name="" value="View Study" />
</a>
<a href="https://drive.google.com/file/d/0B9B-lYnsBAPHT2c2MHhJN0l5NlE/view? usp=sharing" target="_blank">
<input type="submit" name="" value="View Study" />
</a>
<a href="https://drive.google.com/file/d/0B9B- lYnsBAPHZ0xoTUlnZGZMaWc/view?usp=sharing" target="_blank">
<input type="submit" name="" value="View Study" />
</a>
</div>
you can add a style for all the buttons with some margins around them like below
input[type='button']
{
margin:10px 10px 10px 10px; //just an example, you can add according to your need
}
Try adding a class to your div and styling it into your ss instead of hardcoding it into your html. You'll be able to modify all your links via this class later on. If however you must style in your html, simply add this to all your <a> tags: style="margin-right: 10px;"
Example :
<input type="submit" name="" value="View Study"/>
You can also just and break the line then in your top you can just center it or left or right and make it different areas.
I'm trying to use a div to submit a form. Here's the HTML:
<form name="search-form"
id="search-form"
action="php.php"
class="form-search">
<input style="color: black; background: rgba(255,255,255,0.5); padding: 15px; font-size: 18px;"
type="text"
name="search"
class="input-medium search-query">
<div class="button1" onClick="document.forms["search-form"].submit();">
<a href="#">
<img alt="" src="/img/buttons/icon1.png" />
</a>
</div>
</form>
The form does not submit when the div is clicked. Could someone point out the problem?
thanks. I've been trying this for an hour at least.
The a href is needed to keep the styling, but even if I remove it and left with just the icon, the submit doesn't work; nor does it work if I apply the onclick to the image.
Add search-form between single quotes:
onClick="document.forms['search-form'].submit();"
You can't just use quotes in quotes. Use single quotes to fix:
<form name="search-form" id="search-form" action="php.php" class="form-search">
<input style="color: black; background: rgba(255,255,255,0.5); padding: 15px; font-size: 18px;" type="text" name="search" class="input-medium search-query">
<div class="button1" onClick="document.forms['search-form'].submit();">
<a href="#">
<img alt="" src="img/buttons/icon1.png" />
</a>
</div>
</form>
It may not have anything to do with the error (or maybe it does, due to invalid html?), but you should add an end-tag to your input tag, right at then end here:
<input style="color: black; (... etc) "
type="text"
name="search"
class="input-medium search-query" />
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>
I am experiencing an issue with Firefox (tested with FF5/win, FF6/win, FF5/mac) having wider margins than any other browser I've tested. (IE9/win, Chrome/win, Opera/win, Safari/win, Safari/mac).
Admittedly, the HTML is unusual, I have 5 forms in a row, but I cannot find any documented problems with the idea, or any warning against it.
Here is the code:
HTML
<div style="background-color: rgba(255, 0, 0, 0.5); float: left; height: 82px; padding-left: 5px; padding-top: 12px; width: 502px;">
<span style="color: #514536; font-weight: bold;">Search By Destination:</span><br />
<div id="regions" style="margin-top: 5px;">
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Caribbean" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_carrib_region.jpg" alt="Caribbean" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Mexico" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_mexico_region.jpg" alt="Mexico" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Thailand" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_thailand_region.jpg" alt="Thailand" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Southern US" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_southus_region.jpg" alt="Southern US" />
</button>
</form>
<form action="/view-the-collection/" method="post" style="margin-right: 0px;">
<input type="hidden" id="dest" name="dest" value="Mustique" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_mustique_region.jpg" alt="Mustique" />
</button>
</form>
</div>
</div><br style="clear: both;" />
CSS
#container #regions form {
float: left;
margin: 0px 14px 13px 0px;
padding: 0px;
}
For most browsers, it renders like this:
Except in Firefox, which looks like:
I've made sure to remove padding and margins from every element in each of these forms, and it has no effect. I can't for the life of me figure out what is causing this, whether it is a browser incompatibility, or whether what I've coded is completely out of line. Can anyone advise?
Thanks in advance.
Heres a fix. Instead of adding margins to the forms, just set their widths to 97px each, and align the buttons/images to the left!!
Most likely a browser compatibility issue. I would suggest you using a CSS-reset like the HTML5 Boilerplate: http://html5boilerplate.com/
The extra space looks just about wide enough to be inter-word spaces. Does it go away if you try and cull away all whitespace between your HTML tags (ie between the <form>s and between the various parts of each form)?
You can use a very good and well referenced css package called Formalize CSS - Teach your forms some manners! to make the look and feel of your html form elements cross browser and cross os compatibility.