So I am creating a simple login page and I am trying to style it using Googles Material Design, I came across MUI which a CSS3 framework that does just what I want except one simple thing, when I type in the username the floating label does float up and looks cool, but as soon as I move away from that input field the floating label sinks back down which looks incredibly ugly and obviously is not what I want.
I have created a jsfiddle to replicate the problem here.
<form class="" action="php/process_login.php" method="post">
<legend>Login</legend>
<div class="mui-textfield mui-textfield--float-label">
<input type="text" name="username" id="username" class="">
<label>Username</label>
</div>
<div class="mui-textfield mui-textfield--float-label">
<input type="password" name="password" id="password" class="">
<label>Password</label>
</div>
<div class="form-group">
<input type="submit" class="mui-btn mui-btn--raised" value="Login">
</div>
</form>
I have followed a simple guide that demonstrates how this should work here (Floating Labels) and it works well.
Could anyone suggest how I can fix this please?
You have to load also MUI javascript with
<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>
Working Demo.
You haven't embed the Javascript file, paste this in of your top of you page in the head section:
<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>
Related
Everytime I select the ngui-auto-complete scrollbar on the dropdown component, the dropdown disappears.
Would it be a better idea to add my scrollbar to another element rather than ngui-auto-complete?
Working example: STACKBLITZ
dropdown.component.html
<form [formGroup]="myForm" class="form-style">
<input
id="input-dropdown"
[list-formatter]="autocompleListFormatter"
type="text"
class="form-control"
minlength="3"
maxlength="20"
ngui-auto-complete
formControlName="gridDropdown"
[source]="dropdownData"
value-property-name="id"
display-property-name="name"
placeholder=" Search"
[(ngModel)]="value"
#agInput
/>
</form>
Source_code
You should add [close-on-focusout]="false" on your input element.
https://www.npmjs.com/package/#ngui/auto-complete
It should look like this.
<form [formGroup]="myForm" id="input-dropdown" class="form-style">
<!-- appAutoFocus - add this to input to use custom auto-focus directive-->
<input id="input-dropdown" [list-formatter]="autocompleListFormatter" type="text" class="form-control"
minlength="3" maxlength="20" ngui-auto-complete formControlName="gridDropdown" [source]="dropdownData" [close-on-focusout]="false"
value-property-name="id" display-property-name="name" placeholder=" Search" [(ngModel)]="value" #agInput />
</form>
If you can rely on others do implement basic functionality for you, Material Design components for Angular might be something helpful. It has also an autocomplete dropdown component https://material.angular.io/components/autocomplete/overview
I have not tested that with large scrollbars, bar I found Infinite scroll for autocomplete in Angular Material 6 which looks promising, i.e. that scrollbars seem to work as they should.
I'm facing a weird issue using bootstrap's inline-form together with a React component.
When using the example data as shown on the official doc's page directly in my rendered output (changing class to className as well as for to htmlFor):
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
inside my page, everything works as expected.
When I copy the same (reactified) code into the render function of my component, the paddings between the inputs are missing somehow.
As it turns out, this issue has somehting to do with how the html/markup is rendered or passed to the browser. From React, the markup is one single string without any indentations (which can be seen through dev-tools).
When removing all the indentations (via dev-tools) from bootstrap's official page, the same thing happens there as well.
Can anyone tell me why this happens and if there is anything I can do, e.g. tell React to indent the output or something?
Note: I'm not using Bootstrap 4. It's the latest in version 3.
When selecting the form element's node in dev-tools, RightClick -> Edit as HTML, the following is shown:
<form class="form-inline"><div class="form-group"><label for="exampleInputName2">Name</label><input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"></div><div class="form-group"><label for="exampleInputEmail2">Email</label><input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com"></div><button type="submit" class="btn btn-default">Send invitation</button></form>
Which is the unformatted, unindented string causing the issue.
I am trying to update to BootStrap 4 from BootStrap 3 on my localhost.
And I got this result which is from bootstrap 3
Here is a code which I use to link
<link rel="stylesheet" href="css/bootstrap.min.css">
And code for this inline form is here
<form class="form-inline">
<div class="form-group">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email#example.com">
</div>
<div class="form-group mx-sm-3">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Confirm identity</button>
</form>
But when I put a test file outside from the project folder and link to same CSS file then at that time it gives me result
Which is expected result
Please help me to solve this problem.
You need to clear your browser cache. If your problem persists, you need to check whether there is any other CSS changing your styles. If there is no such CSS, you need to check whether there is some Javascript overriding your styles. Switch off Javascript in your browser temporally and if the design is better this way, then after you switch Javascript back on, debug your JS code and see when is it changing your styles.
I'm still young when it comes to coding, and I've heard multiple things about organization. Some use section's and some use div's, some use a div for buttons, other use the inputs in css to change it. As someone who likes to do his code clean and simple to understand, yet correct, this sometimes bothers me.
What is the best way to make a login form, with the for example the maximum of remember me and a button, with a text under saying "You don't have an account yet? Register here".
Should I use divs, sections, or both? What are the orders of the divs/sections? Container, Login, buttons?
Example:
<div class="container">
<div class="login">
<form>
<input text>
<remember me>
<div class="buttons">
<input submits>
</div>
</form>
</div>
</div>
Is this correct? Is there a way of doing it more organized?
What the most correct, used, simple and clean way to make it?
Bootstrap makes it really easy to do forms w/ minimal styling, with the exception of font sizes, colors, etc, but they add extra elements, like the form-group so you don't have to add extra CSS. I like to always use article, header, section, footer, etc whenever I can.
I understand that div is basically a "whatever" element. Bootstrap uses divs throughout their examples, but just b/c it's a div on THEIR example, doesn't mean you cannot use something else.
It also depends a whole lot on your layout. Perhaps you have the login on one page, but you have background images, centering the login form, etc, so this will determine which types of elements that you use.
<div id="login">
<div class="form-group">
<input type="text" class="form-control" name="username" />
</div>
<div> class="form-group">
<input type="password" class="form-control" name="password" />
</div>
<div class="form-group form-inline">
<input type="checkbox" />
<label>Remember Me</label>
</div>
<div class="form-group">
<input type="submit" value="Login" />
</div>
</div>
This could easily be turned into
<article id="login">
<section class="form-group">
<input type="text" class="form-control" name="username" />
</section>
<section class="form-group">
<input type="password" class="form-control" name="password" />
</section>
<section class="form-group form-inline">
<input type="checkbox" class="form-control" />
<label>Remember Me</label>
</section>
<footer class="form-group">
<input type="submit" value="Login" />
</footer>
</article>
I tend to like the latter, but it's your decision really.
It all depends on 'what you use' and 'what you want to end with'.
If you want to add a complex css stylesheet or most of the work will be done on the server side, then you should better have a detailed composition.
In another hand, if you plan to use javascript and few css, the clearest the best.
To me, the login part (or its container, ie a header) of your page should be a section. The divs should be used to organize the inner-elements.
"The tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document."
[http://www.w3schools.com/tags/tag_section.asp]
I depends really basicly what you can handle better.
I am novice to jQuery Mobile and now i am working with form element, I have write following code:
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<input type="text" placeholder="Enter some text"/>
<input type="password" placeholder="Enter Password"/>
<input type="button" value="Login" />
</div>
</div>
but design not properly rendered in above two input type.i don't know what is issue .
below Picture shows ouput of above code ,in picture it is clearly displayed rendered view.
#Dima Kuzmich I got my answer.
Actually I was using old version of jquery mobile css 1.2.0 of version, that's why it will render above image design.
but when i used latest version of jquery mobile css 1.3.1 then my issue is solved perfectly fine.
Thank you #Dima Kulmich.