I'm using fancybox 3, something like this
Click me!
<div id="popup">MY POPUP with custom HTML</div>
However, no buttons get added, and I get a jQuery error "Cannot use 'in' operator to search for 'length' in ['slideShow','fullScreen','thumbs','share']". I've tried passing an object of options through data-options, but that did not work well. What is the correct syntax for what I am trying to do? I want to add some of the standard buttons, like the thumbnails preview, share button (if that's possible with custom HTML), etc
Use correct JSON syntax, e.g., replace ` and ":
<a href="https://source.unsplash.com/xAgvgQpYsf4/1500x1000" data-fancybox="group" data-buttons='["slideShow","fullScreen","thumbs","share"]'>
<img src="https://source.unsplash.com/xAgvgQpYsf4/240x160" />
</a>
Demo - https://codepen.io/anon/pen/oEaoVr?editors=1000
Related
I'm not sure how I explain this... :)
I am using symfony, twig and bootstrap to make a basic registration form on my website.
I have a checkbox at the end which the user must tick to accept the terms and conditions. the label for this checkbox includes HTML (the tag) which Bootstrap (or Twig) escapes, so I have to use a custom label next to the checkbox:
<div class="row align-items-center"> <!-- this is a workaround, may not be best practise -->
{{ form_errors(form.acceptTerms) }}
{{ form_widget(form.acceptTerms, { 'attr': {'form.acceptTerms.errors': ' '} }) }}
<label class="form-check-label" for="acceptTerms">I have read and accepted the Terms and Conditions</label>
</div>
Bootstrap renders the label as part of the form_widget twig element rather than the form_label , and the form_error is also rendered within the form_widget when there is an error. So, before, my label would just be displayed in plaintext, i.e. the html <a> tags would be visible to the user. But of course, since I am showing a custom label as well as the widget which includes the label, I have to set the widget label to ' ' (empty string) so now only one label is shown.
This work perfectly, UNTIL there is an error (i.e. the user doesn't tick the box and thus cannot register).
Then the error displays within the form_widget which is next to my custom label (they are in a bootstrap row div) and it ends up pushing my label to the right, when I want the error to be above the label. I tried adding {{form_errors(form.acceptTerms) }} above it as you can see, but that just displays the error BOTH above and next to the label. This is what it looks like with the above code in place:
ERROR you must accept the terms and conditions!
[ ] ERROR you must accept the terms and conditions!I Accept the **Terms and Conditions**
then this is what I WANT it to look like:
ERROR you must accept the terms and conditions!
[ ] I accept the **Terms and Conditions**
This seems like it should be a really easy thing to do, I don't know why its this difficult.
I need to somehow stop bootstrap from rendering the form_error and form_label within the form_widget .
Thanks
In Symfony 4.1 the bootstrap form theme was updated to be compliant with the WCAG 2.0 standard. As a result, the error for a field is no longer displayed with form_errors but within your form_label. If you separate your widget and label you will notice.
More information about this change can be found here.
In order to fix your problem just get rid of form_error (you don't need it any more) and only use form_label and form_widget. If that doesn't satisfy your needs or if you do not like the new behaviour for bootstrap 4 forms in symfony 4.1, you can always use an older form theme, or create your own.
If you decide to create your own form theme make sure to update the file twig.yaml file to something like this:
twig:
form_themes:
- form/custom_form_theme.html.twig
In this case, your custom form theme is strored in templates/form/custom_form_theme.html.twig
I am using headless chrome, rspec - 3.6.0, capybara - 2.15.1
select('apple',from: 'fruits', visible: false)
page.find('#apple', visible: false).click
within 'results' do
page.find('.option', text: 'apple').click
end
Error:
Capybara::ElementNotFound: Unable to find visible css "#fruits .chosen-drop .chosen-results"
The error shown in your question is not from any of the other lines of code you show, however based on the error message it's pretty clear what's going on.
Attempting to perform any action on an element you've found using visible: false makes no sense because the user can't interact with a non-visible element (99% of time if you specify visible: false you're doing something wrong). In the current case you are using the chosen library which hides the normal HTML <select> element and replaces it with a JS driven widget made up of <ul> and <li> elements. Because of this you can't use the normal select method and instead need to interact with the page just like a normal user would (click on the 'chosen' field and then click on the element from the list). You haven't provided the actual HTML generated for your page, but based on your attempts and the output generated by the chosen demo page - https://harvesthq.github.io/chosen/ - it will be something like
<select id="fruits" ... style="display: none;>
...
</select>
<div class="chosen-container" ... >
...
<div class="chosen-drop">
...
<ul class="chosen-results">
<li ...>Apple</li>
<li ...>Orange</li>
...
</ul>
</div>
</div>
So to work with that the user would first need to click on the .chosen-conatiner element (sibling of the hidden select) to open the .chosen-drop element and then click on the correct <li> from the .chosen-results element which translates into something like
chosen_container = find('select#fruits + .chosen-container').click
chosen_container.find('.chosen-results li', exact_text: 'Apple').click
If that doesn't work for you then you'll need to add the exact HTML from your live page to your question.
Note: if you're dealing with a lot of chosen widgets in your site you may want to look into writing custom Capybara selectors -https://www.rubydoc.info/github/teamcapybara/capybara/Capybara#add_selector-class_method - to make the tests read a lot better
https://jsfiddle.net/054j0fj7/
As you can see when you click on show catlinks you get the wikipedia page, How ever I would like to show the catlinks at the end of page.This area is defined in HTML as following:
<div id="catlinks" class="catlinks" data-mw="interface">
and this is the fancybox
<div> Show Catlink </div>
Just change target URL to correct one with anchor #catlinks.
<div>
Show Catlink
</div>
If you want to display only part of the external page, then it is not possible to implement directly. You would need to create, for example, php file that reads content of that page, parses and outputs only the part you need. Then you would simply display that page in fancybox.
So I'm trying to hit this "Review Agreement" button:
which has the following html code:
<section class="col-33 text-right">
<button class="anchor-button bordered" ng-click="onClickReviewAgreement()">Review Agreement</button>
</section>
BUT apparently it's loaded from another resource, so findElement(By.*) doesn't work on it - I've also tried By.xpath("/html/body/ul/li[2]/notification-bar/ul/li/section[1]/section[2]/button")-. All the related code I'm getting in View Page Sources is:
<!-- Agreement form modal -->
<ui-modal
ui-modal-id="ui.modals.agreementFormModal"
ui-modal-class="takeover agreement"
ui-modal-controller="AgreementFormController"
ui-modal-template-url="paths.templates + '/components/forms/tpl.agreement-form.html'"
ui-modal-has-dimmer="true">
</ui-modal>
Is there any way I can select these kinds of elements?
You should be able to bind to ng-click="onClickReviewAgreement()" using css. It should be unique and css is a better and more efficient alternative to xpath
Try using css to find the element and click thereafter -
WebElement buttonElement = driver.findElement(By.cssSelector('[ng-click="onClickReviewAgreement()"]'));
buttonElement.click();
I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.
That is, I want to have a button like
but I want to have my code like
if (request.getParameter(cmd).equals("add tag"))
tags.addTag( /*...*/ );
Is this possible? If so, how?
It's possible using the button element.
<button name="name" value="value" type="submit">Sök</button>
From the W3C page on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.
Following the #greg0ire suggestion in comments:
<input type="submit" name="add_tag" value="Lägg till tag" />
In your server side, you'll do something like:
if (request.getParameter("add_tag") != null)
tags.addTag( /*...*/ );
(Since I don't know that language (java?), there may be syntax errors.)
I would prefer the <button> solution, but it doesn't work as expected on IE < 9.
There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.
I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.
If you handle "adding tag" via JScript:
<form ...>
<button onclick="...">any text you want</button>
</form>
Or above if handle via page reload