I have radio buttons that are styled to look like bootstrap toggle buttons, as follows:
<h:panelGroup>
<div id="sortButtons" class="btn-group" data-toggle="buttons-radio">
<h:commandButton type="button" styleClass="btn btn-inverse active" value="Price"><f:ajax listener="#{searchResultsRoundtripBean.sortByPrice}"/></h:commandButton>
<h:commandButton type="button" styleClass="btn btn-inverse" value="Departure"><f:ajax listener="#{searchResultsRoundtripBean.sortByTime}"/></h:commandButton>
</div>
</h:panelGroup>
The styling looks fine, here's an image of it: http://imgur.com/W1ewjCA
The problem, however, is that clicking the buttons does not toggle them. The event hooked up to them fires, but they are not toggled. Am I doing something silly here, or is there some caveat that I'm not aware of?
You need to add the render attribute to your ajax tag. It defaults to 'none'. #this should probably fix your situation.
<f:ajax render="#this" listener="..." />
http://www.jsftoolbox.com/documentation/help/12-TagReference/core/f_ajax.html
edit:
#this is most likely not what your looking for, but instead #form or the container id where the list you sort is located.
Related
Recently, we upgraded from Angular 5 to Angular 6.
The issue: Bootstrap button styles now have no margin spacing between them.
Bootstrap Version: 3.3.7
For example, if in the html you do something like this.
<div>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
Before we updated, these buttons would have margin space between each.
Just curious if there is something we can update that would fix this or a global CSS style that can be used.
In my project I was able to restore default white spaces between Bootstrap buttons, by setting preserveWhitespaces to true in main.ts file:
platformBrowserDynamic()
.bootstrapModule(AppModule, { preserveWhitespaces: true})
.catch(err => console.log(err));
Found it in this place
ConnorsFan's answer link is the answer to our issue.
Angular 6 by default sets the angularCompilerOption: preserveWhitespaces for the application to false.
To add to the marked answer, this issue is caused by the preserveWhitespaces setting.
what's really happening behind the scenes is your template code, for example
<div>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
is getting all the whitespace removed. which also removes the line break at the end of each button element. It's the line break that gives that extra space, not margin between each button.
So this shows more clearly why the buttons are sticking together.
<div><button class="btn btn-success">Success</button><button class="btn btn-info">Info</button><button class="btn btn-cancel">Cancel</button></div>
You can apply the fix as suggestion globally or you can resolve the problem on specific components if needed. https://angular.io/api/core/Component You'll notice that in the docs for #components you can provide an option to turn on/off this feature for that component only.
Another solution as suggested in comments would be to globally add marginto all .btn classes, however this would have the reverse side effect happening of the option ever switches again (giving to much margin between buttons instead of the natural space)
Final note, this is an HTML/DOM side effect, not Angular or CSS, you'll be able to replicate this effect with pretty much any inline elements by removing/adding the linebreak/spaces between each element.
Add the btn-toolbar class to the div to get space margin between the buttons. Like this:
<div class="btn-toolbar">
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
So, I have the IssuesList component, which is the list of issues that I get using ajax and github api, and DevStatus component, which sort of wraps the list up and contains all the logic, triggers state changes by two radiobuttons and so on.
My problem: When I click on one of the radiobuttons, the DevStatus component won't change state if the click was on the text inside the radiobutton. And when I click on the corners of the radiobuttons, the blue areas without text, the state changes perfectly.
Here's the structure of the radiobuttons:
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-primary active"
onClick={this.onChangeRadioButton.bind(this)}
id={this.CLOSED_ISSUE_ID}>
<input type="radio" name="options"
autoComplete="off"
id={this.CLOSED_ISSUE_INPT_ID}
onChange={this.onInputChange.bind(this)} /> Closed Issues
</label>
<label className="btn btn-primary"
onClick={this.onChangeRadioButton.bind(this)}
id={this.OPEN_ISSUE_ID}>
<input type="radio" name="options"
autoComplete="off"
id={this.OPENED_ISSUE_INPT_ID}
onChange={this.onInputChange.bind(this)} /> Open Issues
</label>
</div>
Here's the codepen with the code and here's the full page view so you could better see and understand what I'm talking about.
Please, open the full page view and try to click on parts of the button that contain text and on ones that don't and you'll notice that as long as you click on parts without text - the state changes and if you click on text itself - the state doesn't change at all.
Could you please help me with that problem?
PS: removing onChange from the input element is not the solution.
Update 1
If you go to DevTools and inspect the radiobutton element, you'll see that inside the label tag there're input and weird span elements. The span element is not in the code I wrote, did React automatically add that? For some reason, the onClick event listener is not applied to those input and span elements.
Update 2
I've tried to add click event listener to the radiobutton in the console of dev tools and tried to figure out the target of the clicked element. When I click on the text - it is the span element and when I click on place without text - it is the label element and that's why the click event is not working.
Can my problem be solved using dangerouslySetInnerHTML, so that it won't create the unnecessary span?
Could you tell me please how to solve that?
React is creating a span because your text is not in any div. Also it would create a span if there was any white space (but in your case this is because there is no div around your text).
But the real problem here is the way you check your event. You need to check e.currentTarget instead of e.target
Then no need to use the ugly dangerouslysetinnerhtml!
React appeared to sometimes be adding span tags around text, no matter if there are the free white-spaces or not. The spans didn't allow the onClick event to fire when they were clicked on.
So, to force React not to render the spans, the dangerouslySetInnerHTML may be used:
noSpanRender(text) {
return { __html: `<input type='radio' name='options' autoComplete='off'/>${text}` };
}
render() {
return (
<div className="dev-status-page col-centered">
<div className="graphs">
<h1 className="text-center page-header">
Our Recent Closed and Opened Issues from GitHub
</h1>
</div>
<div className="issues col-centered">
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-primary active"
onClick={this.onChangeRadioButton.bind(this)}
id={this.CLOSED_ISSUE_ID}
dangerouslySetInnerHTML={this.noSpanRender('Closed Issues')} />
<label className="btn btn-primary"
onClick={this.onChangeRadioButton.bind(this)}
id={this.OPEN_ISSUE_ID}
dangerouslySetInnerHTML={this.noSpanRender('Open Issues')} />
</div>
<IssuesList issues={this.state.issues} />
</div>
</div>
)
}
It was vital to avoid those span elements inside the input tag, so using dangerouslySetInnerHTML finally helped.
I have this simple thing to do in angularjs that require a bit of dom manipulation, and i think it suppose to be a directive of some kind but i have no idea how to approach it.
I have this simple button: (html)
<button class="btn btn-success" style='margin-bottom:17px' style='margin-right:5px;' ng-show='pageToShow < pages.length-1' ng-click='changePage("next")'>
<span class="glyphicon glyphicon-arrow-right" style='margin-right:5px' aria-hidden="true"></span>Next
</button>
When i click it, i want inside of it, instead! of the glyphicon, a moving gif, like this:
1) How to remove the already existing img inside of the button and replace it?
2) I want to have other types of spinners, not the rounded one, how can i change the default spinner?
How can i do so?
Check out this directive, it does exactly what you want:
(offine)
And a demo:
(offline)
You can change the classes of the button-prepend="" and spinner-icon="" to a css-class that defines your own spinners/gifs.
You can create your own loading gif with http://www.ajaxload.info. Then, use ng-show to determine if the gif or icon should be visible.
<button ng-click="loading = !loading;" class="btn btn-success">
<img ng-show="loading" src='http://i.imgur.com/1HDbs9b.gif' />
<span ng-show="!loading" class="glyphicon glyphicon-arrow-right"></span>
Next
</button>
http://plnkr.co/edit/6N4x5bZyiilV2GMqCP48?p=preview
What are the rules of using a_tag, div_tag and button_tag as button in HTML?
I am a Ruby on Rails user. Rails default gives input_tag and button_tag as button. What are the advantages of using other tags beside button_tag itself? When should I use each one?
Thanks in advance.
Without introducing any attributes, there is one HTML button element:
<button></button>
There is also a generic form input element which can be set to render as a button:
<input />
Both of these elements accept three button-type attributes which let user agents determine their behaviour (as buttons):
<button type="button">Regular button</button>
<input type="button" value="Regular button" />
<button type="submit">Form submit button</button>
<input type="submit" value="Form submit button" />
<button type="reset">Form reset button</button>
<input type="reset" value="Form reset button" />
These two elements behave identically when these attributes are set. The main difference between the two elements is that the button element can contain HTML whereas an input element may only contain text passed in through its value attribute (see <button> vs. <input type="button" />. Which to use?):
<button type="button">
<span>This is perfectly valid</span>
</button>
<input type="button" value="No HTML permitted here" />
(As a side note, a button element accepts any phrasing content descendant which isn't interactive content (another button or a checkbox, for example).
However, from an accessibility perspective any HTML element which accepts a role attribute can be turned into a button simply by declaring role="button":
<a role="button"></a>
<div role="button"></div>
<span role="button"></span>
...
These are all perfectly valid, and complying user agents will treat all of these as buttons.
How you use them depends entirely on the context. If your button is within a form, you're going to want to use an input element; if your button is standalone on your page, you're going to want to use a button element; if your button is found within a list of hyperlinks, you may as well just use an a element with a role of "button", but you could just use button here as well if you wanted to. Bear in mind that the type attribute's submit, reset and button values are only valid on button and input elements and will have no effect when added to any other element with a "button" role.
I have a load of wizard controls and I need to slightly modify the html it is spitting out around the navigation. Currently I have the below..
<div class="nav">
<input type="submit" value="Back" class="secondary" id="FinishPreviousButton" name="FinishPreviousButton">
<input type="submit" value="Submit" class="primary" id="FinishButton" name="FinishButton">
</div>
I have added my desired classes to the buttons, primary and secondary, but i cant seem to work out how to change the containing div's class from nav. I've already tried .NavigationStyle.CssClass but that isnt doing the trick.
Any ideas?
My bad, NavigationStyle.CssClass was getting overridden. Sorted now.