I heard, but cannot find any document to double check, that this technique helps reduce the computer processes with specificity of CSS, when the browser has to calculate which class to apply when a tag has IDs or Classes in the document.
This is an extract from Google Material Design Lite, which uses the technique such:
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
You will notice the class
mdl-button
This one is used as an ID basically. While
mdl-button--colored
is the ID mentioned above, with the class
colored
So, practically this is the same to:
#mdl-button.colored
With the difference that the computer wont have to process the specificity with the ID and Class, because now we only have a unique class.
So again.. the question is "how is this technique called" or if there is no name, maybe can someone post a link to documents that explain deeply the concept?
Cheers guys!
You might want to check out the Block Element Modifier methodology for CSS. The idea behind it helps you achieve reusable components and code sharing in the front-end.
Check out this link for more information:
http://getbem.com/introduction/
descendant, child or adjacent, and overly qualified selectors
Which are what Google says not to use.
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?
I'm using html5, JQuery Mobile and KnockoutJS, I Have a foreach template that renders a grid like GUI from an observable array.
However, when I add items to the bound array, the styles are not applied to any new items.
They appear unstyled, most of the times.
some times they appear with style, but once the styling fails, it stays broken for as long as I run my app.
Does anyone have any idea how to resolve this problem?
Snippet:
<div id="timeEntryList" data-bind="foreach: timeEntries">
<div data-role="header" data-theme="c">
<h1>some header</h1>
The odd thing is that it works sometimes.
Hard to guess without any code. But I guess you 're saying jqm doesn't render properly after dynamically adding elements. That's right it doesn't. I guess it's like the list. And you probably can do something like $('#mylist').listview('refresh'); but I don't know what sort of component you're talking about.
you can find more info in the documentation
jQM might not support more than one data-role="header" section. I would try conforming to their standard page layout with one header, one content and one footer section and see if that helps.
I've found that if I update my KO observables in pagebeforeshow I don't have to use .listview('refresh')
I'm using jQuery Mobile (jQM) and Knockout.js (ko) to develop an application. In this application, I need to generate a variable number of buttons that are defined by a constantly updating web service.
So, in my markup, I have:
<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
<button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>
buttonLabels is a list of short strings returned from the web service. It's defined as:
self.buttonLabels = ko.observableArray();
This all works fine when the buttons are not "jQM styled". However, when I style them using:
$("#answerPage-buttons").trigger("create");
problems arise during the update.
The issue seems to be that jQM wraps the buttons in a div (with a sibling span) to make them all nice and mobile looking. However, when the ko applies the updates via the bindings, it only removes the tags, leaving the surrounding stuff, and adds new button tags - which are then also styled by the jQM trigger call.
So, I end up with an ever-growing list of buttons - with only the last set being operational (as the previous ones are gutted by the removal of their button element, but all the styling remains).
I've managed to address this, I think, by placing the following call immediately after the observable is updated:
$("#answerPage-buttons div.ui-btn").remove();
However, my feeling is that there's probably a better approach. Is there?
I found a solution.
If I surround the buttons with a div, it seems to work - e.g.
<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
<div>
<button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>
</div>
I'm guessing this is because the markup added by jQM remains "inside" the markup replicated by ko. Without the div, jQM wraps the button tag, which was the immediate child of the tag that contains the ko foreach binding.
I started using a diagnostic css stylesheet, e.g.
http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/
One of the suggested rules highlights input tags with the type submit, with the recommendation to use <button> as a more semantic solution. What are the advantages or disadvantages of <button> with type submit (such as with browser compatibility) that you have run across?
Just to be clear, I understand the spec of <button>, it has a defined start and end, it can contain various elements, whereas input is a singlet and can't contain stuff. What I want to know essentially is whether it's broken or not. I'd like to know how usable button is at the current time. The first answer below does seem to imply that it is broken for uses except outside of forms, unfortunately.
Edit for 2015
The landscape has changed! I have 6 more years experience of dealing with button now, and browsers have somewhat moved on from IE6 and IE7. So I'll add an answer that details what I found out and what I suggest.
When using <button> always specify the type, since browsers default to different types.
This will work consistently across all browser:
<button type="submit">...</button>
<button type="button">...</button>
This way you gain all of <button>'s goodness, no downsides.
Answering from an ASP.NET perspective.
I was excited when I found this question and some code for a ModernButton control, which, in the end, is a <button> control.
So I started adding all sorts of these buttons, decorated with <img /> tags inside of them to make them stand out. And it all worked great... in Firefox, and Chrome.
Then I tried IE6 and got the "a potentially dangerous Request.Form value was detected", because IE6 submits the html inside of the button, which, in my case, has html tags in it. I don't want to disable the validateRequest flag, because I like this added bit of data validation.
So then I wrote some javascript to disable that button before the submit occurred. Worked great in a test page, with one button, but when I tried it out on a real page, that had other <button> tags, it blew up again. Because IE6 submits ALL of the buttons' html. So now I have all sorts of code to disable buttons before submit.
Same problems with IE7. IE8 thankfully has this fixed.
Yikes. I'd recommend not going down this road IF you are using ASP.NET.
Update:
I found a library out there that looks promising to fix this.
If you use the ie8.js script from this library: http://code.google.com/p/ie7-js/
It might work out just fine. The IE8.js brings IE5-7 up to speed with IE8 with the button tag. It makes the submitted value the real value and only one button gets submitted.
Everything you need to know: W3Schools <button> Tag
The tag is supported in all major browsers.
Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
Pros:
The display label does not have to be the same as the submitted value. Great for i18n and "Delete this row"
You can include markup such as <em> and <img>
Cons:
Some versions of MSIE default to type="button" instead of type="submit" so you have to be explicit
Some versions of MSIE will treat all <button>s as successful so you can't tell which one was clicked in a multi-submit button form
Some versions of MSIE will submit the display text instead of the real value
From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button:
IE7 has a bug where when submitting a form with Click me, the POST data sent will result in myButton=Click me instead of myButton=foo.
IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.
This bug has been fixed in IE8.
An important quirk to be aware of: In a form that contains a <button/> element, IE6 and IE7 will not submit the form when the <button/> element is clicked. Other browsers, on the other hand, will submit the form.
In contrast, no browsers will submit the form when <input type="button"/> or <button type="button"/> elements are clicked. And naturally, all browsers will submit the form when <input type="submit"/> or <button type="submit"/> elements are clicked.
As #orip's answer says, to get consistent submit behavior across browsers, always use <button type="button" /> or <button type="submit" /> inside a <form/> element. Never leave out the type attribute.
I've had some experience with the quirks of <button> now, 6 years later, so here are my suggestions:
If you're still supporting IE6 or IE7, be very careful with button, the behavior is very buggy with those browsers, in some cases submitting the innerHtml instead of value='whatever' and all button values instead of just one and wonky behavior like that. So test thoroughly or avoid for those browser's sake.
Otherwise: If you're still supporting IE8, <a href='http://example.com'><button></button></a> doesn't work well, and probably anything else where you nest a button inside a clickable element. So watch out for that.
Otherwise: If you're using a <button> mainly as an element to click for your javascript, and it's outside of a form, make it <button type='button'> and you'll probably be just fine!
Otherwise: If you're using <button> in a form, be wary that the default type of <button> is actually <button type='submit'> in (most) cases, so be explicit with your type and your value, like: <button type='submit' value='1'>Search</button>.
Note that: Using a button-mimic class, like Bootstrap's .btn allows you to just make things like <div> or <a> or even <button> look exactly the way you want it to, and in the case of <a> have a more useful fallback behavior. Not a bad option.
TLDR; Ok to use if you don't care about ancient browsers, but Bootstrap provides even more robust css visually similar alternatives worth looking into.
Is it broken or not:
As usual, the answer is "it works fine in all major browsers, but has the following quirks in IE." I don't think it will be a problem for you though.
The <button> tag is supported by all the major browsers. The only support problem lies in what Internet Explorer will submit upon pressing a button.
The major browsers will submit the content of the value attribute. Internet exploter will submit the text between the <button> and </button> tags, while also submitting the value of every other one in the form, instead just the one you clicked.
For your purposes, just cleaning up old HTML, this shouldn't be a problem.
Sources:
http://www.peterbe.com/plog/button-tag-in-IE
http://www.w3schools.com/tags/default.asp
Here's a site that explains the differences:
http://www.javascriptkit.com/howto/button.shtml
Basically, the input tag allows just text (although you can use a background image) while the button allows you to add images, tables, divs and whatever else. Also, it doesn't require it to be nested within a form tag.
You might also run into these problems:
jQuery cannot target the button (not jQuery's fault, though): <button> in IE7
Multiple request variables if there are >1 <button>s: http://www.peterbe.com/plog/button-tag-in-IE
Another thing is related to styling it using the sliding-door technique: you need to insert another tag e.g. <span> to make it work.
as far as I am concerned the difference between submit and button tags is this:
gives you the option to have different text displayed than the element's value
Let's say you have a list of products then next to each product you want a button to add it to the customer's cart:
product1 : <add to cart>
product2 : <add to cart>
product3 : <add to cart>
then you could do this:
<button name="buy" type="submit" value="product2"> add to cart </button>
Now the problem is that IE will send the form with value="add to cart" instead of value="product2"
The easiest way to workaroound this issue is by adding onclick="this.value='product2'"
So this:
<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>
will do the trick on all major browsers - I have actually used this on a form with multiple buttons and works with Chrome Firefox and IE
Looks like the main reason to use <button> is to allow for CSS markup of that button and the ability to style the button with images: (see here: http://www.javascriptkit.com/howto/button.shtml)
However, I think the more adopted approach I've seen in (X)HTML + CSS is to use a div and style it completely with images and :hover pseudo-classes (simulating button downpress... can't add more than one link per answer, so just google "div button" you'll see lots of examples of this), and using javascript to do form submission or AJAX call... this also makes even more sense if you don't use HTML forms, and do all submissions with AJAX.