10 comments

So I purcheed this template a week ago working with PHP Laravel 5.4 framework.
I got to addapt the template to my dev-language on the page "checkout2.html" -> where you get a radio button form to fill out:

<input type="radio" name="shippping" id="option3" class="radio-template">

the problem is as so:
In order to submit information to the server I MUST deliver the attribute(name="foo") with a different value for each selected button BUT if you try to change >> name="shippping" << to a different value the CSS / SASS has malfunctions.
the selected buttons are kept in a checked mode and there's no possibility to either change or remove selections
Hi,

I re-read your question and I saw the issue.

Your problem is that you have to name all the radio inputs with the same name (i.e. name="shipping") and assign only different values to them. This is a standard and correct approach for radio lists in HTML. This way the browser knows all these belong to the same selection and therefore allow only one selected possibility.

Best.

Ondrej
Hi,

thanks for buying.

Can you paste your code that you have inside .tab-block? Either here or even better on the Codepen.

Thanks,

Ondrej
<!-- .tab-block AS Laravel 5.4 -->
<div id="delivery-method" class="tab-block">
<form action="{{ url('order/delivery') }}" method="POST" class="shipping-form">
{{ csrf_field() }}
<div class="row">
<div class="form-group col-md-6">
<input type="radio" name="shippping" id="option1" value="shipping" class="radio-template">
<label for="option1">
<strong>Usps next day</strong><br>
<span class="label-description">Get it right on next day - fastest option possible.</span>
</label>
</div>
</div>
<div class="CTAs d-flex justify-content-between flex-column flex-lg-row">
<a href="{{ url('order/address') }}" class="btn btn-template-outlined wide prev">
<i class="fa fa-angle-left"></i>Back to Address
</a>
<input class="btn btn-template wide next" type="submit" id="submit" name="submit" value="Choose delivery method ❯">
</div>
</form>
</div>
<!-- /.tab-block AS Laravel 5.4 -->
Hi,

thanks. From the content I can see here, the code is the same as in the template and should be working HTML and CSS-wise and there should not be any display issues.

To be able to help further, please provide an online demonstration (you can send me a private message here on WB or my email is in the template's documentation).

Thanks,

Ondrej
allberg PURCHASED
Hi!

I bought this layout some time ago and I'm now implementing it in a react application. Since not all tags are closed I'm getting compilation errors from react which are easy to fix but still annoying.

It would be a good thing for the next release if you could make sure all tags are closed, for example img.

/John
Hi John,

thank you for buying. Sorry to hear about your troubles, though.

Do you mean <img> vs <img />, <link> vs <link /> and similar? If so, these are void elements in HTML and do not need closing/ self-closing and the document validates perfectly. If you mean something a bit different, please let me know.

Best,

Ondrej
allberg PURCHASED
Hi Ondrej!

Yes, I mean <img> versus <img /> and you're totally right, <img> works nicely in pure HTML.

However, when putting them in a JSX file to be handled by reactjs (a javascript framework by Facebook and Instagram) it requires the tags to be closed.

I'm not saying that your html is wrong, but it would be helpful if in the next release the tags would be closed, to be more "react-compatible" so to speak.

Best regards,

John
Hi John,

thanks for your reply, I see.

Unfortunately, I can't help you with this as this is an HTML template, so I need to stick with the HTML specs.

Quoting from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img - "<img> must have a start tag and must not have an end tag".

Sorry, I could not help more.

Best,

Ondrej
allberg PURCHASED
You're totally right, a img tag may never have an end tag since the img is a void element or empty element. But I'm not talking about the end tag ("</img>"), I'm talking about the optional slash at the end of the start tag:

http://w3c.github.io/html-reference/syntax.html#void-element
"5. Optionally, a "/" character, which may be present only if the element is a void element."

But I'm not going to nag you about this, it was just a friendly request. I think it's a really good template, so keep up the good work!

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase

$16
66Purchases

Licenses: Details »

Single application $16
Version:1.3.0
Type:
  • HTML Template
Bootstrap: Compatible with 4.x
Layouts:
  • Responsive
Browsers:
  • IE 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Categories:
Tags: bootstrap 4, cart, commerce, ecommerce, modern, order, shop
Item#:WB04C422K
Released:5 months ago
Updated:3 weeks ago
Sold exclusively on WrapBootstrap
ondrique

ondrique

Signed up 3 years ago

Need an admin theme?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 9/10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running: