I'm just working on a form and having some issues with the placeholder not displaying inside the textarea.
If I do backspace twice it appears. Tried lots of different suggestions after trolling this site but haven't been able to resolve the issue yet. Happens in all browsers.
<div class="form-group">
<label>Description:</label>
<textarea placeholder= "Describe yourself" style="height:200px;
width:300px; font-size:12pt; align-top: "name= "profile_description"
class="form-control" required></textarea>
</div>
The above lines work well on their own despite the CSS align-top being incomplete.
The issue is with one of your custom class names. Please remove them one at a time to isolate the problem.
Update:
On troubleshooting further with #ljean we found that there were whitespaces in the textarea tag leading to this behaviour.
Update:
And so here is the code with the whitespaces which were causing the issue removed.
<div>
<b class="text-white" style="float:right">Already a member? <a
href="../login/index.html" class="text-white" style="text-
decoration:underline;">Sign in</b></a>
<br>
</div>
Related
I created a codepen to illustrate the problem. Just select all of the options in the dropdown, and you'll see that the display of the selected items will overflow the container. For reference, here's the html that causes the issue:
<div><!-- this container needs some arbitrary max-width to be able to see the overflow -->
<div layout="row"><!-- making this a layout="column" instead of row will fix it -->
<div layout="column"><!-- putting max-width:100% here will fix it -->
<md-input-container>
<md-select ng-model="test" multiple>
<!-- md-options -->
</md-select>
</md-input-container>
</div>
</div>
</div>
I can't figure out why it would overflow, and so I'm not really clear on why the two fixes work. Can anyone explain why this isn't working as written, or propose a better way to avoid the problem?
Update: I found this is a known issue on the github site, but there is no good resolution there.
Update 2: I found the max-width solution doesn't help in IE11.
I cannot get Capybara for find a checkbox element.
I've tried all the usual ways:
find_field
check
find
click_on
It's as if the element isn't there. If I select the parent element, and look at it's innerHTML the checkbox is included:
(byebug) all(:css, '.checkbox.form-group').last['innerHTML']
\n <input type=\"checkbox\" id=\"google_agreed_to_terms_at\" value=\"1\" required=\"true\" ng-model=\"agreed_to_terms\" required-notification=\"Please agree to the terms and conditions\" class=\"ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required\" bs-validation=\"\">\
but selecting the child elements it's not there:
(byebug) all(:css, '.checkbox.form-group').last.all :xpath, './*'
[#<Capybara::Node::Element tag="label"
path="//HTML[1]/BODY[1]/DIV[2]/DIV[1]/DIV[2]/FORM[1]/DIV[1]/LABEL[1]">]
I feel like I'm going mad.
Here's the relevant code (copied from save_and_open_page)
<div class="checkbox form-group">
<input type="checkbox" id="agreed_to_terms_at" value="1" required="true" ng-model="agreed_to_terms" required-notification="Please agree to the terms and conditions" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" bs-validation="">
<label class="label-light" for="agreed_to_terms_at">
I have read and agree to the terms</label>
</div>
I thought maybe rails was generating slightly non-compliant HTML, so I've gone to writing the checkbox by hand, but it didn't help.
What's going on here?
The checkbox is hidden to allow for uniform styling across all browsers. Since you have a label element correctly associated you can tell check to click the label instead of the actual checkbox
check('agreed_to_terms_at', allow_label_click: true)
which will click the checkbox if visible and if not it will click the label. If you want it to only click the label you can do
find(:label, 'I have read and agree').click
Or
find(:label, for:'agreed_to_terms_at').click
Due to CSS styling, the checkbox element was being hidden and the label used to present it. So the element was getting skipped over by capybara's default behaviour to ignore hidden elements.
I worked around it using
find('#agreed_to_terms_at', :visible => false).trigger('click')
In my application i use twitter bootstrap to add nice icons to buttons etc. With normal buttons and links i can achieve this by doing..
<g:remoteLink .. code omitted .. class="btn">
<i class="icon icon-warning-sign"></i> <g:message code="default.button.add.label"/>
</g:remoteLink>
This results in a nice button with a icon in front of the text..
Now i want to use a submitToRemote:
<g:submitToRemote .. code omitted .. value="${message(code: 'default.button.add.label')}" class="btn"/>
But i seem to fail in adding the
<i class="icon icon-warning-sign"></i>
to the value.. any hints or tips on how to achieve this?
I tried several things like putting this style in the class attribute but this also fails.
Any hints?
submitToRemote generates an <input type="sbumit" ... /> tag (source code), which does not easily lend itself to what you're hoping to do (value is expected to be a plain string, not markup).
One alternative might be to use formRemote instead of submitToRemote, along with a <button> that includes your icon markup:
<g:formRemote action="..." update="...">
...
<button type="submit" ...><i class="icon icon-warning-sign"></i> Text...</button>
</g:formRemote>
I'm new to all this so please bear with me.
I've been using some jQuery UI widgets and I'm wanting to create category (adults) radio buttons with their own set of subcategories (children) that only appear when the appropriate adult is selected.
Here's the code I have so far: http://jsfiddle.net/99azd/
The problem is only the formatting of the initial set of children work, the others show up as plain checkboxes. I think it has something to do with the div id="format" but I'm not sure.
<div style="display: none;" id="Adult1Children">
<div id="format">
<input type="checkbox" id="child1" value="child1"/><label for="child1">child1</label>
<input type="checkbox" id="child2" value="child2"/><label for="child2">child2</label>
</div>
</div>
Got some help from the IRC channel - here's the fixed code:
http://jsfiddle.net/w6qFC/
I had a duplicated id "format" so it only ran the first one. All I had to do was change the id to a class instead and then in the js change from #format to .format. Simple.
$( ".format" ).buttonset();
and
<div class="format">
I don't know what this is called hence having a hard time finding any reference on the net for this. On hotmail when you enter an email it boxes the email into a rectange block one by one on the same line with options to edit and delete the email. What is this and are there any sample code/frameworks to implement something similar?
Thanks.
It's normally a UL, and inside it you have LI which are either elements styled to have a box around them (emails, in your case), or a borderless INPUT box which blends into the surrounding UL of the same background. JavaScript code handles deletion and insertion of box LIs according to keyboard input. I am not aware of framework support for it, but it may exist.
EDIT: It exists. http://plugins.jquery.com/plugin-tags/tags for jQuery options.
I was looking for the same thing, and upon looking at the source code for it. It seems that they are using a UL like Amadan said, but its set up like this:
<div id="container">
<ul id="email_list">
<li class="email_token valid" id="a#a.com" email="a#a.com">
<p>a#a.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_token valid" id="b#b.com" email="b#b.com">
<p>b#b.com</p>
<span class="delete_link">x</span>
</li>
<li class="email_input_container">
<textarea class="email_input_field"></textarea>
</li>
</ul>
</div>
EDIT: I ended up implementing it and it runs wonderfully!
Try to use Firefox+Firebug to inspect the elements in hotmail. It'll help you to find out yourself.