Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

FormDecorator in Q3 2013 SP2 doesn't skip labels

12 Answers 101 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Massimiliano
Top achievements
Rank 1
Massimiliano asked on 12 Feb 2014, 11:44 AM
It seems that the last release ignore the "Label" inside the ControlToSkip property of the decorator.
Everything was working fine in previous release but now with 

<telerik:RadFormDecorator ID="RadFormDecorator1" ClientIDMode="Static" runat="server" EnableRoundedCorners="true" DecoratedControls="All" ControlsToSkip="H4H5H6, Buttons, Label" />

My <label> elements alla have those class applied

@media screen and (-webkit-min-device-pixel-ratio: 0)
.RadForm.rfdRadio label, .RadForm.rfdCheckbox label { .... }



12 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 13 Feb 2014, 09:04 AM
Hi,

Thanks for contacting Telerik Support. I have tested your scenario with the latest official release - Q3 2013 SP2 and the issue does not exist.

Look at the video with my test. I would recommend to update to the latest release.

Regards,
Bozhidar
Telerik
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Massimiliano
Top achievements
Rank 1
answered on 13 Feb 2014, 11:39 AM
Thank you Bozhidar,
it seems working on your side... maybe this is tied to checkboxes and radio? It seems the class it adds are .RadForm.rfdRadio label, .RadForm.rfdCheckbox label 
I'm testing with version 2013.3.1324. With previous version this issue didn't happen, so or those classes were not add or maybe the classes were added the same but now they add "display: inline" to labels. It's this that scrambles my layout... maybe this is a change from previous release?


0
Massimiliano
Top achievements
Rank 1
answered on 13 Feb 2014, 11:57 AM
As a side note (since I didn't understand what checkbox and radio had to do with my labels) is the <html> element that has "RadForm RadForm_Default rfdScrollBars rfdZone rfdTextbox rfdTextarea rfdFieldset rfdRadio rfdCheckbox rfdGrids" class applied.
0
Bozhidar
Telerik team
answered on 13 Feb 2014, 03:02 PM
Hello,

I'll check again a different scenario using different skins. If we found some imprefections we will do our best to fix it for the upcoming release or at least for the Q1 2013 Service Pack 1.

Regards,
Bozhidar
Telerik
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Massimiliano
Top achievements
Rank 1
answered on 13 Feb 2014, 03:53 PM
Thank you boss. So far I'm testing with Default skin and as I said just changing the dll version scrambled things with the labels (the most evident being the inline syle applied to display were I have block for those labels)
0
Bozhidar
Telerik team
answered on 17 Feb 2014, 07:33 AM
Hello,

The reason the label in chrome is related with checkbox is the special styling for webkit browsers where checkboxes and radios could be styled with CSS (you could set background image to the element) ans especially for that case the applied styling was: RadForm.rfdCheckbox label, now it will be changed to: RadForm.rfdCheckbox.rfdLabel label - so it if you set label in the controls to skip proerty, the style will not be applied. Other than that we will test all possible configurations to ensure that when you try to skip the decoration it will be skipped.

It works in previous versions, most probably because we still develop the LightWeight FormDecorator so some things probably worked by accident.

Regards,
Bozhidar
Telerik
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Massimiliano
Top achievements
Rank 1
answered on 17 Feb 2014, 11:26 AM
Hallo Bozhidar,
thank you for your time and patience. I understand. 
Anyway I'm attaching here some screenshots of google developer tools inspector to show you what happens now.
In my master page I have 
<telerik:RadFormDecorator ID="RadFormDecorator1" ClientIDMode="Static" runat="server" EnableRoundedCorners="true" DecoratedControls="All" ControlsToSkip="H4H5H6, Buttons, Label" />

Screenshot here

0
Bozhidar
Telerik team
answered on 17 Feb 2014, 02:03 PM
rfd-light-label.gif
Hi,

Unfortunately I can not open the image as the url is blocked by the Iron Port. Could you attach the image in the message?

Actually we are working to fix the issue and I believe it will be included in the Q1 2014 release. Attached is an image showing the styles applied to the label element: no font styles, no text color styles as you could see. When I see your image I will try to test with your code also.

This is my test code:

<asp:ScriptManager runat="server" ID="rskm1">
    </asp:ScriptManager>
    <telerik:RadSkinManager runat="server" ShowChooser="true">
    </telerik:RadSkinManager>
    <br />
    <br />
    <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="All" RenderMode="Classic"
        ControlsToSkip="H4H5H6, Label"></telerik:RadFormDecorator>
    <label>
        This is Label</label>
        <br /><br />
    <asp:CheckBox runat="server" Text="Check" />
    <br /><br />
    <asp:RadioButton runat="server" Text="Radio" />
    <br /><br />
    <asp:Button runat="server" Text="Button" />
    <br /><br />
    <asp:TextBox runat="server" Text="Text Box"></asp:TextBox>
    <br /><br />
    <fieldset>Fieldset</fieldset>
    <br /><br />
    <select>
        <option>Select</option>
    </select>
    <br /><br />
    <h4>This is H4</h4>
    <h5>This is H5</h5>
    <h6>This is H6</h6>

And the generated CSS code for the BlackMetroTouch skin (as it is generated, that's why it is not well formatted):

.RadForm_BlackMetroTouch {
  background-color: black;
  /* Remove rounded corners */
  /* Change font size */
  /* button styles */
  /* Checkbox and radiobutton */
  /* Webkit provides full support for checkbox and radiobutton */
  /* DropDown Styles */
  /* Skin-specific Scrollbar Settings for WebKit  */
  /* the scrollbar face color */
  /* IE Scrollbars */
  /*GridView, FormView, DetailsView*/
  /* Validation Summary Control and Login Control  */ }
  .RadForm_BlackMetroTouch.RadForm.rfdRoundedCorners .rfdTextInput, .RadForm_BlackMetroTouch.RadForm.rfdRoundedCorners textarea, .RadForm_BlackMetroTouch.RadForm.rfdRoundedCorners fieldset, .RadForm_BlackMetroTouch.RadForm.rfdRoundedCorners .rfdSkinnedButton, .RadForm_BlackMetroTouch.RadForm.rfdRoundedCorners .rfdSelectBox, .RadForm_BlackMetroTouch.RadForm.rfdRoundedCorners .rfdSelectBox ul, .RadForm_BlackMetroTouch.RadForm.rfdRoundedCorners .rfdSelect, .RadForm_BlackMetroTouch.RadForm.rfdRoundedCorners .rfdSelectBox li:first-child, .RadForm_BlackMetroTouch.RadForm.rfdRoundedCorners legend, .RadForm_BlackMetroTouch.RadForm.rfdRoundedCorners .rfdSelectBoxDropDown {
    border-radius: 0; }
  .RadForm_BlackMetroTouch.RadForm .rfdSkinnedButton, .RadForm_BlackMetroTouch.RadForm .rfdTextInput, .RadForm_BlackMetroTouch.RadForm.rfdLabel label, .RadForm_BlackMetroTouch.RadForm.rfdLabel .rfdAspLabel, .RadForm_BlackMetroTouch.RadForm.rfdTextbox input, .RadForm_BlackMetroTouch.RadForm.rfdTextarea textarea, .RadForm_BlackMetroTouch.RadForm.rfdFieldset fieldset, .RadForm_BlackMetroTouch.RadForm.rfdFieldset legend, .RadForm_BlackMetroTouch.RadForm .rfdSelect, .RadForm_BlackMetroTouch.RadForm.rfdHeading h4, .RadForm_BlackMetroTouch.RadForm.rfdHeading h5, .RadForm_BlackMetroTouch.RadForm.rfdHeading h6, .RadForm_BlackMetroTouch.RadForm .riTextBox, .RadForm_BlackMetroTouch.RadForm .rfdValidationSummaryControl, .RadForm_BlackMetroTouch.RadForm .rfdLoginControl {
    font-size: 16px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: white; }
  .RadForm_BlackMetroTouch.RadForm.rfdHeading h4 {
    font-size: 18px; }
  .RadForm_BlackMetroTouch.RadForm h5 {
    font-size: 17px; }
  .RadForm_BlackMetroTouch.RadForm h6 {
    font-size: 16px; }
  .RadForm_BlackMetroTouch.rfdZone {
    background-color: black; }
  .RadForm_BlackMetroTouch.rfdHeading h4, .RadForm_BlackMetroTouch.rfdHeading h5, .RadForm_BlackMetroTouch.rfdHeading h6 {
    border-bottom-color: #4e4e4e; }
  .RadForm_BlackMetroTouch fieldset {
    border-color: #4e4e4e;
    background-color: black; }
  .RadForm_BlackMetroTouch legend {
    background-color: black; }
  .RadForm_BlackMetroTouch label {
    line-height: 32px; }
  .RadForm_BlackMetroTouch.rfdRadio input[type="radio"] + label, .RadForm_BlackMetroTouch.rfdCheckbox input[type="checkbox"] + label,
  .RadForm_BlackMetroTouch legend > label,
  .RadForm_BlackMetroTouch legend > label {
    line-height: normal; }
  .RadForm_BlackMetroTouch .rfdSkinnedButton {
    padding: 0.25em 0.625em 0.33333em 0.625em;
    background-color: #222222;
    border-color: #4e4e4e;
    color: white; }
  .RadForm_BlackMetroTouch .rfdSkinnedButton:hover {
    background-color: #25a0da;
    border-color: #25a0da;
    color: white; }
  .RadForm_BlackMetroTouch .rfdSkinnedButton:active,
  .RadForm_BlackMetroTouch .rfdClickedButton,
  .RadForm_BlackMetroTouch .rfdFocusedButton {
    background-color: #0082cc;
    border-color: #0082cc;
    color: white; }
  .RadForm_BlackMetroTouch .rfdSkinnedButton.rfdInputDisabled {
    background-color: black;
    border-color: #2c2c2c;
    color: #555555; }
  .RadForm_BlackMetroTouch .rfdTextInput {
    padding: 0.33333em 0.625em; }
  .RadForm_BlackMetroTouch .rfdTextInput,
  .RadForm_BlackMetroTouch textarea {
    background-color: black;
    color: white;
    border-color: #4e4e4e; }
  .RadForm_BlackMetroTouch .rfdTextInput:hover,
  .RadForm_BlackMetroTouch textarea:hover {
    background-color: black;
    color: white;
    border-color: #25a0da; }
  .RadForm_BlackMetroTouch .rfdTextInput:active,
  .RadForm_BlackMetroTouch textarea:active,
  .RadForm_BlackMetroTouch .rfdTextInput:focus,
  .RadForm_BlackMetroTouch textarea:focus {
    background-color: black;
    color: white;
    border-color: #2a2a2a; }
  .RadForm_BlackMetroTouch .rfdTextInput:disabled,
  .RadForm_BlackMetroTouch textarea:disabled {
    background-color: black;
    color: #555555;
    border-color: #2c2c2c; }
  .RadForm_BlackMetroTouch .rfdCheckboxChecked,
  .RadForm_BlackMetroTouch .rfdCheckboxUnchecked,
  .RadForm_BlackMetroTouch .rfdRadioChecked,
  .RadForm_BlackMetroTouch .rfdRadioUnchecked {
    line-height: normal; }
  .RadForm_BlackMetroTouch label.rfdCheckboxChecked .rfdToggleImage,
  .RadForm_BlackMetroTouch label.rfdCheckboxUnchecked .rfdToggleImage,
  .RadForm_BlackMetroTouch label.rfdRadioChecked .rfdToggleImage,
  .RadForm_BlackMetroTouch label.rfdRadioUnchecked .rfdToggleImage {
    background-image: url('<%=WebResource("Telerik.Web.UI.Skins.BlackMetroTouch.Common.radFormToggleSprite.png")%>');
    _background-image: url('<%=WebResource("Telerik.Web.UI.Skins.BlackMetroTouch.Common.radFormToggleSpriteIE6.png")%>');
    top: 4px; }
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .RadForm_BlackMetroTouch.rfdRadio input[type="radio"], .RadForm_BlackMetroTouch.rfdCheckbox input[type="checkbox"] {
      background-image: url('<%=WebResource("Telerik.Web.UI.Skins.BlackMetroTouch.Common.radFormToggleSprite.png")%>'); }
    .RadForm_BlackMetroTouch.rfdCheckbox input[type="checkbox"] {
      background-repeat: no-repeat;
      background-position: 0 3px; }
    .RadForm_BlackMetroTouch.rfdCheckbox input[type="checkbox"]:hover {
      background-position: -40px 3px; }
    .RadForm_BlackMetroTouch.rfdCheckbox input[type="checkbox"]:checked {
      background-position: 0 -37px; }
    .RadForm_BlackMetroTouch.rfdCheckbox input[type="checkbox"]:hover:checked {
      background-position: -40px -37px; }
    .RadForm_BlackMetroTouch.rfdCheckbox input[type="checkbox"][disabled], .RadForm_BlackMetroTouch.rfdCheckbox input[type="checkbox"][disabled]:hover {
      background-position: 0 -117px; }
    .RadForm_BlackMetroTouch.rfdCheckbox input[type="checkbox"][disabled]:checked, .RadForm_BlackMetroTouch.rfdCheckbox input[type="checkbox"][disabled]:checked:hover {
      background-position: 0 -157px; }
    .RadForm_BlackMetroTouch.rfdRadio input[type="radio"] {
      background-repeat: no-repeat;
      background-position: -80px 3px; }
    .RadForm_BlackMetroTouch.rfdRadio input[type="radio"]:hover {
      background-position: -120px 3px; }
    .RadForm_BlackMetroTouch.rfdRadio input[type="radio"]:checked {
      background-position: -80px -37px; }
    .RadForm_BlackMetroTouch.rfdRadio input[type="radio"]:hover:checked {
      background-position: -120px -37px; }
    .RadForm_BlackMetroTouch.rfdCheckbox input[type="radio"][disabled], .RadForm_BlackMetroTouch.rfdCheckbox input[type="radio"][disabled]:hover {
      background-position: -80px -117px; }
    .RadForm_BlackMetroTouch.rfdCheckbox input[type="radio"][disabled]:checked, .RadForm_BlackMetroTouch.rfdCheckbox input[type="radio"][disabled]:checked:hover {
      background-position: -80px -157px; } }
  .RadForm_BlackMetroTouch .rfdSelect_BlackMetroTouch {
    padding: 0.33333em 1.66667em 0.33333em 0.625em;
    background-color: #222222;
    border-color: #4e4e4e;
    color: white; }
  .RadForm_BlackMetroTouch .rfdSelect_BlackMetroTouch:hover {
    border-color: #25a0da;
    color: white; }
  .RadForm_BlackMetroTouch .rfdSelect_BlackMetroTouch:active,
  .RadForm_BlackMetroTouch .rfdSelect_BlackMetroTouch:focus {
    border-color: #0082cc;
    color: white; }
  .RadForm_BlackMetroTouch .rfdSelect_BlackMetroTouch.rfdSelectDisabled,
  .RadForm_BlackMetroTouch .rfdSelect_BlackMetroTouch.rfdSelectDisabled:hover,
  .RadForm_BlackMetroTouch .rfdSelect_BlackMetroTouch.rfdSelectDisabled:active,
  .RadForm_BlackMetroTouch .rfdSelect_BlackMetroTouch.rfdSelectDisabled:focus {
    background-color: black;
    border-color: #2c2c2c;
    color: #555555; }
  .RadForm_BlackMetroTouch .rfdDropDownArrow {
    width: 29px;
    height: 34px;
    background-image: url('<%=WebResource("Telerik.Web.UI.Skins.BlackMetroTouch.Common.radActionsSprite.png")%>');
    _background-image: url('<%=WebResource("Telerik.Web.UI.Skins.BlackMetroTouch.Common.radActionsSpriteIE6.png")%>');
    background-color: transparent;
    background-position: -10.5px -58px; }
  .RadForm_BlackMetroTouch .rfdSelect_BlackMetroTouch:hover .rfdDropDownArrow {
    background-color: #25a0da;
    background-position: -10.5px -58px; }
  .RadForm_BlackMetroTouch .rfdSelect_BlackMetroTouch:active .rfdDropDownArrow {
    background-color: #0082cc;
    background-position: -10.5px -58px; }
  .RadForm_BlackMetroTouch.rfdScrollBars {
    /* scrollbar track background color */
    /* increment / decrement button settings */ }
    .RadForm_BlackMetroTouch.rfdScrollBars body::-webkit-scrollbar,
    .RadForm_BlackMetroTouch.rfdScrollBars body::-webkit-scrollbar-thumb:vertical,
    .RadForm_BlackMetroTouch.rfdScrollBars body::-webkit-scrollbar-thumb:horizontal,
    .RadForm_BlackMetroTouch.rfdScrollBars div::-webkit-scrollbar,
    .RadForm_BlackMetroTouch.rfdScrollBars div::-webkit-scrollbar-thumb:vertical,
    .RadForm_BlackMetroTouch.rfdScrollBars div::-webkit-scrollbar-thumb:horizontal
    form::-webkit-scrollbar,
    .RadForm_BlackMetroTouch.rfdScrollBars form::-webkit-scrollbar-thumb:vertical,
    .RadForm_BlackMetroTouch.rfdScrollBars form::-webkit-scrollbar-thumb:horizontal {
      background-color: black; }
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-track-piece,
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-corner {
      background-color: black; }
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-button:vertical:decrement,
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-button:vertical:increment,
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-button:horizontal:decrement,
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-button:horizontal:increment,
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-thumb:vertical,
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-thumb:horizontal {
      border-color: #4e4e4e;
      background-color: black; }
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-button:vertical:decrement,
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-button:vertical:increment,
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-button:horizontal:decrement,
    .RadForm_BlackMetroTouch.rfdScrollBars ::-webkit-scrollbar-button:horizontal:increment {
      background-image: url('<%=WebResource("Telerik.Web.UI.Skins.BlackMetroTouch.Common.radActionsSprite.png")%>');
      _background-image: url('<%=WebResource("Telerik.Web.UI.Skins.BlackMetroTouch.Common.radActionsSpriteIE6.png")%>');
      background-color: black; }
  .RadForm_BlackMetroTouch.rfdScrollBars {
    scrollbar-3dlight-color: #1a1a1a;
    scrollbar-arrow-color: #111111;
    scrollbar-base-color: #f5f5f5;
    scrollbar-darkshadow-color: #474747;
    scrollbar-face-color: #393939;
    scrollbar-highlight-color: #474747;
    scrollbar-shadow-color: #1a1a1a;
    scrollbar-track-color: #272727; }
  .RadForm_BlackMetroTouch.rfdGrids .rfdTable {
    border: 1px solid #4e4e4e;
    background: black;
    color: white;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 16px; }
  .RadForm_BlackMetroTouch.rfdGrids .rfdTable th {
    border-bottom: 1px solid #4e4e4e;
    border-left: 1px solid #4e4e4e;
    background-color: #202020;
    color: white; }
  .RadForm_BlackMetroTouch.rfdGrids .rfdTable a {
    color: white; }
  .RadForm_BlackMetroTouch .rfdValidationSummaryControl,
  .RadForm_BlackMetroTouch .rfdLoginControl {
    background-color: black;
    border: 1px solid #4e4e4e; }
  .RadForm_BlackMetroTouch a.rfdLoginControl,
  .RadForm_BlackMetroTouch a.rfdLoginControl:active,
  .RadForm_BlackMetroTouch a.rfdLoginControl:visited {
    color: white; }
  .RadForm_BlackMetroTouch a.rfdLoginControl:hover {
    color: white; }
 
/* Listbox Styles */
/* Must be out of the SASS Box */
.rfdSelectBox_BlackMetroTouch {
  border-color: #4e4e4e;
  font-size: 16px; }
 
.rfdSelectBox_BlackMetroTouch li {
  padding: 0.29167em 0.625em;
  color: white;
  background-color: black; }
 
.rfdSelectBox_BlackMetroTouch li:hover,
.rfdSelectBox_BlackMetroTouch .rfdSelect_hovered,
.rfdSelectBox.rfdSelectBox_BlackMetroTouch li:hover {
  color: white;
  background-color: #25a0da; }
 
.rfdSelectBox_BlackMetroTouch .rfdSelect_selected,
.rfdSelectBox.rfdSelectBox_BlackMetroTouch .rfdSelect_selected:hover {
  color: white;
  background-color: #0082cc; }
 
.rfdSelectBox_BlackMetroTouch .rfdSelectBox_optgroup_label:hover {
  background: none;
  color: white; }


The text color was removed from the main wrapping element, and placed to each single element separately. You could also test with that CSS to check if it will cover your scenario.

p.s. Note that in the ASPX sample the RFD is set at classic mode: RenderMode="Classic" - but with LightWeight the result would be the same.

Regards,
Bozhidar
Telerik
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Massimiliano
Top achievements
Rank 1
answered on 17 Feb 2014, 04:11 PM
I see. In my situation is just formatting that get messed up, in particular display:inline (while I have "block"). 
Sorry about the image it was my fault the link was wrong I'm so ashamed :D I'm attaching it here.
Thanks again
0
Massimiliano
Top achievements
Rank 1
answered on 17 Feb 2014, 04:13 PM
decorator.jpg
I see... In my situation most of the issue is just caused by the display set to inline (while I have block) for the labels
The previous link was wrong my fault sorry!!! Here is the correct one:
http://www.hakkar.it/xmanightx/forums/decorator.jpg

(I tried to attach it here but I got an error page)
0
Bozhidar
Telerik team
answered on 18 Feb 2014, 08:22 AM
Hi,

The fix provided bellow will be add to the Q1 2014 release and I think it will work properly for you as you could see from he attached pics. The fix is in the LightWeight mode, but it will be also done for the Classic (which will be available most probably with Q1 2014 Service Pack 1).

I will advise you, to wait a little for the Q1 release and to update and check again if everything works fine.

Regards,
Bozhidar
Telerik
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Massimiliano
Top achievements
Rank 1
answered on 18 Feb 2014, 12:25 PM
Good to know about the fix! Thank you again
Tags
FormDecorator
Asked by
Massimiliano
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Massimiliano
Top achievements
Rank 1
Share this question
or