I am creating an Electron project and I am using Bootstrap Fileinput.
<div class="form-group">
<label class="control-label col-xs-3">Folder containing installation/patch scripts</label>
<div class="col-xs-9">
<input id="input-2" name="input2" type="file" class="file" data-show-upload="false" data-show-preview="false" data-show-cancel="false" webkitdirectory>
</div>
</div>
The control is rendered fine and works. The issue is that, as soon as the control is rendered, I can see "0%" above it. No matter what I have tried I cannot remove that. I don't want a progress bar to be visible, the control will work only to locate a folder name, which will then be used for other purposes.
Any ideas why I always see the progress bar?
I found the solution. I had to add the following option in js code when I create fileinput:
layoutTemplates: {progress: ''}
Related
I'm totally new to programming. Currently trying to automate few daily tasks using selenium web driver on Python. I have a webpage which contains multiple + expand button. Below is the code
Without expansion:
<div class="expansion container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle"></button>
</div>
</div>
With expansion
<div class="expansion_container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle active"></button>
</div>
</div>
I'm unable to find this element using any of the find_by method
My colleague said the page contains json that's why unable to locate using find_by
Can somebody please help with the code to locate and click the expand button.
Actual page:
Go-to https://fortigate.fortidemo.com
Username demo
Password demo
Click login read-only
Click later in next window
Now navigate to Network > interfaces There you can see lot of expand button that's what I'm referring I have written code to come till this page, but I want to expand before taking screenshot of the page
It does not have to do anything with JSON.
See, you are saying
<div class="expansion container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle"></button>
</div>
</div>
that you see this HTML when expand button is present.
You can locate with below css :-
button.compact-visual-toggle
or xpath :
//button[contains(#class, 'compact-visual-toggle')]
and since you have mentioned that they are multiple expension button, you can differentiate like below :
(//button[contains(#class, 'compact-visual-toggle')])[1]
should represent the first, for second you can try :
(//button[contains(#class, 'compact-visual-toggle')])[2]
and so on.. for 3rd, 4th....
in code you can use it like this :
driver.find_element_by_xpath("//button[contains(#class, 'compact-visual-toggle')]").click()
or
driver.find_element_by_xpath("(//button[contains(#class, 'compact-visual-toggle')])[1]").click()
or
driver.find_element_by_xpath("(//button[contains(#class, 'compact-visual-toggle')])[2]").click()
Now, coming to second part :
<div class="expansion_container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle active"></button>
</div>
</div>
in you you want to un-expand it, you could use the below xpath :
//button[contains(#class, 'compact-visual-toggle active')]
and use it like above.
I am using nightwatch.js to perform end-to-end testing and have to use a roundabout method for a waitForElementVisible command to work as expected. For example, my code below:
browser.waitForElementVisible(".profile label[for='Admin']") // works
browser.waitForElementVisible(".profile label[for='Admin'] input[id='Admin']") // breaks
For further clarification, I am testing to see if a radio button is visible. The radio button's DOM elements is as such:
<div class='profile'>
<div class='roleSelector'>
<label for="Admin">
<input type="radio" id="Admin" class="Admin">
</label>
</div>
</div>
As far as I know, there is no such specific case.
Did you try using '.profile input[id='Admin']' ?
Hope that serves your purpose at hand.
I am trying to add buttons to my Spartacus storefront.
The problem that is preventing me to progress ahead is:
1)If I generate new button angular component, using Angular, should it be mentioned inside the
tag or outside of that?
2)Should it be rendered in a different way as first?
Check out this repo and the corresponding stackblitz project. The easiest way add new buttons would be to place it in reference to an existing standard component using the outlets. Essentially, you could do some like the following, placing your new angular component app-custom-component before the ExistingComponent.
<ng-template cxOutletRef="ExistingComponent" cxOutletPos="before">
<app-custom-component></app-custom-component>
</ng-template>
Can you describe the problem more clearly? As much as I understood you are looking for below kind of code. For code check this link Spartacus Product Page
<div class="row">
<div class="col-md-6">
<button
class="btn btn-block btn-action"
(click)="addAddressButtonHandle()"
>
{{ 'addressBook.addNewAddress' | cxTranslate }}
</button>
</div>
</div>
Using Framework7, I created a toolbar. It worked great for the iOS theme. However, when I tested it on the material theme, it was on the top. I found some Framework7 documentation that pointed me to the "toolbar-bottom" class. However, the page-content acted as if the toolbar was still on the top, and the padding-top property was incorrect. I would not like to hard code overrides on the Framework7 css.
Here is my structure:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="page-content">...</div>
<div class="toolbar toolbar-bottom">...</div>
</div>
TL;DR read the docs you dumb OP
See this documentation page. In order for the CSS to work correctly, the toolbar must be before the page-content. Your format should look like this:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="toolbar toolbar-bottom">...</div>
<div class="page-content">...</div>
</div>
Is there any simple example on how to use knockout kolite to track the changes.
I saw this link posted by john papa [Kolite][1]. I didnt understood how he is binding changes to the html element for tracking changes. Anyone have any simple example of how to use it then its highly appreciated. I am newbee when it comes to knockout. Please help. Many thanks
I found one example. Here is link to fiddle
KoLite example
In fiddle you can see that save button is hiding and unhiding properly if there are any changes made to input field. I added code to enable the Cancel button but its not working.
<div data-bind="enable: dirtyFlag().isDirty">
<button>Cancel</button>
</div>
Please can you tell me why?
There you go:
http://jsfiddle.net/6dz7g/12/
<input type="text" data-bind="value: name, valueUpdate: 'keyup'"/>
<div data-bind="if: dirtyFlag().isDirty">
<button>Save</button>
</div>
<div>
<button data-bind="enable: dirtyFlag().isDirty">Cancel</button>
</div>
I've simply used ifnot binding for the save button.