Difficulty with aligning textfield controls to the right

I'm currently working on adding StaticTextField controls to a page. We are using ExtJS, but we incorporate VB.NET methods for implementing ExtJS so manual coding isn't necessary.

So far, I attempted to align the text to the right by using this code:

.Style = "text-align:right"

However, this method has proven ineffective and did not produce any results. Here is the complete code snippet for one of the controls:

With .AddColumns(2)
                With .Item(1)
                    .LabelWidth = 150
                    With .AddControl(New Forms.Control("LoanProceeds", "../../loanProceeds", "Loan Proceeds", IIf(Model.LoanProceeds <> 0, Model.LoanProceeds, "$0.00"), Forms.Control.ControlType.StaticTextField))
                        .Validate.AllowNegative = False
                        .Validate.AllowDecimals = True
                        .Style = "text-align:right"
                        .ReadOnly = True
                    End With

All these controls are nested within a column, which in turn is enclosed within a fieldset that resides inside a panel.

Does anyone have insight into why these static controls are not being aligned to the right using CSS? Interestingly, when applying the same code (CSS) to right-align comboboxes or number fields, it works perfectly. These elements are positioned directly beneath the static controls, yet the alignment issue persists only with static controls. They must remain static to avoid the box outline around each value, keeping them solely as plain text on the screen.

Your assistance would be tremendously valued.

Answer №1

Apologies for responding to my own inquiry, but I have managed to solve the issue.

Instead of employing

.Style = "text-align:right"

You should utilize

.ValueStyle = "text-align:right"

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

What is the best way to align a div with a fixed width in the center, when it is positioned between two other divs within a parent

I have this HTML (technically JSX) code snippet here: The center div with the class domain-input-parent is supposed to have a fixed width of 400px and stay centered horizontally on the screen. This arrangement ensures that both the domain-label and icon- ...

Bootstrap5: Left-aligned Navigation Bar Pills and Right-aligned Text

I am trying to align all my navigation pills to the left, and then add a single text element that stays at the end of the navbar even when the page is resized. Navbar Image My attempt involved adding a div so that the navbar pills would take up 50% width ...

Creating a secondary title for a Bootstrap Navigation Bar

I have a unique Bootstrap 4 website that features a navbar. The navbar consists of a special brand section with an image and title text, followed by the rest of the navbar elements. You can view it here: https://jsfiddle.net/zmbq/aq9Laaew/218793/ Now, I a ...

Use HTML to showcase an image that dynamically changes based on the outcome of a query function

Hello there, I hope my inquiry is clear enough. I apologize for reaching out as I am unsure where to begin and what exactly I should be focusing on. Currently, I have an image displayed in an HTML page like this: <div id="tag_sunrise_sunset"><p ...

Is it possible to create two header columns for the same column within a Material UI table design?

In my Material UI table, I am looking to create a unique header setup. The last column's header will actually share the same space as the previous one. Picture it like this: there are 4 headers displayed at the top, but only 3 distinct columns undern ...

Having trouble getting the vertical menu animation to work with jQuery

Essentially, I am facing an issue with a <nav> element that is supposed to expand from left to right upon mouseover. However, sometimes when quickly moving the cursor over and then out of the element, it expands without animation, which should not be ...

Personalize the landing page for your IPython notebook

Is it possible to customize the landing page of an iPython notebook server (version 2.3)? By that, I mean altering the starting page (for example: http://localhost:8888/tree) to show a message like Welcome to John Doe's i[Py] Notebook or changing the ...

Uncovering the class value of an element using CSS

Is there a way for me to use CSS to access the numbers (1 and 2 in this example) at the end of the paragraph's class attribute? <p class="cooking-step-1"><br> <!-- Second step ... --><br> </p> <p class="cooking-s ...

JavaScript Canvas - Preserve Image Transparency

I have been trying to download a snapshot of a canvas using the code below: var strMime = "image/png"; var canvas = document.getElementsByTagName('canvas')[0]; var link = document.createElement("a"); link.href = canvas.toDataURL( ...

Switch the scroll direction in the middle of the page and then switch it back

Yesterday, while browsing online, I stumbled upon this website and was amazed by the unique scroll direction change from vertical to horizontal mid-page. I'm curious about how they managed to achieve that effect. Does anyone have insight into the pro ...

What are the steps for incorporating a personalized background in Autodesk Forge?

Is it possible to set an image as the background? I am trying to achieve this but so far, I have only been able to do the following: viewer.setLightPreset(4); viewer.setQualityLevel(false, false); viewer.setGhosting(true); viewer.setGroundShadow(true); vi ...

What is the process for altering the background color of a modal?

I'm trying to figure out how to change the background color of my modal once it's displayed, similar to this example: https://i.stack.imgur.com/fOUDZ.png. I want the background color to cover the entire page and not just the modal itself. When I ...

Tips for repairing a button using a JavaScript function in an HTML document

I am currently working on extracting titles from body text. To achieve this, I have created a button and linked my function to it. The issue I am facing is that when I click on the button, it disappears from its original position. I intend to keep it in pl ...

Maintain the open state of an Asp.net Ajax accordion panel after a post back

Utilizing the Ajax Accordion control on my Master Page during the Page_Load event, I want to set the SelectedIndex property of the Accordion control which has been defined in JavaScript. The issue arises as every time the Page_Load event occurs, the value ...

The dimensions of the background for a span element

I have a span element with a background-color applied to it. Is there a way to adjust the size of this specific background? I attempted using background-size: auto 2px;, but it did not produce the desired effect. I am looking to make the background color ...

`Make Bootstrap 5 Modal centered horizontally`

I'm facing an issue with my Vue application where the Bootstrap 5 modal is not horizontally centered on desktop. Below is the code snippet of my component: Modal.vue <template> <teleport to="#modal-container"> <div ...

Issue with Custom Dropdown input not triggering blur event

I've been working on a custom dropup component and have encountered some strange issues with it. The main problem is the blur event not firing when clicking outside of the input field. My goal is to hide the options elements on blur, reset the compon ...

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

Is it possible to integrate a standard drop-down menu/style into a MUI Select component?

I am currently working on implementing the default drop-down menu style for my MUI Select Component. Here is the desired menu appearance: https://i.stack.imgur.com/GqfSM.png However, this is what my current Select Component looks like: https://i.stack. ...

Why do I see my footer displayed twice on the page?

<div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li> @Ajax.ActionLink("Imagenes List", "Images", "Home", new { page = 0 }, new AjaxOptions() ...