I have entered a code, here is the code
<h:commandButton action="#{loginBean.Onay}" value="GİRİŞ" styleClass="button">
<f:param name="yetkiID" value="#{loginBean.yetkiID}" />
</h:commandButton>
The problem is that it doesn't show my css text called button. And when I clicked with ctrl on to "button" show me all css classes with red Unrelated text.
Here is the image from my problem
Related
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 a Chrome extension that updates two text areas in a Web page dynamically and although the updated text displays fine in the Subject field, it doesn't appear at all in the message body.
The CSS for the textbox is as follows:
<div id="p-b-0" class="GPW32EMDIBB editable" g_editable="true" contenteditable="true"
role="textbox" aria-multiline="true" aria-live="polite" aria-label="Compose a message"
style="" value="Hello, World!" tabindex="1"><br></div>
Can anyone see why the text value shouldn't display?
That particular textbox is not actually a textbox, but a content editable div. I am guessing that your code looking for an object with a "textarea" tag.
I am using JSF 2.0
I am able to add Background image to the JSF button but am not able to add icon to the button.
My Requirement is:- JSF button with Background image and a Icon
Following code am using to add background.
<!-- Discard button-->
<h:commandButton action="discard" style="background-image: url('..\\Images\\leftMenuActiveBg.png');width: 150px;height: 30px;color: white;border-color: white;font-size: 15px; " value="#{message.discard}">
<rich:componentControl target="popup" operation="show" />
</h:commandButton>
Can somebody help me in adding a icon to the button too please.
I am updating a image for better Explainanation as what I want to achieve and I what I have achieved till now with above code.
So you want a button with two background images? That's not possible on a single HTML element. The <h:commandButton> generates an single HTML <input type="submit"> element, while you basically need a <button type="submit" class="background"><span class="icon"> instead. You'd need to create a custom component which generates exactly that HTML, or to adopt a 3rd party component librarty which has such a component in its set, such as PrimeFaces. See also the <p:commandButton> showcase.
I have a JSF 1.2 dataTable using ICEfaces 1.8. In one column, I would like to display the text from a backing bean, and then to the right of it, display a small image on the same line without it wrapping to a new line.
The image is actually a ice:commandButton component with the image attribute set. The action of clicking on the image is to display a ice:panelPopup panel.
Here is the relevant code of the column within the dataTable:
<ice:column id="col1">
<ice:outputText escape="false" value="#{document.column1Value}" />
<ice:form>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
</ice:column>
I have tried all sorts of adding CSS style information to various tags, including white-space:nowrap and float but have been unable to get the desired effect.
The <ice:form> generates a HTML <form>, which is by default a block level element, so it always starts at a new line. You need to set the style of the <form> to display: inline.
<ice:form style="display: inline;">
Alternatively, you can also just move that text into the form.
<ice:form>
<ice:outputText escape="false" value="#{document.column1Value}"/>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
Either way, you only still need to prevent the cell's content from being whitespace-wrapped when there's little room left in the cell's width. You could achieve that by setting white-space: nowrap on the common parent element of the both elements. In case of the first approach (setting the form to display: inline), that would be the <td> element and in case of the second approach (putting the text inside the same form), that would be the <form> element. E.g.
<ice:form style="white-space: nowrap;">
<ice:outputText escape="false" value="#{document.column1Value}"/>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
(note, the style attribute is in the above examples exemplary, in real you should be using CSS files instead with style classes)
so I'm building a custom firefox extension and I got to the step where the toolbar is showing up and I put in buttons etc with css
If you look at feedly's button (Feedly is a firefox extension), there is this nice rectangular background behind the button of the extension that makes it look like a legitimate clickable button: http://imageshack.us/photo/my-images/196/feedly.png/
whereas default extension buttons have no background behind it....
how do you style a custom extension button such that it has a button-like background just like the feedly button?
The <toolbarbutton> element has an image attribute that allows you to specify an image:
<toolbarbutton image="chrome://.../icon.png" label="My button"/>
However, usually you want to set the image from CSS using the list-style-image property. For example if your XUL code looks like this:
<toolbarbutton id="myButton" label="My button"/>
You would have the following CSS code:
#myButton
{
list-style-image: url("chrome://.../icon.png");
}
More info: https://developer.mozilla.org/en/XUL_Tutorial/Adding_Labels_and_Images