The bottom line for text-field is shown a bit above.
No CSS used ...
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
<label class="mdl-textfield__label" for="phone">Phone</label>
<span class="mdl-textfield__error">Digits only</span>
</div>
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="demo-input" />
<label class="mdl-textfield__label" for="demo-input">UserName...</label>
</div>
</form>
Take a look at what I got
Take a look at the answer which i posted for the below stackoverflow thread.
Material Design Lite - Bottom Line in text field has a slight gap with colored line
Related
I'm new to flexbox and it seems really complex compared to bootstrap. I have a splash screen where I am required to vertically and horizontally center a content:
<div layout="row" layout-align="center center">
<div layout="row" layout-wrap>
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
</div>
however it doesn't center till I add a height to it:
style="height:500px"
Why does it behave this way? Is my code wrong? This doesn't seem like the right way of doing it.
Also with the items in my second row with the layout-wrap the last div with flex=25 overlaps the second div with flex=45.
Basically what I want to do this vertically and horizontally center a div and be able to split that div into as many columns as I like while maintaining a responsive width that adjusts depending on screen size.
Maybe this can point you in the right direction - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row" layout-xs="column" layout-align="center center">
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
I am trying to have text on both edges (right and left) of the slider. It's very clear why this makes sense from a UX perspective. Obviously that's not working for me:
<div class="row">
<div class="small-10 small-centered columns">
<fieldset class="fieldset ">
<legend style="background:0;">bla bla</legend>
<div style="color:#1583cc">left extreme name</div>
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<div style="color:#1583cc">right extreme name</div>
<div class="row">
<div class="small-1 small-centered columns">
<input type="number" id="sliderOutput2" style="text-align:center; color: #1583cc;">
</div>
</div>
</fieldset>
</div>
</div>
The texts become their own row while the slider takes up the entire width of the container as a third row in between them.
I'd like them to be one row, where the slider occupies the space left after the texts have been positioned at the (left and right) edges of the container's width. How should that be accomplished in a nice way?
As a newb to the Zurb Foundation, you should look into the grid system which allows you to do just what you are asking. It is also the basis for the responsive design.
Your code:
<div style="color:#1583cc">left extreme name</div>
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<div style="color:#1583cc">right extreme name</div>
... should utilize the grid. Here is an example but there are many ways you could go about it.
<div class="row">
<div class="small-3 columns" style="color:#1583cc">left extreme name</div>
<div class="small-6 columns">
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-3 columns" style="color:#1583cc">right extreme name</div>
</div>
http://foundation.zurb.com/sites/docs/slider.html#data-binding
Here is the info on grids (and more basics) you should study:
http://foundation.zurb.com/sites/docs/grid.html#basics
Using primefaces 5.1, i'm testing my app with WCAG validator and the following code is breaking a guideline:
<p:outputLabel for="selectHowMuch" value="Do you feel edgy lately ?" />
<p:selectOneMenu id="selectHowMuch" value="Yes">
<f:selectItem itemLabel="Argggg" itemValue="3" />
<f:selectItem itemLabel="Yes" itemValue="2" />
<f:selectItem itemLabel="hmmm" itemValue="1" />
<f:selectItem itemLabel="NO!" itemValue="0" />
</p:selectOneMenu>
the broken guideline is
Success Criteria 1.3.1 Info and Relationships (A) Check 91: select
element missing an associated label.
Repair: Add a label element that surrounds the control's label. Set
the for attribute on the label element to the same value as the id
attribute of the control. And/or add a title attribute to the input
element. And/or create a label element that contains the input
element.
Error Line 1, Column 16711:
<select id="_testapp_WAR_testapp001SNAPSHOT_:j_idt3:selectHowMuch_input"
Note that the p:outputLabel actually did help (if i remove it, i get more errors), but it looks like it's not covering the <select> _input label
I also noticed that the same happens for other select components.
Any ideas to get around this ?
Edit: here's my generated code:
<label id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:j_idt62" class="ui-outputlabel ui-widget"
for="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus">Do you feel edgy lately ?</label>
<div id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
<div class="ui-helper-hidden-accessible">
<input
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus"
name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus"
type="text" autocomplete="off" />
</div>
<div class="ui-helper-hidden-accessible">
<select
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
tabindex="-1"><option value="3">Argggg</option>
<option value="2">Yes</option>
<option value="1">hmmm</option>
<option value="0">NO!</option></select>
</div>
<label
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_label"
class="ui-selectonemenu-label ui-inputfield ui-corner-all"> </label>
<div
class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
</div>
<div
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_panel"
class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow">
<div class="ui-selectonemenu-items-wrapper"
style="height: auto">
<ul
class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="Argggg">Argggg</li>
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="Yes">Yes</li>
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="hmmm">hmmm</li>
<li
class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
data-label="NO!">NO!</li>
</ul>
</div>
</div>
</div>
<script id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_s"
type="text/javascript">$(function(){PrimeFaces.cw("SelectOneMenu","widget__tutorial_WAR_tutorial001SNAPSHOT__j_idt3_selectHowMuch",{id:"_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch",widgetVar:"widget__tutorial_WAR_tutorial001SNAPSHOT__j_idt3_selectHowMuch"})});</script>
Sorry, i have to contrast with the last answer...
In your example, this select does not have an associated label
<select
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
tabindex="-1"><option value="3">Argggg</option>
<option value="2">Yes</option>
<option value="1">hmmm</option>
<option value="0">NO!</option></select>
There is one label after it who might have been thought for it, but it does not have a for attribute and does not contain the select tag.
<label
id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_label"
class="ui-selectonemenu-label ui-inputfield ui-corner-all"> </label>
As I understand, both the input and the select are generated for this one field and only one label is correctly associated with the input. This looks like a bug in primefaces, and you should ask their staff to make some corrections...
Also there would be more correction to do, because the first label should be associated with the select element, and the input element be invisible to screenreaders if I correctly understand.
There is nothing wrong with your markup per se. It conforms to one of the accepted techniques.
http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H44#H44-ex1
Although that example shows use with an <input> element, it is equally valid with a <select> element.
This looks like a bug in your validator. I suggest trying FireEyes http://www.deque.com/products/fireeyes/fireeyes-installation/
In PHPStorm, when creating a snippet, you can do something like this:
<!-- $VALUE$ Form Input -->
<div class="form-group">
<input type="text" name="$NAME$" class="form-control">
</div>
With variables and such, so you can easily write a value. I'm wondering how to do the same thing with Sublime Text 3. This is what I have in my CDATA tag:
<!-- $VALUE Form Input -->
<div class="form-group">
<input type="text" name="$NAME" class="form-control">
</div>
However, it's not working.
Unfortunately, the only variables that are available in snippets are specified in the docs under snippets environment-variables, as well as any you declare in a .tmPreferences metadata file, or in a .sublime-options file. However, you can have predefined values in snippets. For example, this snippet:
<snippet>
<content><![CDATA[<!-- ${1:VALUE} Form Input -->
<div class="form-group">
<input type="text" name="${2:NAME}" class="form-control">
</div>$0]]></content>
<tabTrigger>form_group</tabTrigger>
<scope>text.html</scope>
</snippet>
gives this result when triggered:
You can then hit Tab and the focus will move from field 1 to field 2:
and again to move to the exit point $0:
I need to generate following html markup in jade
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
My try:-
.checkbox
label Remember me
input(type="checkbox")
generates
<div class="checkbox">
<label>
"Remember me
"
<input type="checkbox">
</label>
</div>
How can we place element "checkbox" infront of "Remember me" label text?
Have you tried nesting it like this?
.checkbox
label
input(type="checkbox")
| Remember me