Trouble with DevExpress ASPxButton: Some Properties Fail to Update

It's been a while and I'm facing a tough challenge. I need to change the image source of an ASPxButton from the code behind, but it seems like the height, width, and border style are getting lost in the process (resulting in an image with its own size and a thick black border).

<dx:GridViewDataTextColumn FieldName="SyncStatus" VisibleIndex="0" Caption=" " Width="22px">
    <DataItemTemplate>
       <dx:ASPxButton runat="server" Image-Url="~/Images/Wizard/Wand24x24.png" Height="20px" Width="20px" 
        Border-BorderStyle="None" id="btnWiz" OnInit="btnWiz_Init"></dx:ASPxButton>
    </DataItemTemplate>
 </dx:GridViewDataTextColumn>


    Protected Sub btnWiz_Init(sender As Object, e As EventArgs)

    Dim btnWiz As ASPxButton = TryCast(sender, ASPxButton)
    Dim container As GridViewDataItemTemplateContainer = TryCast(btnWiz.NamingContainer, GridViewDataItemTemplateContainer)

    btnWiz.ImageUrl = "~/Images/NewNote.png"
    btnWiz.Border.BorderStyle = BorderStyle.None
    btnWiz.Border.BorderWidth = Unit.Pixel(0)
    btnWiz.Height = Unit.Pixel(20)
    btnWiz.Width = Unit.Pixel(20)

End Sub

I attempted a solution by adding the following:

 .dxbButton
   {
     border-style: none;
     height: 20px;
     width: 20px;
    }

However, upon inspecting the element, it appears that this solution is being ignored. Any advice would be greatly appreciated. Thank you in advance.

Answer №1

Your CSS isn't being applied due to inline styles taking precedence

Setting Height="20px", Width="20px", Border-BorderStyle="None"

results in inline styles being generated, resulting in:

<div style="border-style:None; height:20px; width:20px; -moz-user-select:none;" ...

These inline styles override your CSS rules

Answer №2

It seems that a small tweak in the syntax was all it needed (just as I thought). The correct syntax is

    btnWiz.Image.Height = 20
    btnWiz.Image.Width = 20

I'm certain this information is well-documented somewhere. It also resolved the border problem.

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

Tips for customizing the appearance of a mat-select chosen item?

Is there a way to modify the color of the selected option text in a mat-select component within an Angular 15 project? .html <mat-form-field> <mat-label>From</mat-label> <mat-select panelClass="mat-select-red"> ...

What is the best way to create a responsive design that positions an element between two others?

There are two types of elements in my project: Type "A" - a text block Type "B" - a graphical block I am looking to create a responsive layout for these elements. On small resolution screens, I want them to be arranged like this: "A" "A" "B" ...

What is the trick to have a CSS element overflow the boundaries of its containing div entirely?

Currently, I have a JS Fiddle project where I am attempting to achieve a specific effect. In the project, there is a circle positioned at the center of a div. When the script runs, the circle expands evenly in all directions until it reaches the borders on ...

Modify the Color of Chosen Anchors for Site Categories WITHOUT Using JavaScript

Is there a way to change the color of section anchors in a fixed header when selected without using JavaScript? I'm looking for a CSS-only solution that will change the color of the selected anchor and revert it back to normal when another anchor is c ...

Secret icon revealing on mouseover

I devised a simple technique to showcase an element overlapping another, like an overlay, and it was functioning flawlessly until the point where I needed to incorporate a "button" (styled as a Bootstrap anchor) beneath it. Here is the initial setup and h ...

Impact of designs on the elements within components

Here's a CSS query I have: If I have the code below, does the styling apply to the contents of v-container but not v-container itself? <v-app id="inspire"> <v-container justify-center style="max-width: 1200px"> <v-layout row ...

Emphasize the interactions within the table cells based on their corresponding column and row

I'm looking to achieve a specific interaction in my Angular Material table. I want to highlight the table cell interactions with column and row by extending the highlighting up to the column header and left to the row header. Is this something that ca ...

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

Ways to remove the default classes added by ngbootstrap

My current challenge involves utilizing ngbootstrap for popovers, yet desiring to override its default styling. Specifically, I have a form that should function as a popover triggered by a button click, and it needs to maintain its own distinct styles. Up ...

Choosing "grandoffspring"

I have a complex inquiry! Let's examine three potential scenarios Situation 1 <div class="entry-content"> <p><a href="#"><img src="#"></a></p> </div> Situation 2 <div class="entry-content"> &l ...

Differences between using tables and divs for form layouts

After searching online for examples of form implementations using DIVs, I noticed that most were simple one-column forms. However, my forms are more complex, like the one shown in this image: Although I can easily create these forms using tables, I encoun ...

The loader image does not appear on mobile screens during an AJAX call, but it functions correctly on desktop screens

While I have successfully implemented a loader (.gif) using a div tag in an AJAX call for desktop screens, the same code is not functioning properly on mobile devices. Instead of displaying the loading animation, it simply shows a white screen. <div ...

Have I incorrectly implemented responsiveness on my website?

I created my HTML using Bootstrap 3.3.7: <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="copyright" content= ...

Creating dynamic DIVs that adjust fluidly to different screen

I have a section containing 4 centered divs. Here is what I want to achieve: When the screen width is over 1280px, display all 4 divs in a row. When the screen width is less than 1280px, show 2 divs per row. And when the screen width is under 640px, disp ...

Styling the arrow of a CSS select box

Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box? .form-item-custom-search-types::before { ...

Unique Floating Bullet Icons Ascending When Enlarged

I'm currently trying to use a star image as a custom bullet point on an <li> element. However, I'm facing the issue where the bottom of the image aligns with the font's baseline, causing the image to be pushed upwards. Is there any sol ...

The <ul> tag is not receiving the correct styles and is not displaying properly

I have successfully integrated an input control and button into my table within the Angular 7 application. When a user inputs text in the control and clicks the add button, the text is appended to the <ul> list. However, the layout of the <ul> ...

Is there a way to modify the styling for ListItemButton specifically when it is in a selected state?

My first experience with MUI involves trying to customize the styling of a button. After installing my project with default emotion as the styling engine, I attempted to override the existing styles using the css() method mentioned in the documentation: ...

Retrieve the class name from a CSS stylesheet

How can I extract all the CSS class names from a CSS file? This is what my CSS file looks like: p.juicy{ margin-left:40px; } p.csBody{ text-align:justify; } p.csCode{ font-family:"Lucida Console", Monaco, monospace; background-color:sil ...

Issue with interactive rows in a table ( Rails Version 4 )

I am encountering an issue with a table that is linked to a customer show page _table.html.erb <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th width="50"><%= sort_link ...