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>
Related
I just recently started using Thymeleaf through one of my projects. I have seen few examples where th:text=${example} is being used in some places th:value=${example}.
I have gone through the Thymeleaf documentation but couldn't find anything explicitly citing the difference, nor did any question on SO.
Any help would be really appreciated! Thanks.
th:value is modification of html attribute value.
For button, input and option elements, the value attribute specifies the initial value of the element
th:text is used for tag body modification.
div{background-color: lightblue; padding: 2px} // to highlight empty div
<!--th code: <div th:value="${value}"/></div> -->
<br/>Result th:value div: <div value="sometext"/></div>
<!--th code: <form><input th:value="${value}"/></form>-->
<br/>Result th:value form: <form><input value="sometext"></form>
<!--th code: <div th:text="${value}"></div>
Same as: <div>[[${value}]]</div> -->
<br/>Result th:text div: <div>sometext</div>
Here is docs of different Thymeleaf attributes features
Lets see an example:
<input type="radio" name="gender" value="male"> Male<br>
if we want to use thymeleaf in value portion of this input tag, then we will use,
<input type="radio" name="gender" th:value="${someValue}"> Male<br>
if we want to see the text (here Male) sent from the controller dynamically, then we use,
<input type="radio" name="gender" th:text="${someText}""> <br>
th:name => This would be the name of the value that you will be passing to another page (Exemplar scenario).
th:value => This would be the actual value that you would be passing. It could be obtained from a model or straight from the database explicitly.
<form th:action="#{confirm-pass-details.html}">
<button type="submit" th:name="event-id" th:value="${event.get().getEventid()}">Buy Passes</button>
</form>
My question is very similar to this one
Jinja has a "center" formatting option, but how about "right align"?
Basically, I want the effect like:
something: 1
someotherthing: 3
thelastthing: 2
But instead of "key", I want to align "form.element.label". I tried to use the same rjust function. However, I got
jinja2.exceptions.UndefinedError: 'wtforms.fields.core.Label object'
has no attribute 'rjust'
I haven't seen your HTML, but I expect that one of these two sites should have the info you need to right-align your element.
You'll need to do one of two things with your form.element.label as you put it into your HTML code. You'll either need to find a way to identify the label (or maybe even the entire form that it's part of) so you can add some CSS that will be able to grab it, or you can add the CSS style code directly to that element on the page. I'll give some examples using form alignment, but the same idea applies if you really want to do just the label.
Identifying the label or form with a CSS class
<style>
.myform {
float: right;
}
</style>
<form class="myform" action="demo">
<label for="demo">Demo</label>
<input type="radio" name="demo" id="demo" value="demo">
</form>
Using CSS to align any label or form, causing all of them to right-align
<style>
form {
float: right;
}
</style>
<form action="demo">
<label for="demo">Demo</label>
<input type="radio" name="demo" id="demo" value="demo">
</form>
Including the CSS in the code for the label or form
<form action="demo" style="float: right;">
<label for="demo">Demo</label>
<input type="radio" name="demo" id="demo" value="demo">
</form>
Make sure to check out those W3 Schools links, because there are other ways to do the alignment besides floating the elements. Hopefully this gives you what you need!
Hy
What i want to do is to create a custom renderer for will_paginate which renders first, previous, next and last page and a input field where the user can type in the page number manually. I already have the links for first, last etc. but i stuck at the input field. I could create a form in the view but the input field has to be rendered between the previous and next links.
Does anyone know how to do this?
Thanks for your help
You can do this as a separate form (make sure it is a GET). All you
need is the one input element named page. Something as simple as this
should work (not all browsers may like the #). I dropped it into a
site I'm playing with now and it worked. Put it anywhere on your page.
You might have to make something more complicated if you need to
incorporate search terms.
<form action="#" method="get">
Go to page: <input type="text" name="page" value="" size="2"
maxlength="4" />
<input type="submit" name="btnSubmit" />
</form>
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 would like to put a nice little data-icon="star" on some chekbox labels of a group of checkboxes. Is there a way to do so using jQuery data-icon or should I just do it directly in the CSS (in which case how do I get the same rendering as the one of data-icon?).
In a dream world, here is what would work:
<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' data-icon='star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>
Thanks a lot for your help
You would have to use your own custom CSS or JS to do this, data-icon only works with a tags per the documentation: http://jquerymobile.com/test/docs/buttons/buttons-icons.html
This is even more tricky because the icon's are entered as styled spans which is exactly how the jqm checkbox is rendered - they both use the ui-icon for some base styling and positioning.
If you tried to use a jquery function to append it after the jqm styling has worked its magic like so: http://jsfiddle.net/shanabus/zt7cP/1/ - but again, the styling conflicts with the actual checkbox, but the functionality of the checkbox is still there.
Hope this gets you going in the right direction.
I am not sure if this is only available in the latest jQuery mobile (1.4.5) but you can just add ui-icon via the "class" attribute. So for this example it would look like this:
<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' class='ui-icon-star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>