I am using the Material design lite library and trying to create a Floating text box like what google has for the Gmail. I didn't find any documentation for the component, however I tried the below code
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
<input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
This creates a design something like this
I am trying to design the text box something like this
Is there any way to create this design ?
Here is what I created:
<div id="googleLogIn" style="position:absolute;">
<input type="text" style="border:6px solid blue;height:35px;width:300px;position:absolute;top:50px;"
placeholder="">
<p style="background-color:white;width:100px;position:absolute;left:20px;top:25px;padding:3px;">
Email or phone</p>
</div>
It makes something close to what you want it to be.
Try using HTML tags feildset and legend:
<span style="font-family:arial;font-size:.9em">
<fieldset style="width:300px;border-color:blue;border-radius:5px;padding:10px">
<legend style="color:blue"> Email or phone </legend>
<input type="text" style="border:0;font-size:2em">
</fieldset><br>
</span>
<span style="font-family:arial;color:blue;font-weight:bold">Forgot email?</span>
Related
I´m using kendo UI Jquery for my web, and I used some components like the Kendo Multiselect it has clear icon on the right and its provided by the control by default.
<div>
<label for="simple-input">Input</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 100%;" />
</div>
My question is does this functionality exists for a normal text box? or should I implement it :V
Yes, with kendo css, you will get an x icon at the far right of the input box when the box has focus.
https://dojo.telerik.com/#RichardAD/otUrArax
<p>
<label for="simple-input">Input</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 100%;" />
</p>
<p>
<label for="simple-search">Search</label>
<input id="simple-search" type="search" class="k-textbox" style="width: 100%;" />
</p>
In case anyone stumbles upon this question, it seems that input type="search" will do the trick.
Example
<input type="search" placeholder="test">
Works regardless of whether the Kendo-UI library is used. In my case, I was using it with Kendo-Angular.
I've tried many different ways, and nothing seems to add my custom field on my cart to the cart attributes like everywhere says you can. I don't understand. I've even used Shopify's UI generator and THAT's not working either. Here is the code I add:
<p class="cart-attribute__field">
<label for="your-name">Your name</label>
<textarea required class="required" id="your-name" name="attributes[Your name]">{{ cart.attributes["Your name"] }}</textarea>
</p>
Then I've tried this:
<div style="width:300px; clear:both;">
<p>
<label for="delivery_date">Pick a delivery date:</label>
<input required class="required" id="delivery_date" type="text" name="attributes[delivery_date]" value="{{ cart.attributes.delivery_date }}" />
<span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
</p>
</div>
That doesn't work either, it has something to do with the attributes but I can't figure out what.
Anyone?
If you've pasted your code inside the <form>...</form> tags then the issue I see with your code is that setting the value is wrong:
<div style="width:300px; clear:both;">
<p>
<label for="delivery_date">Pick a delivery date:</label>
<input required class="required" id="delivery_date" type="date" name="attributes[delivery_date]" value="{{ cart.attributes["delivery_date"] }}" />
<span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
</p>
</div>
You can see this working at a development store: https://kotn-eu.myshopify.com pwd skufom
In the liquid cart section, inside <form> tag you should add input or textarea with name attribute note.
For example:
...
<form action="/cart" method="post" novalidate>
...
<textarea name="note">{{ cart.note }}</textarea>
...
</form>
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>
I have some Material Design Lite 1.0.6 input fields in a form. The fields are placed on the same line within a grid cell with a submit button on the right. The button currently has problems in Firefox because of a known problem with alignment.. it's ok in Safari/Chrome:
<form className="frontpage">
<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input className="mdl-textfield__input" id="email" type="email" value={this.state.email} onChange={this.handleEmailChange}/>
<label className="mdl-textfield__label" htmlFor="email">email...</label>
<span className="mdl-textfield__error">Input is not an email address!</span>
</div>
<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input className="mdl-textfield__input" id="password" type="password" pattern="[A-Z,a-z,0-9\?#\$%&\*\-_=+! ~\.,\/\\]*" value={this.state.email} onChange={this.handleEmailChange}/>
<label className="mdl-textfield__label" htmlFor="password">password...</label>
<span className="mdl-textfield__error">Input can only contain letters, numbers, and some special characters!</span>
</div>
<button className="mdl-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" type="submit" name="login" disabled>Login</button>
</form>
I do see markup like:
<div class="mdl-layout-spacer"></div>
in some examples but it doesn't seem to help with spacing the fields or buttons horizontally. I suspect I may be looking for a way to tell flexbox how to do it, but haven't found clear instructions on how to do this and i'm not sure whether this is the best mechanism. Controlling the spacing between grid cells would also be of interest.. perhaps also done with flexbox. I am using React to render the components, but i suspect this is specific to material-design lite.
thanks!
Overwrite css 'display: block' to 'display: inline-block' in className ="mdl-textfield__input"
I am using windows to create a simple HTML form, and I cannot figure out how to create the sub-labels for the various inputs. The picture (link in comment below) shows what I am trying to produce. Is this a Safari only thing? The closest I came was using CSS display:block which allowed me to move the label on top of the input.
You can accomplish that by wrapping each group of label & input within e.g. div, like so:
<div class="form-line">
<div class="form-field">
<input class="form-field-input" id="input1" type="text" placeholder="Your value..." />
<label class="form-field-label" for="input1">
Text 1
</label>
</div>
<!-- other groups go here -->
</div>
Here's the CodePen example
To do this you'd need something like
<input type='name' class='my-input'>
<label for="name">
<span class="label">First</span>
</label>
and then style that.