Bulma has support for styling a file upload button. The following example has been taken from the official documentation for version 0.9.3:
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
How can I style a disabled upload button? I tried putting a disabled attribute on the input element which avoids the file open dialog from being shown. The upload button still is styled like an active control, though.
Based upon the suggestion from user Connexo, the following CSS allows to render a file upload button in disabled state when the (hidden) input control has the attribute disabled:
.file-input[disabled] + .file-cta {
cursor: not-allowed;
opacity: 0.5;
}
.file-cta .file-label {
cursor: inherit;
}
When using color modifiers like is-primary on the file upload button the CSS might need to be extended with color settings.
There is a feature request ticket on the Bulma project GitHub page together with a proposed fix, but it has not been integrated into the main development branch yet.
Related
Robot Framework Choose file is failing to upload the file to drop area on a webpage. We cant use AutoIT as we set up our tests to run in Docker Jenkins. Is there a way we can achieve this via Execute Java Script ? Tried many solutions suggested from stack overflow, but no luck. Below is the DOM of our webpage:
<form>
<ul class="form-fields grid" style="display: flex;">
<li class="row-divider"></li>
<li class="grid__col-6 required" id="Certification.upload" style="display: flex;">
<label for="upload">Certification Document Upload</label>
<div class="Block_block__3KAi_ Block_block__center-content__1bky1" style="height: 6rem;
padding: 0.5rem; border-color: rgb(193, 202, 206);
cursor: pointer;">Drop file here or click to choose file</div>
<input type="file" class="hide text-input">
</li>
<li class="row-divider"></li>
<li class="grid__col-6" id="annualCertification.downloadBlankPDF" style="align-content: baseline; display: flex;"><button class="btn btn--outline" style="margin-top: 1rem; outline: none;"><i class="fa fa-download"></i> <span>Blank Certification Form</span> </button></li>
<li class="grid__col-12 form_form__horizontal_rulers__3_u4v"><hr class="line-break"></li>
</ul>
</form>
Tried below Robot Framework Code :
execute javascript
... var element=document.evaluate("//input[#type='file']", document, null,
XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
... element.setAttribute("class", "text-input");
Choose file //input[#type='file'] ${EXECDIR}/UI/annual-certification-form.pdf
I get no errors, but file not uploaded. We fill in several other attributes on the form, upload a cert document and submit form to complete the request.
Depending on the implementation of your SUT - drag and drop events - speficically if dragging a file from computer into browser window is handled somewhat differently than than "choose file to upload" sort of mechanism. Selenium and SeleniumLibrary too doesn't support that out of the box.
However, SeleniumTestability overrides SeleniumLibrary's Drag And Drop keyword to implement a javascript workaround for this.
Drag And Drop file:${CURDIR}${/}${FILENAME} id:demo-upload
So, that might work directly with your scenario by having the first parameter file: to point to the absolute path of the file you want to upload and id:demo-upload to appropriate selector for the input ta..
See my acceptance test # https://github.com/rasjani/robotframework-seleniumtestability/blob/master/atest/draganddropfile.robot
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.
This is the css of a info button(from bootstrap) and its in my style.css file in resources in resources in netbeans. I am using a maven/web application with Java Server Faces framwork.:
.btn-info {
background-color: #d60d8c;
border-color: #d60d8c;
}
this is the button code in a JSF page:
<button type="button" class="btn btn-info navbar-btn navbar-right" id="logg">Sign in</button>
The button code is in a bootstrap navbar. The border of the button is using the border-color: #d60d8c;, but the background color of the button does not change according to background-color: #d60d8c;.
Why is that? Am I doing something wrong here?
(Assuming css is loaded properly)
Your css selector is only class-specific. Probably, somewhere in your project there are more specific css selectors, matching the button. (you can see, what selector "wins" for property using Chrome developer tools (F12), tab Elements-Computed.
So, you need to be more specific.
For example, add id selector:
#logg.btn-info {
background-color: #d60d8c;
border-color: #d60d8c;
}
If it won't fix your issue, try to play with specificity
Using TB, is it possible to style the radio or checkbox so that it shows a glyphicon instead of the default style for radio or checkbox? I want to use a glyphicon glyphicon-star to indicate unchecked, then glyphicon glyphicon-star-empty to indicate checked.
Without javascript you could modify the style... Its kind of a hack in my opinion but it was interesting because I realized that boostrap uses an icon font #newb.
HTML
<input type="checkbox" class="glyphicon glyphicon-star-empty" >
CSS
.glyphicon:before {
visibility: visible;
}
.glyphicon.glyphicon-star-empty:checked:before {
content: "\e006";
}
input[type=checkbox].glyphicon{
visibility: hidden;
}
Try it out HERE
Just for those, having the same problem and came from Google (I didn't find any convenient answer).
I tinkered something like this and tested it in the current Chrome, Firefox and IE. With this method, you also can use everything else you want as checkbox. Just give the classes "checked" and "unchecked".
For every checkbox do this:
<input id="checkbox1" class="icon-checkbox" type="checkbox" />
<label for="checkbox1">
<span class='glyphicon glyphicon-unchecked unchecked'></span>
<span class='glyphicon glyphicon-check checked'></span>
Checkbox 1
</label>
And add to your CSS:
input[type='checkbox'].icon-checkbox{display:none}
input[type='checkbox'].icon-checkbox+label .unchecked{display:inline}
input[type='checkbox'].icon-checkbox+label .checked{display:none}
input[type='checkbox']:checked.icon-checkbox{display:none}
input[type='checkbox']:checked.icon-checkbox+label .unchecked{display:none}
input[type='checkbox']:checked.icon-checkbox+label .checked{display:inline}
On the official website, the javascript section has examples of styling groups of checkboxes and radio buttons as buttons groups. It's under the buttons section here.
Instead of having text inside the button that reads "Option 1", you would place your glyphicon instead. If you wanted only one checkbox, I suppose you could eliminate the button group and just go with a single button.
To remove the button appearance and only show your icon, use the "btn-link" class.
I haven't tried this myself, but I see no reason for it to not work.
Here is a pure angular solution to toggling between to glyphicon to conditionally show content on the page. I found the CSS solution to fail in IE.
This does more than your question, but I thought the toggling of something on the screen is useful.
<p ng-init="toggle = false" ng-click="toggle = !toggle" title="#Resources.Label_HideShowCustBiller" style="cursor:pointer" class="glyphicon" ng-class="{true: 'glyphicon-chevron-up', false: 'glyphicon-chevron-down'}[toggle]"></p>
<div ng-show="toggle">
//what you want to show here
</div>
I have 2 buttons on a page and enable/disable of these buttons are done by evaluating a checkbox selection.
Currently the disabled button also changing the color when mouse is on them.
I want to control the .css button hover based on whether a button is disabled or enabled.
Do you know how to ensure that the colors shouldn’t change for disabled button when the mouse is on them?
.cshtml
<input class="submit-btn submit-right-margin" id="case-escalate" type="submit" value="Update & Escalate" data-caseId="#Model.CaseId"/>
<input class="submit-btn submit-right-margin" id="case-update" type="submit" value="Update" data-caseId="#Model.CaseId"/>
.css
.submit-btn:hover
{
color: #2474AD;
background: #BFDDFF;
}
.js
I manage (enable/disable) input submit buttons based on a checkbox selection from a .js file.
You can use this to format disabled inputs:
input[disabled] {
background:gray;
color:silver;
...
}
and with input[disabled]:hover you can format the hover state.
But the [disabled] is still not working on a few browsers.
EDIT:
Never tested this before:
Maybe you can handle this with classes. Just add/remove a class when disabled/enabled with JavaScript.