I am using the metro touch skin form my interface to get bigger touch menus, boxes and buttons - looks great.
In the ribbon editor interface, using metro touch messes up the html tab. The top text cannot be seen and the scroll bars are messed up. So I switched to the default skin for the editor while the rest of the interface stays in metro.
The question, how do I do this? My editor is lacking styles. The editor interface in the middle with a big gap at the top which I know from previous experience is a style problem. How can I make my editor use a default skin while in metro touch?
Another solution would be getting the HTML window in Metro Touch to work, huge bug there.
Help please,
George
In the ribbon editor interface, using metro touch messes up the html tab. The top text cannot be seen and the scroll bars are messed up. So I switched to the default skin for the editor while the rest of the interface stays in metro.
The question, how do I do this? My editor is lacking styles. The editor interface in the middle with a big gap at the top which I know from previous experience is a style problem. How can I make my editor use a default skin while in metro touch?
Another solution would be getting the HTML window in Metro Touch to work, huge bug there.
Help please,
George
4 Answers, 1 is accepted
0
George
Top achievements
Rank 2
Rank 2
answered on 17 Feb 2015, 10:39 PM
The middle gap problem result because the Editor use the body styles for some reason and I have am using Bootstrap which redefines the body to have padding at the top for the tool bar. I found the problem in this Post
I think it is a bug that the editor would use the padding from the body which means you can't put spacing on a body that has an editor in it and probably other Rad controls. There may be some technical reason but I think it is wrong. I am using Bootstrap because some Microsoft educational videos told me to. These controls are for the Visual Studio ASP.NET market where Microsoft is pushing us to use Bootstrap. That they are not compatible is wrong and should be consider a Telerik bug. Finding this explanation took quite a while.
My workaround to this Telerik problem that seems to work in a Master site environment with a toolbar:
Change the body to only do the bottom, for the footer and create a new class for a spacer
The problem with the Ribbon interface using Metro Touch skin is still a serious problem with the HTML page being unusable, so I switched to the default skin on the Editor as a work around, which seems to be working so far.
George
I think it is a bug that the editor would use the padding from the body which means you can't put spacing on a body that has an editor in it and probably other Rad controls. There may be some technical reason but I think it is wrong. I am using Bootstrap because some Microsoft educational videos told me to. These controls are for the Visual Studio ASP.NET market where Microsoft is pushing us to use Bootstrap. That they are not compatible is wrong and should be consider a Telerik bug. Finding this explanation took quite a while.
My workaround to this Telerik problem that seems to work in a Master site environment with a toolbar:
Change the body to only do the bottom, for the footer and create a new class for a spacer
/* Move down content because we have a fixed navbar that is 50px tall */body { padding-top: 50px; padding-bottom: 20px;} // changed this tobody { padding-bottom: 25px; // this does not seem to effect the editor} .HRTopPushDown { height:20px; visibility:hidden;}The space is an hr tag with class HRTopPushDown placed in each Site Master before where the content is defined or just after the body tag. </LoggedInTemplate> </asp:LoginView> </div> </div> </div><hr class="HRTopPushDown" /> // this is the added line to provide spacing from the top <div class="container body-content"> <asp:ContentPlaceHolder ID="MainContentMembers" runat="server"> </asp:ContentPlaceHolder> <hr /> </div>// or after the body works<body> <hr class="HRTopPushDown" />The problem with the Ribbon interface using Metro Touch skin is still a serious problem with the HTML page being unusable, so I switched to the default skin on the Editor as a work around, which seems to be working so far.
George
0
Accepted
Hi ,
The same matter has already been discussed in the ticket thread opened to us (#907688). Please refer to it for further details on the matter.
For anybody else interested on the matter:
Using the Bootstrap theme inserts styles into the page, which are expected to affect HTML elements rendered by the controls. In respect to that, there is no applicable approach to isolate the rendered HTML, so not to be styled by external CSS. As this elements are part of the page, CSS styles that affect globally to HTML element should be further designed and implement to not to select elements that are part of complex HTML widgets or ASP.NET controls..
On a side note, with the Q1 2015 version, will introduce a Bootstrap-inspired skin that will work as expected with the Bootstrap theme. You can test it with our Beta demos.
As for the linked forum thread, the discussed matter there is about the CSS rules added to the body of the content area. This is a behavior that is expected due to browser's native behavior. Any iframe inside an HTML page will include all CSS references from the head element of the parent page. One way to eliminate this is setting the ContentAreaMode to Div. With that, the content area will become div element not an iframe. Although, you should note that still will be styled from the page's CSS rules.
Regards,
Ianko
Telerik
The same matter has already been discussed in the ticket thread opened to us (#907688). Please refer to it for further details on the matter.
For anybody else interested on the matter:
Using the Bootstrap theme inserts styles into the page, which are expected to affect HTML elements rendered by the controls. In respect to that, there is no applicable approach to isolate the rendered HTML, so not to be styled by external CSS. As this elements are part of the page, CSS styles that affect globally to HTML element should be further designed and implement to not to select elements that are part of complex HTML widgets or ASP.NET controls..
On a side note, with the Q1 2015 version, will introduce a Bootstrap-inspired skin that will work as expected with the Bootstrap theme. You can test it with our Beta demos.
As for the linked forum thread, the discussed matter there is about the CSS rules added to the body of the content area. This is a behavior that is expected due to browser's native behavior. Any iframe inside an HTML page will include all CSS references from the head element of the parent page. One way to eliminate this is setting the ContentAreaMode to Div. With that, the content area will become div element not an iframe. Although, you should note that still will be styled from the page's CSS rules.
Regards,
Ianko
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
George
Top achievements
Rank 2
Rank 2
answered on 18 Feb 2015, 04:02 PM
I mostly posted because I had so much trouble finding what my problems was. Nice your have things posted but finding them is the issue. I do not think padding type styles should be followed in the Editor, I understand other styles being important like background colour.
George
George
0
Hello ,
There is no valid or even proper technique to allow some CSS rules, but restrict others. This is how the browser style and select elements. It is beyond the capabilities of the controls to change the way the browser to renders HTML elements.
Regards,
Ianko
Telerik
There is no valid or even proper technique to allow some CSS rules, but restrict others. This is how the browser style and select elements. It is beyond the capabilities of the controls to change the way the browser to renders HTML elements.
Regards,
Ianko
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.