Label tag does not work with css attribute “width” on some browsers like Chrome and Mozilla.<\/p>\n
Simplest solution is : Label elements are in-line style elements, so technically Chrome and\u00a0Firefox\u00a0are interpreting the CSS properly by not obeying my width declaration. In-line elements do not accept width attributes<\/strong>. The workaround is to force the label element to become a block level element by floating it.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" CSS – label control ignores the width attribute in style<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26,17],"tags":[67],"class_list":["post-2541","post","type-post","status-publish","format-standard","hentry","category-web","category-tips","tag-css"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2753,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/complete-css-3-tutorial-transform-operations\/","url_meta":{"origin":2541,"position":0},"title":"Complete CSS 3 Tutorial – Transform Operations","author":"Jitendra","date":"March 5, 2012","format":false,"excerpt":"Complete CSS 3 Tutorial - Transform Operations - rotate, translate, scale, skew and matrix methods with Live Demo and source code","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"CSS 3 Tutorial Rotate","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Rotate.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Rotate.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/03\/CSS-3-Tutorial-Rotate.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":5639,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/twitter-like-button-as-salesforce-lightning-component-pure-css3-with-video\/","url_meta":{"origin":2541,"position":1},"title":"Twitter’s Like button as Salesforce Lightning Component- pure CSS3 with Video","author":"Jitendra","date":"August 3, 2016","format":false,"excerpt":"Building Lightning component checkbox to have Twitter's Heart like animation without any image or JavaScript.","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Twitter Heart Animation using pure CSS3","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Twitter-Animation-using-pure-CSS3.gif?fit=532%2C504&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Twitter-Animation-using-pure-CSS3.gif?fit=532%2C504&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/08\/Twitter-Animation-using-pure-CSS3.gif?fit=532%2C504&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":5135,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/override-default-loading-message-in-salesforce-lightning-using-template\/","url_meta":{"origin":2541,"position":2},"title":"Override default loading message in Salesforce lightning application using template","author":"Jitendra","date":"January 5, 2016","format":false,"excerpt":"While developing Lightning component, all of us might have been noticed that default user interface for loading component looks like below image. Most of us, for sure will want to customize this loading message to match their Salesforce implementation theme. We can use \"Lightning Template\" to override this message to\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Default loading screen in Salesforce lightning","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-lightning-default-loading-message-300x113.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2173,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-pure-css-based-menu-step-by-step-tutorial\/","url_meta":{"origin":2541,"position":3},"title":"Create Pure CSS based Menu – Step by Step Tutorial","author":"Jitendra","date":"May 23, 2011","format":false,"excerpt":"Tutorial on creating step by step pure CSS based Menu without any javaScript and Why CSS Hover property is not working in Internet explorer","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Pure CSS based menu","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/05\/Pure-CSS-based-menu.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5389,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/responsive-datagrid-component-in-lightning-basics\/","url_meta":{"origin":2541,"position":4},"title":"Responsive Datagrid component in Lightning – Basics","author":"Jitendra","date":"March 15, 2016","format":false,"excerpt":"This blog post explains simple use case of Nested Lightning Component. It goes through example on how to interact and combine nested components to be used in parent Lightning component.","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Using Nested Lightning component to create responsive DataGrid","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/03\/Lightning-Data-Grid-1.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/03\/Lightning-Data-Grid-1.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/03\/Lightning-Data-Grid-1.gif?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":6133,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/text-slider-lightning-component-for-salesforce-with-live-demo\/","url_meta":{"origin":2541,"position":5},"title":"Text Slider Lightning Component for Salesforce with Live Demo","author":"Jitendra","date":"June 5, 2017","format":false,"excerpt":"How to use Nested Components and create a simple yet powerful Text Slider Component in Lightning for Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Text Slider Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=2541"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2541\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=2541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=2541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=2541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nbefore applying css for width, make sure “float:left” is written for label control.<\/strong><\/p>\n