I need to find a way to hide HTML Rows (or Tables) from view without blocking them from being rendered. Setting this.myTable.Visible = false would seem to be the easiest way to hide tables from the user, but it prevents the HTML Table from being sent to the browser and that causes a problem because I am using Validators and need to make sure the non-visible elements are validated (because of page navigation logic, only some elements will be made visible to the user at a time).
I was attempting to change the Style property but asp.net says it is read-only so I cannot make it invisible using CSS. Also I would prefer not to use Javascript but if there is a simple solution with JS that is fine.
Any help is greatly appreciated.
You could make your <tr>s server tags. To do this, change your rows in
<tr id="rowID" runat="server">
So you can access their properties, such as rowID.style or class properties.
You can set this server-side by adding a display property to the style collection. The style collection property itself is read-only (you can't replace it), but you can an element to it to reflect setting that style property.
table.Style.Add("display","none")
or
table.Style["display"] = "none";
The same is true for table rows as the Style collection is inherited from HtmlGenericControl.
EDIT: The HTML control needs to be runat="server" for this to work, which I'm assuming yours is since you are able to set the Visible property.
To hide a complete table (but still render it to the client), wrap it in a div with style="display:none":
<div style="display:none;">
asp.net table goes here
</div>
Although, for single rows, this does not work. You will probably have to use some javascript (e.g. jquery, as another user recommended).
Besides using the style property, you can always put the style on the element either right on the tag itself, or in code via element.Attributes["style"] = "display: none;";. To do it in code, you need to make them server controls by adding runat="server" and setting an ID.
Thanks for the useful information guys. I was able to actually combine two of the earlier answers to come up with a great solution. For reference here it is:
I used div tags around the tables I wanted to show and hide like:
<div style="display:none;" id="tblHideItems1" runat="server">
I referenced these in the code-behind like this:
Definition:
protected System.Web.UI.HtmlControls.HtmlGenericControl tblHideItems1;
To show:
this.tblHideItems1.Style.Add("display", "inline");
To hide:
this.tblHideItems1.Style.Add("display", "none");
This allows me to show or hide the tables, without taking up blank space on the page when they are hidden, but still rendering them so they'll work with Validation controls (that was my ultimate goal) while hidden or showing.
The style tag in the definition may not be necessary but since it works now as it is, I will probably just leave it since it is being modified at runtime.
Again thanks for the insight!!
guys even table.Visible = False works
provided
u've set the runat= "server" for the table ofcourse
Related
Just wondering if its possible to store invisible data in a HTML tag that activates the element but doesn't show data.
For instance, if I had a <h1></h1> element and I wanted the element to be active so the DOM would think there was a real header there and therefore include any additional properties (ie padding, margins etc) is it possible to have the element active by putting in something between that tags that wont display on the view?
I remember seeing something ages ago that did this but can't remember where from...
You can use visibility: hidden CSS like so:
<h1 style="visibility:hidden">...</h1>
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/visibility for information about visibility.
EDIT:
In order to hide the contents of the heading, you could use JavaScript or a library like jQuery. Let's take jQuery for example. You could do something like this: https://jsfiddle.net/yanpbw1v/. In this example, I am saving h1's data into a variable and then clearing h1's data out.
Very simple question but I've been googling for hours and haven't found anything
How can i style the content/option/popup of a dropdownlist on the right side of the 'open button' like in this image/screenshot: https://www.dropbox.com/s/joqj00ahjrwqs0p/Capture.PNG?dl=0 ?
You cannot style it. You need to create a replacement element. Some browser elements can not be changed, or almost not be changed, with regard to their styling. They are so-called "native" (referring to the operating system) controls.
Check here for some jQuery based replacements which you can style whatever way you like:
http://jquery-plugins.net/fancyselect-jquery-plugin-for-custom-select-box
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
Do hidden input fields have a physical location within the page?
I know this question probably sounds dumb (I definitely feel like it for asking), but recently I created a website with a lot of hidden fields (created with JavaScript DOM), and I noticed there is a huge, empty area at the bottom of the page.
I checked the code and I can't find anything that could cause this problem.
var hiddenfield = document.createElement('input');
hiddenfield.setAttribute("type","hidden");
hiddenfield.name = "hiddenfield";
hiddenfield.id = "hiddenfield";
hiddenfield.setAttribute("value", document.getElementById("select1 4").value);
formNew.appendChild(hiddenfield);
I edited in some code to show the way I created the hidden fields.
No, input type="hidden" fields aren't causing this. Possibly some css style or width and height settings.
They do have a location, try to change hidden in text from the developer console and you will see it's position. They are just collapsed. The don't influence layout in any way.
If you are using <input type="hidden"> then as Patrick answered they will not influence layout. As in this example explained by Patrick.
BUT if you are hiding your input fields using visibility:hidden then YES it will take the space. See THIS example.
As according to W3
"visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout."
You can hide your fields using display:none. According to W3
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there
I've searched quite a bit, but all results reference using a custom image. I'm working with fluid layouts/retina displays and I'd like the button to be purely HTML/CSS.
Does anyone know a workaround/method?
Without seeing some code, I'd say hide the image with jQuery, then again use jQuery to create a new element with whatever content you want inside what I presume is the anchor tag used.
If javascript isn't supported, it'll show the image, if not, it'll show your new element (which you can style accordingly)
edit: ok, some clarification... use jquery to hide the existing input type="image"... then use jquery again to create a new input of type submit, do whatever you need it to do
Here's a fiddle to explain: http://jsfiddle.net/erinfreeman/PFZY8/
If there's a better way of doing it, I'm all ears. As below, I don't think jpann can add any additional code else it would simply be a case of hiding the existing input field and adding another.
Hi I was working on a project and the client wanted custom paypal buttons. I found a great site that provided custom code for the button: http://www.daddydesign.com/wordpress/how-to-create-a-custom-paypal-button-without-images/
You simply replace the input type="image" tag with an input type="submit" and style it. Hope this helps.