Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I'm trying to work out a login module that looks like this
I've tried looking for bootstrap templates that allow this but I can't find any available. I was wondering if anyone here knows any bootstrap templates that does:
Responsive Login Dialog Box w/ Logo
Darkens the background
Been going nuts over this. Any help would be greatly appreciated. :)
There are ways around using any JS if you would prefer although you can take the modal approach. here is another suggestion.
Here is a Bootly of a similar solution
http://www.bootply.com/SeRZCS7L09
you can use the twitter bootstrap 3 for this. Because you can specify the width in your own CSS and then use the grid system to supply the rest. Have a look through the get started section o bootstrap 3.
if i was going to make this i would do the following:
HTML skipped the labels etc juut a brief example
<body>
<div id="login-form">
<h2>Login</h2>
<input type="text" class="form-control" name="password/>
<input type="text" class="form-control" name="username/>
</div>
</body>
Link my Bootstrap to get the benefits of form-control
then in my CSS sheet:
#login-form{
width: 400px;
margin:0 auto;
//etc etc etc
}
This is very basic but i feel there is no need to repeat to much as you will be able to look through the bootstrap documentation and it shows you in depth how to use the grids/columns/rows etc. using these you can easily create that look! i use it for a lot of projects.
Bootstrap 3
the darkened background could be achieved by a div with black background with maybe half opacity or less, you would make this appear via transition or JS. CSS3 Opacity
Basically you can do a modal box with the classes: modal, hide. And splitting modal box content in three different sections if you want: header, body and footer.
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Login to MyWebsite.com</h3>
</div>
<div class="modal-body">
<form method="post" action='' name="login_form">
<p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
<p><button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="modal-footer">
New To MyWebsite.com?
Register
</div>
</div>
For details you can check out:
Login form in modal
Related
Let's say I have HTML like this:
...
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="invalidCheck">
<label class="form-check-label" for="invalidCheck">
Agree to something
</label>
</div>
<div class="invalid-feedback">
I am outside of `form-check`!
</div>
</div>
...
I want to force to show the <div class="invalid-feedback">... without using JavaScript (want to use Bootstrap CSS only). And I know I can use CSS classes like was-validated or is-invalid, but invalid-feedback is outside of form-check. Is there an easy and simple way to show invalid-feedback by adding Bootstrap related CSS classes?
I found one solution:
<div class="invalid-feedback d-block">
Now I am visible!
</div>
But I feel like it's a hacky solution. Please advise!
Use display classes to display it manually for example d-block
use it like so
<div class="valid-feedback d-block">
or
<div class="invalid-feedback d-block">
Find more in documentation
There are better ways.
1)
Look into a was-validated class, that you can set on the form like so
<form action="..." class="was-validated" method="POST" novalidate>
When set on the form it displays validation feedback and also colorcodes the input field.
Just add it conditionally on your form, when validation failed on the server side.
2)
Or you can use some JavaScript to be in control of what is displayed. You can add this class dynamically
$('form').addClass('was-validated');
and you can also dynamically check if the form is valid like so
if ($('form').checkValidity()) {...
I'm using Angular UI Bootstrap datepicker popup on a modal dialog. The width of the outside border is not calculated properly based on the inside contents. In some cases, the outside box is bigger than inside contents. In other cases, the outside is smaller. Also, it seems the width of the outside of the datepicker has impact on the width of the popup. For example, "col-sm-4" will make the border smaller, while "col-sm-5" will make the border larger.
Can anyone please point me to the right direction to check where the problem might be?
Thanks in advance!
Look this: http://plnkr.co/edit/JTkIvBwl9agQCYxLaN6X?p=preview
Just change to: is-open="opened" to: is-open="$parent.opened"
So relevant snippets of HTML will look like:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.mm.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="open()">
<i class="icon-calendar"></i>
</button> <b><- button not working</b>
</span>
</div>
Just figured that out. It was a mistake. I have changed the "dropdown-menu" css class buried somewhere, which affects the datepicker layout.
i'm currently working with Twitter Bootstrap creating forms.
For styling an file input i'm using input-append:
<div class="input-append">
<input type="text" name="product[picture]-input" id="picture" readonly="readonly" placeholder="Produktbild (optional)">
<button class="btn" id="picture-reset" type="button"><i class="icon-remove"></i></button>
<button class="btn" id="picture-select" type="button">...</button>
</div>
But i don't get the styling fit to other inputs. I'm using the responsive design and i tried the relative sizing with
class="input-medium"
or the grid-sizing with
class="span4"
but it seems that input-append not optimized for. The full code you can see here:
http://jsfiddle.net/6cvYr/
And here some screens with different screen-sizes, in each size it won't fit:
https://drive.google.com/folderview?id=0ByywF8ZXCU9kbTdUZ1N6bkxodGs&usp=sharing
Any ideas?
I havent much experience on jquery mobile or related mobile UI frameworks, I am finding it difficult to align elements horizontally.
I want to horizontally align text field and select tag. so that they appear inline.
I tried data-type="horizontal" and data-inline="true". but they are not working.
Here's the code i am using,
<div data-role="controlgroup" data-type="horizontal">
<label for="cs" class="fieldLabel">option 1: </label>
<select name="cs[param_string_1]" id="cs[param_string_1]" data-inline="true">
<option>options</option>
</select>
<input type="text" data-inline="true" style="width:100px" id="cs[param_num_1]" name="cs[param_num_1]" />
</div>
Comments/Suggestions?
Tom's answer was useful. but that dint work exactly as per the need
I used following to get the required output.
<div data-role="controlgroup" data-type="horizontal">
<table>
<tr>
<td width="30%">
<select name="cs_abc" class="fieldLabel" style="width: 100%" data-inline="true" id="cs[abc]">
<option>...</option>
</select>
</td>
<td width="70%">
<input type="text" id="cs_xyz" style="width:160px" data-theme="d" name="cs[xyz]" />
</td>
</tr>
</table>
</div>
One can use layout grids for this (Refer here)
But layout grids may not give precise results, at least in my case i was not getting the needed alignment.
Some good fiddles were useful.
Take a look at Text inputs & Textareas.
It does not support data-inline on its own, but you can use data-role=fieldcontain instead:
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
As far as I can see you can't put multiple inputs next to each other using only jQuery Moblie...
<div href="#" data-role="button" style="margin:30px;">Adjust</div>
if you want to manipulate just right and left adjustments use style="margin-left=30px;margin-right=30px;"
...I am still learning the jQuery Mobile framework myself, so I know it is a pain when you just need to get something done, but you really should try to use what is already built within the framework, especially if you are going to build mobile friendly apps. Do yourself a favor and take the time needed to learn it.
Also, another tip; you need to stay away from using px values for sizing elements as that typically doesn't scale well on mobile devices, em values work best for cross platform use.
I have successfully used something similar to the following code to "inline" text input and select boxes with jqm. if you want the styles to be different - you can add the theme swatch letter after the individual ui-block element so that it looks something like ui-block-b or ui-block-c, etc. This is all documented here: http://demos.jquerymobile.com/1.0rc1/docs/content/content-grids.html
<div class="ui-grid-a">
<div class="ui-block">
<label for="cs[ps_1]" class="fieldLabel ui-hidden-accessible">option 1: </label>
<select name="cs[ps_1]" id="cs[ps_1]" data-mini="true">
<option>options</option>
</select>
</div>
<div class="ui-block">
<input type="text" style="width:10em;" id="cs[pn_1]" name="cs[pn_1]" />
</div>
</div><!-- /grid-a -->
I have a load of wizard controls and I need to slightly modify the html it is spitting out around the navigation. Currently I have the below..
<div class="nav">
<input type="submit" value="Back" class="secondary" id="FinishPreviousButton" name="FinishPreviousButton">
<input type="submit" value="Submit" class="primary" id="FinishButton" name="FinishButton">
</div>
I have added my desired classes to the buttons, primary and secondary, but i cant seem to work out how to change the containing div's class from nav. I've already tried .NavigationStyle.CssClass but that isnt doing the trick.
Any ideas?
My bad, NavigationStyle.CssClass was getting overridden. Sorted now.