I'm using SimpleForm and was able to create a list of radios. Is there a way that I can render them as buttons or images?
I did some search and tried this:
- f.collection_radio_buttons(:category, [['Male', 'icon_male'], ['Female', 'icon_female']], :first, :last) do |category|
= category.label { image_tag("/assets/icons/16x16/#{category.text}.png") + category.radio_button }
However, it still renders the radio icon, see below
Is there a way to render it as just images that's selectable or as buttons similar to Twitter Bootstrap button? http://twitter.github.com/bootstrap/javascript.html#buttons
Also, this requires me to specify the list of images in the view, I need it to be driven off the model, something like category.image_url
I ended up not using simple_form's radio element. I simply resorted to jQuery and a hidden input element.
Related
I have 2 components. I have some checkboxes in first component.It resides in left side of the Web Page like Nav bar. In second component I would like to load some HTML Div element on the basis of those checkbox. Now I can load the divs while clicking on those checkboxes using below code.
mounted () {
EventBus.$on('change',this.formated);
},
But when I am clicking on a new checkboxes the loaded divs of previous checkboxes will not disappear. I can see both output of current and previous checkboxes as like output of .append() of jQuery.
How can I clear/disappear previous HTML outputs ?
You need use jQuery's clear() on the elements innerHTML which you're appending too. A better approach would be to instead of appending content, use a v-for directive and maintain an array in the data property with the content you want visible. That would be leveraging vue's reactivity for its intended purposes and offer a more flexible implementation.
I have the following text:
<div>Answer the following <span class='title'>Question:</span><br> (a+b)<sup>2</sup>=?</div>
I want to do the following with this text:
parse it tag by tag, so that I can render each of the tag in a custom way. I could, very well, achieve that using this library: https://github.com/Thomas101/react-native-fence-html.
while parsing the superscript/subscript tags, render the content in proper fashion. This is where I'm stuck right now.
What I'm doing right now, is that I put the entire text (from start to end) in a Text component; and each span and br tags are also rendered as Text components nested within the parent Text component (the one for the div tag).
How do I render the superscript/subscript text?
Note: I did find a solution here: Superscript Text in React Native
But, creating a View inside a Text component needs the View to have fixed dimensions, and that is something not achievable.
One option would be to convert the HTML to Markdown first and then render the markdown. I believe for both of those actions there are libraries available.
I'm building a google-style text box that auto-completes typed text.
Using typeahead with typeahead.js-bootstrap.css:
$(document).ready(function() {
$('#op1').typeahead({
remote: '/search/%QUERY',
});
});
<input type="text" id="op1">
it worked but there are two problems:
I could not customize it. Whenever I make any significant style changes, or use bootstrap's form-control class for input element: the text box gets completely messed up.
The auto-completed ("hint") text was written above the typed text so I whatever color I set for the hint was the color of the entire text! I tried giving the hint a negative z-order but then it was not displayed at all.
I've tried Typeahead AND Select2 auto-completion libraries with my Bootstrap 3 template, and so far the only thing I was able to work out-of-the-box without completely ruining the layout was the above code
If anyone can solve these problems, or otherwise recommend a full CSS + JS typeahead solution for Bootstrap3, I'd be grateful :)
It gives you completely easy way to customise the look with formatresults. You can even write full html view for your results. and to customise the look of input box apply a class to the wrapper for your search box and override select2 rendered css(load the page and check from browser that from where that style is coming).
http://ivaynberg.github.io/select2/
I made a full featured customised search with this.
There is now a fork available for select2 that supports Bootstrap 3.
http://fk.github.io/select2-bootstrap-css/
https://github.com/fk/select2-bootstrap-css#readme
im using a CTabView to display some HighCharts graphics, but only the first tab gets rendered.
i see a blank tab for each of the other ones,
and sometimes i get javascript errors from HighCharts (tickPosition not defined)
is the javascript for HighCharts being published properly to the different views?
why would the first view work and not the other ones?
$this->widget('CTabView', array(
'tabs'=>array(
'tab1'=>array(
'title'=>'Contract Extensions per Group',
'view'=>'reportGroupExtensionsStack',
'data'=>array('model'=>$model),
),
'ta1'=>array(
'title'=>'Gender of Assistants',
'view'=>'reportGender',
'data'=>array('model'=>$model),
),
),
));
Highcharts doesn't work in hidden/not displayed containers.
Take a look: http://highslide.com/forum/viewtopic.php?f=10&t=10712
So possible solution is to render all chart or outside the containers, and move them to the specific tab when clicked, or when tab is clicked - then render chart.
I´d like to create a tree mixing radio and checkbox .... The first section will use radio (to select just one Base layer in my map) and the others sections will use checkbox (to select any layers to show up)
Is it posible to do that with dynatree? Image attached...
Checkboxes and Radioboxes are simply CSS styled <span> tags, so you can add your own CSS that overrides this based on some custom node classes.
You should then use selectMode: 2, and implement the desired behavior in the onSelect handler.