Tips for displaying and concealing columns in Blazor QuickGrid based on breakpoints

I encountered an issue when attempting to hide a PropertyColumn on small screens in Blazor 8 using the regular Bootstrap 5 method. By adding 

Class="d-sm-none d-md-block"
to the QuickGrid component's PropertyColumn, it seems that the Bootstrap class interferes with QuickGrid's CSS, causing the property to be displayed vertically instead of horizontally.

<PropertyColumn Property="@(p => p.BrokerName)" Title="Broker" Sortable="true" Class="d-sm-none d-md-block" />
<PropertyColumn Property="@(p => p.Symbol)" Title="Symbol" Sortable="true" Class="d-sm-none d-md-block" />

As a result, Symbol ends up underneath BrokerName rather than beside it.

I am wondering if there is a workaround to hide PropertyColumns in QuickGrid without conflicting with Bootstrap. I would prefer not to create custom media queries...

Thanks in advance!

Dennis

cssblazorquickgrid

Answer №1

Well, it seems my mistake was not realizing that the correct spelling for 

Class="d-none d-md-table-cell"
works perfectly fine.

Apologies for the oversight!

Sincerely, Dennis

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

I encounter a difficulty in changing the background color when I click on the horizontal navigation menu, as it does not display the currently selected menu

.unorder_Hnav,li,.classes:active { background-color:#7CA738; height: 50px; display: table-cell; width: 1024px; text-align: center; line-height: 52px; font-weight: bolder; color: #FFFFFF; background-color: #457025; ...

htmlcss

IE9 is causing a bizarre problem where the entire page is suddenly jumping. It's

UPDATE: The client has requested testing to disable the click and drag feature in IE, so replicating the bug may be difficult at this time. I apologize if this hinders the community's ability to help fix the root issue. Here's the issue: It occu ...

javascriptjquerycssdebugginginternet-explorer-9

The div containers are unable to be positioned side by side

Hey there, I'm having trouble with my coding right now. (I'm not sure if you can see it, but the code is creating a div - frustrating). Here's an image of the code: No matter what code I try to use to align the content center, left, or righ ...

csshtml

What is the best way to limit the length of text in a div if it surpasses a

As I work on a website, users have the ability to add headings to different sections of a page. For example: M11-001 - loss of container and goods from Manchester Some headings can be quite detailed, but in reality, only the first few words are needed to ...

javascriptcssxhtmltexthtml

Struggling with creating an html file that is responsive on mobile devices

I am currently utilizing bootstrap 4 for the construction of a website. I have encountered an issue where my homepage does not display properly on handheld devices when using Google Chrome's device toggle toolbar. The homepage requires scrolling to vi ...

htmlcssbootstrap-4

What causes a CSS Variable to appear crossed out in the Chrome Debugger?

Currently facing a challenge with debugging an issue where certain CSS Variables are being overridden by an unknown source. It's puzzling because I cannot identify what is causing the override. When it comes to standard CSS properties (such as font-fa ...

cssgoogle-chrome-devtools

To enhance the MUI v5 table row, simply apply a border when the mouse hovers

After working on creating a table with Material UI v5, I encountered an issue where I wanted to add a blue border to the table row when the mouse pointer hovered over it. I attempted several methods and did thorough research, but unfortunately, I was unab ...

javascripthtmlcssreactjsmaterial-ui

Tips on creating a repeating background image with CSS for a sprite

I'm facing a challenge that I can't seem to solve - I need to set a sprite as the background for a container. The issue is that despite my efforts, I haven't been able to achieve this. I've searched extensively but couldn't find a ...

htmlcssbackground-imagecss-sprites

Dynamic updating of scores using Ajax from user input

My goal is to design a form that includes three "Likert Scale" input fields. Each of these three inputs will have a total of 10 points that can be distributed among them. The submit button should become enabled when the score reaches 0, allowing users to s ...

javascriptjqueryhtmlcssajax

What is the best way to calculate the number of squares required to completely fill a browser window in real-time?

I am creating a unique design with colorful squares to cover the entire browser window (for example, 20px by 20px repeated both horizontally and vertically). Each square corresponds to one of 100 different colors, which links to a relevant blog post about ...

javascriptjqueryhtmlcss

What is the best way to use CSS 3 to resize and enlarge an image, such as sprite icons?

Hello everyone, Picture this: a sprite image named icons.png linked to the css class .icons, featuring various 10x10px graphics. Now imagine needing another class that enlarges these sprite graphics exactly twice their size, making them 20x20 pixels on the ...

resizecsssizebackground-image

Applying CSS blur filter to container without affecting its content

I'm trying to create a hover effect where an image within a parent div transitions into a blurred state. However, I've run into an issue where if the image is set to 100% width/height of the parent div, there is a visible bezel of the parent&apos ...

htmlcssfiltercss-transitionsblur

Is there a way to change the color of a checkbox (both the box and font) in the disabled state using material ui

When using Material UI v4.9.12, it is possible to create a customized checkbox with a specific color that remains fixed: const GreenCheckbox = withStyles({ root: { color: green[400], '&$checked': { color: green[600], }, ...

cssreactjsmaterial-ui

Attempting to utilize Flexbox to populate vacant areas

https://i.stack.imgur.com/BhPU0.png Can the yellow square smoothly transition to the empty grey square and beyond in this layout setup? Each flex item represents a component that can utilize either 50% or 100% of the container width, information only know ...

htmlcssflexbox

The CSS background fails to expand to the entire height of the element

I'm encountering an issue where an element with 100% height is extending beyond its boundaries when there are multiple blocks. For a demonstration, you can refer to this jsfiddle example: http://jsfiddle.net/yPqKa/ Any suggestions on how to resolve ...

htmlcss

Creating a Cross-Fade Effect in easySlider 1.7 using the Jquery Plugin

Want to achieve a cross-fade effect in easySlider 1.7 Jquery Plugin? Check out this tutorial Easy Slider 1.7 for guidance. Appreciate any help, thanks! ...

jquerycssjquery-pluginseasyslider

Form-check radio buttons within the form-check-inline class of Bootstrap 4.1.1

I am attempting to showcase a radio button as an inline option. According to the Bootstrap 4.1.1 documentation, the example code is: <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOption ...

htmlcsstwitter-bootstrapbootstrap-4

When resizing, headers within Bootstrap text fail to adjust accordingly

I have created a card-like component in my HTML with text inside. My issue is that when I resize the page, the card shrinks but the text overflows. Currently, I am using Bootstrap 5 and its h4 class like this: <div class="card bg-white"> ...

htmlcssbootstrap-5

Creating smooth animations in JavaScript without relying on external libraries such as jQuery

Is there a way in JavaScript to make a <div> slide in from the right when hovered over, without relying on jQuery or other libraries? I'm looking for a modern browser-friendly solution. const div = document.querySelector('.fro ...

javascriptjquerycsshtml

Troubleshooting Limitation Problem with Bootstrap Multiselect

I recently created a multiselect dropdown menu using Bootstrap Multiselect. I successfully set a limit on the number of options that can be selected (in this case, 5), and once the limit is reached, the additional options become disabled. Everything works ...

javascriptjqueryhtmlcsstwitter-bootstrap