I have the following code, and hate having to indent code to the same line when I just want it to stay as it is?
What I have to indent it to:
.content.first
Thank you for taking our Survey, hope you had fun!!!
<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup" style="text-align:center">
<form onsubmit="_kmq.push(['record', 'sign up for our newsletter'])" action="http://socialcrunch.us5.list-manage.com/subscribe/post?u=755f44e55d468b9568a7ec9de&id=7f27e118c4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
%label{:style=>"text-align:center"}
%br
Like spandex wearing gym freaks, SocialCrunch is in training.
%br
%br
You have been one of the first people to take part in a test which will form the basis of our website.
%br
%br
Input your email below to learn more about SocialCrunch and our launch later this summer!
%br
%br
Thank you for taking part, we hope you had fun.
<input style="margin-left: 21%;text-align:center" type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<div class="clear"><input style="margin-left:33%" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
Can I run it through some filter that will ignore my indentation and wont complain?
HAML syntax is indentation sensitive and there is no 'filter' which will ignore your indentation. HAML uses indentation to convert your code properly to respective HTML code blocks.
If you are tired of manually indenting your haml code and are using emacs as your editor then you can follow the instructions here
http://emacswiki.org/emacs/HamlMode
and permanently solve your problem
Related
As far as I know, BEM does not use elements id at all. But how to deal in this case with the label for/id combined with inputs? If I do not use id, people who're using screen readers will not get that this label is for that input. Am I right?
BEM suggests avoiding id for css selectors. It's perfectly valid to use id for A11y and usability.
<form class="form" method="post" action="">
<label for="email" class="form__label">Email</label>
<input type="email" id="email" class="form__control"/>
</form>
In the example above we are styling the input as an Element of the form block with the form__control class.
Also you can not use aria attributes without id for pointers to descriptive elements.
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
...
</div>
</div>
Example taken from: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
hi my url is something like this abc.domain.com/add/firstname/phone/email which is api link. i want to change parameters first name,phone,email when user enters in form. please let me know if anyone can help. thanks in advance.
add/?Client+Name=&Phone+number=&Email+ID=&Partner+ID=AUOVML i dont want url in this format. format must be as i mentioned in first line. i have done something like this:
<form method="get" action="http://abc.domain.com/add/">
<div class="d-nt-signup">
<div class="d-nt-field-wrap">
<input type="text" label="Name*" id="first_name" name="Client Name" active-color='#FB165B' class="d-nt-login-filed">
</div>
<div class="d-nt-field-wrap">
<input type="text" label="Mobile*" id="mobile" name="Phone number" active-color='#FB165B' class="d-nt-login-filed">
</div>
<div class="d-nt-field-wrap">
<input type="email" label="Email*" id="email ID" name="Email ID" active-color='#FB165B' class="d-nt-login-filed">
</div>
<div class="d-nt-field-wrap">
<input type="hidden" name="Partner ID" value="AUOVML">
</div>
When you do a get request with a form you will get the names and values of the form inputs added to the URL like that.
You can get around that by using a post request instead. Change method="get" to be method="post".
Developers will often handle the result of the form being sent with PHP. Change the action to point to a PHP file, and then in the PHP file you can access the form data through the $_post array like so $_POST["form_input_name"].
See http://php.net/manual/en/tutorial.forms.php for an example of echoing back data typed into a form.
I'm having trouble getting Cucumber to "choose" a radio button and hoping someone can give me a sanity check. Without quoting a huge mass of HTML junk, here's the relevant portion (which I collected from print.html). It's within a modal div that is activated by a button. I can "click" that button and see the modal window appear (I'm running it as a #javascript scenario in Selenium).
<div class="modal-body pagination-centered">
<img src="/assets/payment.png" alt="Payment" />
<form novalidate="novalidate" method="post" id="edit_cart_1" class="simple_form edit_cart" action="/carts/complete" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8" />
<input type="hidden" value="put" name="_method" />
</div>
<div class="control-group hidden cart_property_id">
<div class="controls">
<input type="hidden" name="cart[property_id]" id="cart_property_id" class="hidden" />
</div>
</div>
<div id="payment_fat_buttons" class="fat-buttons">
<div class="vertical-button-wrapper">
<input type="radio" value="cash" name="cart[payment_type]" id="cart_payment_type_cash_pay" data-property-id="1" />
<label for="cart_payment_type_cash_pay">Cash</label>
</div>
<div class="vertical-button-wrapper">
<input type="radio" value="credit" name="cart[payment_type]" id="cart_payment_type_credit_pay" data-property-id="1" />
<label for="cart_payment_type_credit_pay">Credit</label>
</div>
</div>
<div style="display: none;" id="cart_room_number_area_pay">
<div class="control-group string optional cart_room_number">
<label for="cart_room_number_pay" class="string optional control-label">Room number</label>
<div class="controls">
<input type="text" value="" size="50" name="cart[room_number]" id="cart_room_number_pay" class="string optional" />
</div>
</div>
</div>
<input type="checkbox" value="1" style="display: none;" name="receipt" id="receipt" />
<div class="sell-modal-footer">
<input type="submit" value="Complete With Receipt" name="commit" id="cart_complete_with_receipt" data_disable_with="Processing..." class="btn btn-danger" />
<input type="submit" value="Complete Sale" name="commit" data_disable_with="Processing..." class="btn btn-danger" />
</div>
</form>
</div>
I've tried as many different equivalent ways of getting at it that I can think of. Most obviously just by the label, or the ID, like:
choose 'cart_payment_type_cash_pay'
choose 'Cash'
which just gives me the error:
Unable to find radio button "cart_payment_type_cash_pay" (Capybara::ElementNotFound)
I thought it might have something to do with the modal dialog, visibility, etc. but I introduced the ID #payment_fat_buttons just for testing, and when I look for it like this:
find('#payment_fat_buttons').choose('Cash')
it finds that DIV OK, but still not the radio button. I also tried getting at it with :xpath on the whole page, and within a scope like:
within(:xpath, "//div[#id='payment_methods']") do
find(:xpath, ".//input[#id='cart_payment_type_cash_pay']").choose
end
which acts like it can also find the outer DIV, but not the radio button - I get the error:
Unable to find xpath ".//input[#id='cart_payment_type_cash_pay']" (Capybara::ElementNotFound)
Generally, it seems like I can find any arbitrary element around the radio buttons with :xpath or CSS expressions, just not the radio buttons. I can also push the submit buttons on the form without any problem. I tried dropping the data attributes as a test - no difference. Any help would be greatly appreciated. This is driving me nuts because it seems so simple, and yet I'm getting nowhere. I need to choose that for a big segment of Scenarios, so if I can't figure it out, I'll have to resort to something hokey and horrible. Many thanks in advance...
Relevant versions from Gemfile.lock:
rails (3.2.13)
cucumber (1.3.8)
gherkin (2.12.2)
cucumber-rails (1.4.0)
capybara (2.1.0)
selenium-webdriver (2.35.1)
I finally figured this one out. Capybara wasn't finding the radio button because buried deep in my styles was some CSS that hid it in order to change the appearance. Once I realized that, I figured out that I could side-step the whole issue of finding the radio button by just doing a click on the label instead:
find(:xpath, "//label[#for='the_radio_button_id']").click
I didn't realize it was possible to get at radio buttons that way - but in any case, it solves the issue of how to click a radio button that Capybara won't find due to styling or other issues. Hope that helps someone else.
I am trying to use haml in a partial, I wrote:
%p.nested-check-fields
= f.input :is_correct
= link_to_remove_fields "remove choice", f
but, in the resulted HTML, I get
<p class="nested-check-fields"> </p>
<div class="input boolean optional">
<input type="hidden" value="0" name="quiz[quiz_choices_attributes][1320389712363][is_correct]">
<input id="quiz_quiz_choices_attributes_1320389712363_is_correct" class="boolean optional" type="checkbox" value="1" name="quiz[quiz_choices_attributes][1320389712363][is_correct]">
<label class="boolean optional" for="quiz_quiz_choices_attributes_1320389712363_is_correct"> Is correct</label>
</div>
The question is, why the <p class="nested-check-fields"> </p> is empty ?? I was expecting to wrap the div inside it, what's wrong ??
Haml is very strict about indentation (from the documentation):
Haml’s indentation can be made up of one or more tabs or spaces.
However, indentation must be consistent within a given document. Hard
tabs and spaces can’t be mixed, and the same number of tabs or spaces
must be used throughout.
It sounds like you can actually use 4 spaces instead of 2, but that means you have to use 4 spaces everywhere (you can't mix it). I'd recommend just sticking with 2-space indentation, as that's the most common.
I have some code below:
<div class="product-page-wrapper">
<div class="product-page-img">
<img alt="" width="137" height="125" src="/Portals/6/aggProd.png" />
</div>
<div class="product-page-title">**D-077**</div>
<div class="product-page-desc">
<br />
<br />
<br />
</div>
<div class="product-page-sep">
<img alt="" width="732" height="1" src="/Portals/6/spec-sep.png" />
</div>
</div>
<div class="product-page-spec-title">
Specifications
</div>
<div class="product-page-spec-desc">
<br />
Type -
<span style="color: #1296d3;">
**D-077**
</span>
<br />
<br />
Weight lbs. (kg) - <br />
<br />
Dimensions (mm) -<br />
<span style="color: #1296d3;">
L - **207** W - **175** H - **175**
</span>
</div>
<div class="product-page-spec-button">
<a target="_blank">
<img alt="" width="215" height="64" src="/Portals/6/spec-button.png" />
</a>
</div>
At the moment i am only changing the Product Page Title, Type, Dimemsion values. I have a massive spread sheet with these values and wanted to know if i could input these values into my code automatically.
This would save me alot of time.
what would be the best way?
I am using DNN 5.6.2
Even if i could reproduce the code i could then paste it into my CMS editor.
There are a lot of ways to do this, depending on the tools at your disposal.
One way is to create an ASP.NET page with a repeater in it, and use the OLE DB driver for Excel to use the spreadsheet as a datasource. You can see this question for more details as to how to do it. You could even build such a control into a DotNetNuke module if you want to, then you could have the content update to match the spreadsheet dynamically if the spreadsheet ever changes.
Another approach you could use if you really just want to copy-and-paste the values from the spreadsheet into the CMS, is to use Excel to generate the code. For example, if you're using columns A-E in Excel, you could put a formula like the following in column F:
=CONCATENATE("<div class=""product-page-wrapper""><div class=""product-page-img""><img alt="""" width=""137"" height=""125"" src=""/Portals/6/aggProd.png"" /></div><div class=""product-page-title"">",A2,"</div>", "...etc...")
(This is just an example. You'd have to flesh out the rest of the code, and you might have to use multiple columns to get past string length limitations in Excel)
Then you could paste that formula into every row, and then copy the resulting values from Excel into the CMS text field. This is really a bootleg way of doing things, and writing a DNN module is definitely more ideal, but using Excel functions to generate the code is an option if this is one of those "I need it in 5 minutes and then I'm never going to use it again" situations.