Ways to troubleshoot the MudTabPanel during scrolling

I am trying to create a fixed text at the top of a scrollable MudTab. As I scroll down, I want the text to remain visible. Here is an example of what I have done: 

<MudTabs Position="Position.Top"  PanelClass="pt-2" Style="height:320px; overflow-y: scroll">
    <MudTabPanel Text="Item One">
        <MudText>
            [Content for Item One]
        </MudText>
        <MudText>
            [Additional Content for Item One]
        </MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Two">
        <MudText>Content Two</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Three">
        <MudText>Content Three</MudText>
    </MudTabPanel>
</MudTabs>
c#htmlcssblazormudblazor

Answer №1

It seems that the issue lies in your application of styles to the MudTabs element.

<MudTabs Position="Position.Top"  PanelClass="pt-2" Style="height:320px; overflow-y: scroll">
 <!-- Content -->
</MudTabs>

To resolve this, ensure you apply the styles to the tab content, specifically the MudText component.

<MudTabs Position="Position.Top" PanelClass="pt-2">
    <MudTabPanel Text="Item One">
        <MudText Style="max-height:320px; overflow-y: scroll;"> --Very long text--</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Two">
        <MudText Style="max-height:320px; overflow-y: scroll;"> --Very long text--</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Three">
        <MudText Style="max-height:320px; overflow-y: scroll;"> --Very long text--</MudText>
    </MudTabPanel>
</MudTabs>

Check out this MudBlazor snippet for reference

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Collection that supports repeated keys in a generic manner

Common collections such as HashTable and Dictionary prevent the addition of a value with the same key. However, I am in need of storing duplicate values with identical keys within a collection that supports Collection<int,string>. Does anybody know ...

c#.netvb.netcollections

Is there a way to programmatically trigger a submit button using jQuery?

In my ScanField, I am scanning a barcode. After scanning, I trim the last four characters of the barcode string and assign it to a hidden field. When I click on the search button, this value is passed to a PHP site via AJAX. For example: if I scan a barco ...

phpjqueryhtmlajax

Prevent scale animation for a specific section of the icon using CSS

I need help in preventing the scale animation of the :before part of the icon class from occurring when the button is hovered. The current behavior is causing the arrow to look distorted on hover... Link to the code on Codepen HTML <div class="se ...

javascripthtmlcss

Is it possible to remove content from a Content Editable container?

JSFiddle <div contenteditable="true"> <p>Trying out editing capabilities of this paragraph.</p> <figure> <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/ima ...

javascriptjqueryhtml

CSS exclusive - achieving a horizontal scrolling list with all list items in a single row

I am working with a div that has a fixed width. Inside this div, there is an unordered list (ul) containing a random number of list items (li) with varying widths. My project utilizes the Bootstrap framework. Below is an example of the code structure: & ...

htmlcsstwitter-bootstrap

After attempting to retrieve local .HTML content with JQuery ajax for the second time, the JavaScript code within index.html appears to be malfunctioning

My apologies for my limited proficiency in English... Currently, I am engaged in phonegap development where I am attempting to utilize JQuery ajax to retrieve local .HTML content and insert this extracted content into the div with the id="next-page" in in ...

jqueryhtmlajaxcordova

Remove all objects from a model based on a specific value by implementing a button in Django

For reference, please take a look at the table screenshot: https://i.sstatic.net/evBSK.png I am attempting to remove a row from the table using the corresponding Delete Asset button (meaning deleting all rows in a django model with Symbol: 1INCHUP) The s ...

pythonhtmldjangodjango-viewsdjango-templates

What steps can be taken to modify the `select` element in IE?

I came across a solution to display an arrow on a select element in this answer: select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1 ...

css

jQuery for Special Characters

I am currently facing an issue with the character &gt; in my jQuery datatable. Strangely, it displays '>' correctly but when I click on a row, the character &gt; appears and I am feeling frustrated. Is there any solution to this probl ...

htmljquerydatatablespecial-charactershtml-entities

How can I create a CSS div with a 20px margin-top distance from the div directly above

Here is the code that I am working with: https://jsfiddle.net/kc94aq33/ I am looking to set the top margin of the .wrapper to be 20px from the bottom of the .header. Does anyone know how I can achieve this? ...

css

Not including DateTimes falling within a specific range

Can someone help me verify the accuracy of my datetime range logic? I want to make sure that any dates falling within an unavailable date range are excluded. For example, if Start 17/10/2018 - 22:35 || End 17/10/2018 23:00 was marked as unavailable, then ...

c#.netmodel-view-controller

Placing the image at the lower edge of the page

Looking to display thumbnails in a div with dimensions of 120x120, but struggling with the vertical alignment. The current image size is 120x57 and it's not aligning properly within the div, leaving too much space at the top. Here is the code snippet ...

imagecss

The querySelector function seems to be identifying the element with the ID "submit" and another input element of type "submit"

My code includes a function that toggles between two elements' style.display values, switching them from "none" to "block" and vice versa. However, I've encountered an unexpected issue where the behavior of the "send" button seems to be linked wi ...

javascripthtmlformsdom

What are the steps to troubleshoot CSS issues in NextJS?

Currently, I am encountering challenges while trying to integrate markdown with CSS. The problem I am facing has been replicated in the link provided: https://codesandbox.io/s/react-quilljsbasic-forked-3rcxw?file=/src/App.js ...

cssreactjsmarkdownnext.js

The function "getElementsByClassName" in Javascript is malfunctioning

I have redesigned my website by implementing an interactive feature where users can click on a tree image to remove it and replace it with a number using JavaScript. Initially, I targeted the specific tree with the following code: document.getElementById( ...

javascripthtmlajax

Having trouble with closing the window on Mozilla and Chrome? Keep getting a scripting error message?

To close this window, click <a onclick="self.close();" href="#">here</a>. This is the code I am using. When I submit in Chrome and Mozilla, an error occurs. The error message is: "Script must not be allowed to close a window that was not o ...

javascriptc#jqueryasp.netfirefox

Tabbable bootstrap with dropdown functionality

I am currently in the process of integrating Bootstrap tabs and dropdown menus using version 2.3.4 <div class="container"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-2

Check for compatibility of overflow:scroll with mobile browsers

Is there an easy JavaScript method that works across different devices and libraries? I am looking to assign a class to the html element in order to enable scrollable containers on mobile devices when needed. I want to follow a similar approach to Modern ...

javascriptcssmobile

Why is this strange red dot character 🔴 appearing in the URL in FireFox?

While browsing the web, I came across a website with a strange red blob in the URL. It's something I've never seen before. What could possibly be the reason for this unique feature?! Note that you have to visit the page to see it for yourself. T ...

htmlurlfirefoxcharacter-encoding

The View Component is experiencing issues with loading the CSS and JS files correctly when an AJAX call is made

Hey there! I'm having trouble loading a view component via ajax when the button is clicked. It seems like the css and javascript are not working properly. Check out the ajax call for the controller to load the component: $.ajax({ url: window.locat ...

c#jqueryajaxasp.net-mvcasp.net-core