Responsive Panel, Button, and General use questions

[JP13]

I have 3 questions this time.

 

1) After some fiddling around I got my responsive panel working.  I then went and changed my default layout so that I have the content in div in the middle of the form, rather than all left aligned.  When I made the change the panel no longer hides.  Instead when it should be 'hidden' it is visible but on the left outside edge of the div.  When I click the button to make it appear it slides into the div correctly and appears where it should.  What do I need to do to get it to be hidden and not just on the outside of the div?

2) In my HTML I had the following button

<button name="Logout" tag="span" class="textButton" type="submit">Logout</button>

I thought it would be a simple change to make it a Kendo button:

<kendo-button name="Logout" tag="span" class="textButton" type="submit">Logout</kendo-button>

 

However once I did this, it no longer worked. I am sure it is something simple, but what did I miss?

 

3) The final question is a general use question.  My app will be in ASP Core.  I see a lot of examples that use the format of:

<kendo-object></kendo-object>

and some that are in the format of:

@(Html.Kendo().Object()
)

 

Which one is the 'correct' format?  Are there advantages to using one over the other?  If I use the 2nd option will all of my themes still apply to the objects?

[Dimitar]

Hello,

1) In order to troubleshoot a styling issue, I will need an example that replicates the problem. In this way, I can examine the implementation details and troubleshoot the cause for the issue.

2) Could you elaborate more on what is the exact issue? In general, defining a button is described in the following article - Button TagHelper Overview. The TagHelper generates a <button> element with a specific class "k-button". Thus, if the issue is styling related, then the custom class "textButton" might be the cause for it.

3) The referred behavior is related to the usage of HtmlHelpers(e.g @(Html.Kendo().Button()) or TagHelpers(<kendo-button>). Using the HtmlHelper or TagHelper to initialize a button will result in an identical markup rendered on the page. In order to get more in-depth knowledge regarding the helper methods, I would suggest to check out the following resources:

• TagHelpers in ASP.NET Core.
  
  
• Migrating to ASP.NET Core TagHelpers Blog.

Regards,
Dimitar
Progress Telerik

[JP13]

I have attached my current project for you to see what is going on.  (Fair warning it is a mess right now since I am having div problems, but you can see the problem described in #1)

In regards to #2 when I made the change as described it would no longer submit the form. It wasn't a styling issue, but a 'not doing what it is supposed to do' issue.

For #3 that makes sense, I just wanted to make sure there was no real difference. I will read the docs and see if they answer the rest of questions.

[Dimitar]

Hello,

1) The issue with the responsive panel being visible is coming from the following custom style:

 <style>
@@media (max-width: 1921px) {
#slidebar {
background: #fff;
padding: 20px;
border-left: 1px solid #4682b4;
/* show sidebar in container, demo only*/
position: absolute;
top: 0;
bottom: 0;
z-index: 100;
}
}
</style>

More specifically the problem occurs due to the position: "absolute". Thus, commenting out the line will fix the observed issue with the visibility of the panel.

2) The button issue can be resolved by using the tag option to specify that the Button TagHelper renders a span element for the button as follows:

<kendo-button name="LoginButton" tag="span" class="k-primary"><a asp-area="Identity" asp-page="/Account/Login">Login</a></kendo-button>

Regards,
Dimitar
Progress Telerik

[JP13]

Removing the Absolute tag moves the menu to the edge of the screen, instead of the div.

[JP13]

Also the login button works as expected, it was the logout button that was having troubles.     

[JP13]

Removing the span actually solved the logout button.  Still having issues with the responsive panel being visible outside of the div though.     

[Dimitar]

Hello,

The ResponsivePanel has a fixed positioning, thus without any CSS overrides it is pinned to the left side and goes off screen when toggled. In case you would like to modify this behavior by changing the position, you will also have to dynamically show/hide/animate its container with javascript.

Regards,
Dimitar
Progress Telerik

[JP13]

Is that what is happening on the demo page (https://demos.telerik.com/aspnet-core/responsive-panel/index)?  When I resize that page to make the panel hidden, it appropriately hides and doesn't just slide to the side.  Would it be possible to get instructions added to the docs on how to make hidden?

[Dimitar]

Hello,

Instead of using JavaScript to toggle the visibility of the container(as suggested with my previous reply), the referred demo uses an overflow: hidden style that is set to the <div id="example"> container. Therefore, in case you would like to utilize the same approach in your project, the overflow style could be added to the ResponsivePanel container in menu.css:

.panel-wrap {
  max-width: 1200px;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  position: relative;
  min-height: 580px;
  overflow: hidden;
}

Let me know how that works.

Regards,
Dimitar
Progress Telerik