Is there a way to stop a label control that is not visible from taking up space on a form?
server side:
label.Attributes["style"] = "display:none";
or
label.Visible = false;
or, client-side (css):
#label-id { display: none; }
Set it's visibility to hidden through CSS. Or set it through the code behind to false. From the code behind a false setting should cause it to not be rendered at all.
Optionally, replace the label with a literal control and only emit something to it when you need to.
2 good answers already, so just a couple of notes:
Using Visible=false at the server-side is usually better since that will not output any HTML at all, as opposed to CSS which will output it but just hide it. Unless of course you need it there so you can unhide client-side.
The label itself usually doesn't add any space, it is the white-space before/after it that might, so yet another option (if you work in HTML source view 99% of the time like I do) is to remove any white-space before/after the control. Not as robust as the other options since it could be easy to get that white-space back by mistake (especially if the IDE does it for you while working in design view). Just thought I'd mention it, since this can be good to know if you want the label VISIBLE but don't want the "extra space".
Related
How do I completely remove the sidebar from MediaWiki, and I mean in the sense that the content div occupies 100% of the width of the browser space? I've successfully implemented an extension where non-registered users do not have a sidebar or toolbox to begin with and hence the extra space now seems rather superfluous in such cases.
I'm trying to create my own skin from Vector and have tried so far to change the margin-left: 10em and corresponding tags in div#content and mw-panel in the skin's css file but no luck so far.
Why use CSS when you can edit the sidebar menu and have this stored in the database
Navigate to MediaWiki:Sidebar edit the page and remove the components you don't need
If you want to use CSS then you can try,
#sidebar{
display:none;
}
to see if it gives you the desired effect.
Or you can do what dreamweiver said and use JQuery
$('#side-bar').remove()
If, as you are writing, you are creating your own skin, then you simply do not have to print the sidebar! It is there because you have a piece of code in your skin printing it.
Search your skin code for $this->data['sidebar'], and you will find the loop that prints the sidebar.
However, I'm guessing that you skin has some kind of navigation,and rather than reinventing the wheel, I would recommend using the sidebar, with it's built-in functionality (possible to set from MediaWiki:Sidebar, etc), even if you chose to use it in another fashion. it doesn't have to be printed as a sidebar,just because that's the name -- it could be a top menu, a dropdown, ...
On a radio button checked event, I hide the div by
document.getElementById("AltYukleniciDiv").style.visibility = 'hidden';
But, when I use it for an aspxTextBox, it doesn't hide it. Or when I use the ClientInstanceName instead of document.getElementById(" ")
UnvanText.SetVisible(false); this didn't work either. UnvanText is ClientInsanceName.
javascript crashes there. I put an allert after that and it never shows it. I have to do it because I hide a div, including everything in it, but it still shows the textboxes that has validation. I don't know how it is possible. Can you tell me a way to hide them all? It used to hide the div with all of its contents before I make some validation settings.
It sounds like asp.net is being 'helpful' and changing the IDs of your elements.
Give the text box the attribute ClientIdMode="Static", and it might fix it.
you can add a CssClass attribute to that text box then use it to find the element and hide it.
You can consider using jQuery, so you need to write a single line of code:
$(".MyHideClass").hide();
or set attribute style display:none
I can advice using Firebug (FF Extension) for debugging javascript
Is it possible to have a multi-line textbox (im using asp.net c#) where the maximum characters inputted cannot exceed the visible textbox size?
I have taken scrollbars off vertically (overflow: hidden).
Now I want it so that say if the multi-line textbox shows say 100px height (or say 5 rows), the user cannot type more than the height of the textbox?
There must be a JS/JQuery hack for this?
No, it is not possible.
Because ASP.NET textbox finally turns into HTML textarea which does not support text limit.
You can do this trick with JavaScript, sure, but what concerns visible area, it may not be so easy. You will need to somehow calculate metrics of the current font in use, then try to render in memory to see if the limits of the box are exceeded. One could such tricks when programming for Windows, but with web pages it is likely not possible.
Although it finally turns into a textarea you COULD do this, but it is hacky.
With JQuery on textarea keypress, check length of value, if it is over your threshold, remove last character.
Like I said hacky.
Good luck,
Dan
You can limit text max. char as following.
Client Side
function ValidateLength()
{
if(document.forms[0].txtFlightRemarks.value.length > MAX_LENGTH)
{
document.forms[0].txtFlightRemarks.value = document.forms[0].txtFlightRemarks.value.substring(0,MAX_LENGTH);
document.forms[0].txtFlightRemarks.focus();
return false;
}
}
Server Side (Page_Load): attach onchange and onkeyup events to required textarea.
txtFlightRemarks.Attributes.Add("onchange", "ValidateLength();");
txtFlightRemarks.Attributes.Add("onKeyUp", "ValidateLength();");
I'm having a problem with FIREFOX. I have an invisible list control over a drop-down control (html 'select'). Don't mind why, but I will say that the over-layer is a pop-up that appears as part of another custom control.
Even though it's hidden, it's preventing me from clicking on the underlying drop-down control, making the underlying control seem disabled. It's not disabled though, because I can tab over to it. I just can't click on it. I know it's the overlay causing the problem, because I moved the underlying control off to the side and it works again.
Is this a bug in Firefox? This isn't like setting a translucency value; it's disabling rendering of the control altogether, so I don't think such an invisible control should be intercepting mouse events.
This behavior does not occur in Internet Explorer.
Perhaps there is some other CSS property I can set in JavaScript to toggle its mouse event capturing ability along with its visibility.
dd = document.getElementById('lstStudents');
if (dd.style.visibility == 'hidden') dd.style.visibility = 'visible'; else dd.style.visibility = 'hidden';
Update: I just read a description for the CSS visibility value "hidden" that read "The element is invisible (but still takes up space)". So I guess I'll have to set it's height to zero along with setting it's visibility to solve this problem.
change your over-layer control's z-index to, say, -1. style="z-index: -1;" This will place it underneath everything, allowing direct access to drop-down. You might have to dynamically change the z-index to bring over-layer back on top when visible.
More info
How are you hiding the element? If I remember it right, "visibility: hidden" is supposed to (rightly) work the way you describe, while "display: none" will banish rendering altogether.
If that's not the cause, can you confirm using Web Developer Toolbar that it is indeed the invisible control that is causing the problem and not another that has opacity set to 0 or something?
The way I've done popup boxes before in Firefox was with CSS properties.
z-index: 500;
display: block;
to show an element, and
z-index: -10;
display: none;
to hide it.
Now. My values for z-index are extreme, but that's just what I chose. This works for me, but my app targeted Firefox specifically; aaaaand I'm using the display property, which you stated you want to avoid.
If you're concerned about using display:block or display:hidden, I think maybe you could try to play with positioning, or sizing the element.
Either make the popup element absolutely positioned and move it offscreen when invisible, or maybe try to make it 0px width and 0px height when invisible. That's two things I would potentially explore if I still had problems. I'm not sure if I would recommend these as best solutions though.
Really consider how many instances of your popup elements will have different display values, I found in my case to be using only two types, 'none', and 'block'. Maybe manipulating the display property will be enough for you.
Hope this helps.
I think I'm pretty good at using semantic markup on my pages but I still have a handful of classes like this:
/**** Aligns ****/
.right_align { text-align: right; }
.left_align { text-align: left; }
.center_align { text-align: center; }
Which, technically, is a no-no. But when you just want to position some text in a table, how crazy am I supposed to get with the semantic markup?
Why do you want to align the text?
The answer to the question is the name of the id or class you need to have for your selector. Do you want to align it right because it's a price?
table .price {
text-align: right
}
Just ask yourself why do you want to apply a particular style, and all will become clear.
I probably overdid it, but my last work project was pretty close 100% semantic- anything I needed which was not semantic (say, a filler div which I could not do without for a layout requirement), I added dynamically using jQuery.
If you want tight coupling between the table cells and the alignment, you could just assign the attribute style="text-align:right" directly on the tag. There is no reason to go the extra level of indirection through a class if you dont use it for a level of abstraction anyway.
I try to consider why I want a column right aligned in a table. For example, if the column contains currency amounts then I would use a style named currency instead of right_align.
Semantic markup is an admirable goal, but in the real world, you sometimes have to make compromises. In some cases, the only sensible way to do something is to break semantics and just throw in a right_align.
Edit: People seem to be misunderstanding my point in this. You should use semantic markup where possible. However, there are cases where it really is just a stylistic choice and there is nothing inherent to the data that you can use to describe or classify it. This is most typically true with large sections of tabular data, especially if it is dynamically generated.
I've had cases where clients want to be able to dynamically control what columns appear in data grid. There's no way to know ahead of time what type of data they're going to choose to show. If they want a way to center or right align a dynamically generated column, it's better to have center and right align classes available for them to use than to have them sticking style attributes everywhere.
100% semantic markup is a silly goal. Your graphic designer will say, "Let's right align this", and the reason will be "because it looks good that way". What are you supposed to do, add a class of "looksgoodthatway" to the div? Just right align it and get on with your life! :)
From experience, for usability reasons you should keep tokens on as many lines as possible.
I use the following notation
matcher,¶
matcher¶
{¶
··attribute:·property;¶
}¶
Why you ask? This solves many problems with collisions, as it reduces the number of places 2 unrelated changes can occur in 2 different places at once ( which causes the collision ), and when the collision does occur, its much easier to see what caused it and chose the correct solution.
This is because SCM's DIFF is row oriented, and if you have all your content on 1 row, you get 2 choices, hose one complete set, or hose the other.
Also, that particular style I find, if adhered to, makes it easy to write lint checking code that detects errors in your CSS.
For insance, spot the typos:
matcher
matcher,
{
attribute property
attribute
}
In this case, code that simply checks for whitespace and delimiter conformance also detects coding mistakes!.