Correctly displaying styled label?

Member 8761667

Hello I am trying to add style to a aspx (vb) file but I get an error: http://www.bayingwolf.com/attributes.jpg[^] That erroneous underlined line is:

messageArea = Attributes.Add("style", "display:block")

and it refers to this label in my aspx file:

style='display:none;'>

What is the correct way of displaying the label, please? The CssClass is this:

.formattedText
{
font: normal 14px 'Droid Sans' , 'Trebuchet MS' , Arial, sans-serif;
color: #ffffff;
position: absolute;
top: 330px;
border: 1px solid white;
padding: 15px;
}

Thanks for any help.

Peter Leow

Try this:

messageArea.Attributes.Add("style", "display:block")

There is a typo of extra ">" inside;

runat="server">style='display:none;'

Member 8761667

Hello Peter Many thanks for that. Those errors have gone now. Previously, if I clicked on the upload button without selected any file, I got this message:

"Your file " & Convert.ToString(uploadControl.PostedFile.FileName) & " can not be uploaded.<br>File types allowed: .doc, .docx, .txt, .png, .gif, .bmp, .jpg, or .jpeg.<br>"

Now, I don't get any message on screen. Likewise, if I select an .asp file which is not, strictly speaking, allowed, no message appears either. I just wonder if the CSS and/or ASP label:

<

asp:label id="messageArea" CssClass="formattedText" runat="server" style='display:none;'></asp:Label

is preventing the message(s) from appearing?

Thanks again.

Peter Leow

I can only say that

style='display:none;'

will cause the "messageArea" label not to be shown.

Member 8761667

I have removed that and I can now see the relevant text when I deliberately commit an error (wrong file type or no file). A step forward, thanks! The only remaining problem is that when I remove

style='display:none;'

and before I attempt to upload anything, I can see on the screen a small white empty box with nothing in it. That box should really only appear with the error text when I have committed an error.

jkirkerx

It should be this, but I haven't used it on a web form in a while So I always remove the pervious style first, then add the style change, so I don't just add the same style back, resulting in 2 of the same styles.

With messageArea
.style.remove(HtmlTextWriterStyle.display)
.style.add(HtmlTextWriterStyle.display, "block")
End With

Member 8761667

It is still there that box: [^] I have removed what I had in my aspx.vb file, namely:

'messageArea.Attributes.Add("style", "display:block")

and inserted your With | End With here:

Protected AllowedExtensions As String() = {".doc", ".docx", ".txt", ".png", ".gif", ".bmp", ".jpg", ".jpeg"}

Private Property Label As Object

Protected Sub uploadButton\_Click(sender As \[Object\], e As EventArgs)

    With messageArea
        .Style.Remove(HtmlTextWriterStyle.Display)
        .Style.Add(HtmlTextWriterStyle.Display, "block")
    End With

    Me.messageArea.Text = String.Empty

    Try

I don't get any debug errors and I have had a look at a couple of Web examples: http://msdn.microsoft.com/en-us/library/wc500chb.aspx[^] so I am not sure why your script isn't working.

jkirkerx

I looked at your message label in a post above, it looks correct to me. To make the Label appear, it's display: inline-block; and to make it not appear, it's display: none;

You might just want to keep the label visible and just put something like "Ready to upload image file" in it, and just change the text value.

Member 8761667 wrote:

'messageArea.Attributes.Add("style", "display:block")

You can do it that way, but you should really use the HtmlTextWriterStyle for that instead, then you can work with multiple styles. FYI: The code we are working with will override the CSS style.

Member 8761667

This seems to have done the trick!

<asp:label runat="server" id="messageArea" CssClass="iForget" style='display: none'></asp:label

Just inverted commas here:

style='display: none'

not quotation marks. I have the aspx file open and select 'View in browser'. The empty box has gone. I click on the browse button, choose an asp file which is not allowed, and I get a warning (white font in the white box) that only certain files are allowed. This is the CSS:

.iForget {
display: inline-block;
display: none;
font: normal 14px 'Droid Sans' , 'Trebuchet MS' , Arial, sans-serif;
color: #ffffff;
position: absolute;
top: 330px;
border: 1px solid white;
padding: 15px;
}

However, if I then press F5 to refresh/retry the page, that previous error is still there. But I think you have cracked it! Thanks!

jkirkerx

I don't feel comfortable with that, it should be double quote marks. The iForget was just a placeholder, I wasn't able to remember the name of the CSS class, perhaps you have 2 CSS classes with the same name? Anyways complete your testing using the same name and then change it later, back to something more elegent. Cleanup the .iForget CSS Class, and just put 1 display statement in it for display: none;

.iForget {
display: none;
font: normal 14px 'Droid Sans' , 'Trebuchet MS' , Arial, sans-serif;
color: #ffffff;
position: absolute;
top: 330px;
border: 1px solid white;
padding: 15px;
}

In you button code, it should be

Protected Sub uploadButton_Click(sender As [Object], e As EventArgs)

If Page.IsPostback then

With messageArea //To Show the Message use 'inline-block'
.style.remove(HtmlTextWriterStyle.display)
.style.add(HtmlTextWriterStyle.display, "inline-block")
End With

End If

End Sub

but remember that the label or span tag will not change until the page posts back to the server and makes the round trip. So I'm not sure what the button click does, if it uploads a file, then the label will not change until the file upload is complete. So this setup here will make the label not appear. You click the button, the tasks will complete, and then the label will appear.

Member 8761667

Yes, thanks. After changing the code, I previewed it in the browser and uploaded a .txt file and the message '

Successful Upload!

in a white box appeared. Then I uploaded an .asp file and got the expected

'....cannot be uploaded.<br>File types allowed: .doc, .docx,...

Well, that's exactly what I wanted! No empty white box at the beginning and the script seems to work. As with last time, if I press F5, the previous error is still there. Probably not a lot I can do about that.

Thanks for all your time and great help!

jkirkerx

So you want to fix the '....cannot be uploaded.
File types allowed: .doc, .docx,... error ? to finish your project

Member 8761667

I prefer to show that error to give users an idea of what files are allowed and what are not allowed, otherwise they may not understand why their files are not being uploaded.

jkirkerx

Oh OK Don't forget the up vote the post that helped you so others with a similar issue can quickly see the anwser. Thanks and make it a great day!

Member 8761667

I think I have upvoted it (clicked on the upwards pointing arrow). Thanks again!