<div style="display:inline;">
<textarea rows="10" cols="50"></textarea><br />
<div style="float:right;">remaining characters: 300</div>
It is not working in either firefox or IE. The text remaining characters is not within the "inline" bounds instead goes 100% out of the containing div.
what is the best way of accomplish something like this where text is aligned right in parent div with textarea before that?
Try this.
<div style="display:inline; text-align:right; float:left;">
<textarea cols="50" rows="10"></textarea><br />
remaining characters: 300
</div>
Related
I have a problem that I am not finding a solution.
I decided to put clockpicker in position fixed:
.popover.clockpicker-popover{
position:fixed;
padding-top:80px;
}
With this setting, I dont't know why, I have to click 2 time on my input to make clockpicker visibile. I know that there could be problem with z-index but it seems like if I change the z-index from the console of the input-wrap in the first try works but then it stops and the previous behaviour come back.
This is my input field:
<div class=" select eff01 col-50" style="position:relative">
<label>*Orario</label>
<div class="input-wrap" style="border: 1px solid rgb(187, 187, 187);">
<input class="form-control required time" id="TrainManuallyDepartureTime" autocomplete="off" readonly="readonly" type="text">
</div>
</div>
Do you have any suggestions?
How can I use the aria-attribute aria-labelledby for combo box (input+autocomplete list) correctly?
According to the W3C, the aria-labelledby property provides the user with a recognizable name of the object.
I've found the following example on W3C:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="ex1-label">
</div>
<ul aria-labelledby="ex1-label"></ul>
</div>
But I've noticed that aria-labelledby isn't descriptive. Values in aria-labelledby for different element are used the same.
Maybe I can use aria-labelledby like this:
<div class="combobox-wrapper">
<div>
<input type="text"
aria-labelledby="textBox">
</div>
<ul aria-labelledby="autocomplete-list"></ul>
</div>
The WAI ARIA attribute aria-labelledby is used when you can't use the normal <input> + <label> combination to label a form element, e.g. because you are using a custom form element. In other words, it is used in situations where you can't use the <label>'s for attribute to define a label for the input (e.g.
<input id="communitymode" name="communitymode" type="checkbox"> <label for="communitymode">communiti wiki</label>; note that the for attribute's value refers to the input's id attribute.)
With aria-labelledby, your reference works in the opposite direction as the for attibute: you tell the browser or the screen reader where to find the "label" for the form control it has just encountered.
<div class="combobox-wrapper">
<div>
<span id="combolabel">Select your country:</span>
<input type="text"
aria-labelledby="combolabel">
</div>
<ul aria-labelledby="combolabel"></ul>
</div>
In the above code sample, both the <input> element and the <ul> element are labelled by the <span> element with id "combolabel".
Remember the first rule of ARIA is don't use ARIA when native HTML elements exist. If you are trying to create an accessible autocomplete box try this:
http://wet-boew.github.io/v4.0-ci/demos/datalist/datalist-en.html
It does not use ARIA and follows all applicable W3C rules and guidelines.
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 got a ZUL Page, which is aligned by a "borderlayout". In "north" I got a Menubar, which is aligned left.
Now I want 2x Buttons and 2x Labels in "north", on the opposite direction of the Menubar (right).
I tried:
<north border="none">
<hbox width="100%">
<menubar id="menubar" width="380px">
<menu label="A">
<menupopup>
<menuitem label="A1"/>
</menupopup>
</menu>
....
</menubar>
<hbox vflex="1" hflex="1" align="center">
<div hflex="1"></div>
<label id="B"/>
<button id="C" label="C" />
<button id="D" label="D" />
<label id="E"/>
</hbox>
</hbox>
</north>
which looks fine, but when I set a value for label "b" or "e", the design gets broken.
h**p://i.imgur.com/HnRnxmj.png
The top part in the image is the right looking one, while the bottom one is screwed up. Any Idea how to fix this? The buttons are "fixed width" while both labels can "grow".
Thanks
Your spacer <div> is eating up all the space. Remove this and then set pack of the <hbox> to end.
This gives you something like that:
...
</menubar>
<hbox vflex="1" hflex="1" align="center" pack="end">
<label id="B"/>
...
As a general note I find it quite helpful to use Firefox/Firebug for debugging those layout issues. So one can easily see which resulting DOM is generated by the ZUL code.
I read How can I get two form fields side-by-side, with each field’s label above the field, in CSS? which seems to be close to what I need. Unfortunately, I am too new to this to understand most of it. My page used to work with tables, but somehow it got changed and mow it is based in form.
I can only center the labels with position:absolute but that seems to not work in smaller screens. Besides I wanted to use overflow:auto and with the fixed labels it does not make sense when you scroll down the page. The autoflow is not so important, as the ability to keep things in place in smaller screens.
Any ideas that could help, please?
This is the page: http://pintotours.net/coding/form.php
An example for current code:
> <form method="post" action="./database.php">
> <DIV style="position: absolute; left:590px; width:40px; height:25px">Username</DIV> <DIV style="position: absolute;
> right:545px; width:150px; height:25px">Repeat username</DIV> <br>
>
> <center> <p><label for="Username"> </label><input type="text"
> name="username" />
> <label for="Repeat Username"></label><input type="text" name="repeat-username" /></p>
>
> <DIV style="position: absolute; left:590px; width:40px;
> height:25px">Password</DIV> <DIV style="position: absolute;
> right:557px; width:150px; height:25px">Repeat password</DIV> <br>
>
> <p><label for="Password"> </label><input type="text" name="password" />
> <label for="Repeat Password"></label><input type="text" name="repeat-password" /></p><br>
>
>
> </center>
Use tables for simple and speedy form design else use div with css property 'float:left'. Don't use 'absolute' and 'left' 'right' css properties. Check some other websites learn how they designed forms.