Play framework fails to apply style attributes correctly

When working with play-framework 2.3.x, I am in the process of creating a form and would like to show/hide it based on a model attribute. Typically, setting the style attribute manually using style = "display: none" and style = "display: block" works fine. However, when attempting to change the style dynamically based on an attribute passed from the controller, the style does not seem to take effect.

Below is an example code snippet from index.scala.html. The getResultStyle method is utilized to determine the display style, which is then used as the value for the style attribute within the form tag.

@getResultStyle() = @{
  if(sf.year_1(1) == 0) {"display: none"} else {"display: block"}
} @main(message) {
     <form id="Forecast Result" name="Forecast Result"
        style=@getResultStyle()
        action="" method="post">
      .
      .
     </form>

Is there a solution to get this functionality to work as intended?

Answer №1

Modify the line by (include " " around definition):

 style="@getResultStyle()"

Your code appears as follows (in html- verify in browser)

<div id="Weather Forecast" name="Weather Forecast"
        style=visibility:hidden
        action="" method="post>

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

Why won't the audio tag play any audio on IE10 Windows7?

Encountering issues with the audio tag on Internet Explorer 10/Windows 7. Discovered a test page where IE is unable to display any audio tags. Interestingly, when the file is saved and tested locally, it works perfectly (see image below). Confirming that ...

Can someone guide me on the process of assigning multiple classes in my situation?

Can someone assist me with combining multiple classes in an ng-class statement? I am attempting to utilize multiple classes for my element using ng-class. Here is what I have: <div id='test' ng-class="{blue: test, scale: scale, 'non-sca ...

Transitioning with an ellipsis

Currently, I am working on a project where I am trying to utilize the CSS property text-overflow: ellipsis to achieve a specific animation. However, despite applying this property along with white-space: nowrap and overflow: hidden to .card-dish__info, I a ...

Ensure all columns have the same height as the shortest column

While many solutions exist on Stack Overflow for making columns equal height based on the largest content, I am specifically interested in making all columns equal height based on the smallest column. https://i.sstatic.net/Xlcyh.png In this scenario, my ...

The ZK Component fails to display within the HTML tag

In my dilemma, I am attempting to showcase a hyperlink component under an HTML tag along with some instructions for click functionality: <zk> <html> <a label="show me" onClick="@command('showMe')" /> </html> </zk ...

What could be the reason for <input type="email"> flagging legitimate email addresses as invalid?

According to information from Wikipedia, the following email addresses are considered valid. " "@example.org "john..doe"@example.org "very.(),:;<>[]\".VERY.\"very@\\ \"very\". ...

Dealing with challenges in integrating ngx-masonry with Angular 14

I am currently working with Angular 14 framework and the ngx-masonry library (https://www.npmjs.com/package/ngx-masonry/v/14.0.1). However, I am facing some issues where it is not functioning correctly. I would appreciate any assistance or guidance on how ...

Adjust the image size without losing sharpness

I'm currently working on a web application for Minecraft and I am looking for a way to resize someone's skin without losing quality. I believe javascript might be the solution to this issue. ...

The alignment is off

<script> var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } </script> <p text-align="right" id="demo" style="font-family:Comic Sans ...

The Impact of Using Custom HTML Tags with AngularJS Directives

If I were to create a unique avatarDirective in AngularJS that is connected to an userEmail property on the scope. The directive would update this HTML … <avatarDirective userEmail="user.email" /> with a standard img tag that has its src attribut ...

Error with AngularJS: IE not showing dropdown options for MultiSelect

My application features a multiselect dropdown menu that shows a list of countries. While this dropdown functions correctly in Chrome, it displays options differently in IE as shown below: https://i.stack.imgur.com/xhOmV.png I have attempted to adjust th ...

The inner div appears to have content but is actually measured as 0x0 in size

Despite having content, my main div doesn't have a height or width. I am trying to make the main div fill 100% of the space between the header and footer so that the background image for main is displayed across the entire page excluding the header an ...

Ensure that icons are evenly spaced, regardless of whether they display a notification badge or not

Although not as abundant as depicted in the image below, it is more evident that I am seeking a couple of font awesome icons overlaid with a bootstrap badge to display notifications. The two issues that I am encountering are: There is excessive spacing ...

Is it possible to bind browser keyboard scrolling to a div without explicit instructions?

Here is a question that closely relates to this one: Enable div to scroll by keyboard without clicking I am aware that explicitly focusing on the element will enable the desired behavior. My inquiry is whether there is a way to achieve this implicitly. ...

Darkening effect observed in iOS Safari when applying CSS gradient on a background with similar color tone

I am facing an issue with the gradient overlay on my blue box. I want the overlay to fade from transparent to blue at the bottom of the box, creating a smooth transition for overflowing text. This is how it is supposed to appear (and does on most browsers ...

What causes an iframe to scroll horizontally when scaled?

I'm in the process of resizing an iframe element on my webpage using a CSS media query to adjust its dimensions. However, when I scale it down and interact with the iframe, my webpage starts scrolling horizontally. The issue is evident when using Chro ...

Arrange the selection options by price using jQuery

Sorting options by price is my goal, but despite trying various codes, I have not been successful! This is the original structure: <select id="product-list"> <option>product 1- [2$]</option> <option>product 2- [4$]< ...

Recover Checkmark Status from Data

Currently, I am storing form data in json format and encountering an issue when trying to load values from a previously created json file. The plain old JavaScript function provided below successfully loads values into a form from a file, effectively resto ...

Issue with IE11: Flexbox with absolute positioning not sizing correctly, fills entire width instead of individual content

Here's a simple case to reproduce the issue: <div style="display: inline-block; position: relative; border: 1px solid black;"> short <div style="display: flex; position: absolute; border: 1px solid black; top: 100%; lef ...

Clicking on the image "Nav" will load the div into the designated target and set its display to none. The div will

Can someone help me with loading a div into a target from an onclick using image navigation? I also need to hide the inactive divs, ensuring that only the 1st div is initially loaded when the page loads. I've tried searching for a solution but haven&a ...