I want to fold a section of the form without setting its display to none. If i set the display to none, the validation is bypassed that is why I don't want to set the display to none. I know I can set the visibility to hidden and visible but this solution is not feasible for rendering the view as the space for the folded section stays there. This results in a very odd look of the view with an empty white space with no content on it.
So my question is to hide a section of the html form (without intacting a placeholder for it) without setting its display to none, so that I could still perform the validation.
Some HTML code:
<td style="margin: 5px; border-bottom: 1px solid; display:none; overflow: hidden;" colspan="3">
<div>...</div>
</td>
The display is initially set to none but once it is unfolded for the first time, I am setting the height to 100% and removing the display style.
You can move it off the screen:
$(elem).css("position", "absolute").css("left", -9999);
Or set it's height to 0:
$(elem).css("height", 0);
The simplest way to fake display:none is by setting the position to absolute (so the element is taken out of flow, no longer influencing the rendering of outside elements) and the visibility to hidden (so it is no longer painted).
$(elem).css('visibility', 'hidden').css('position','absolute');
Set the opacity of the element to 0.
$(elem).css("opacity", 0);
$("#ele").css({"height" : 0, "width" : 0, "opacity" : 0});
Hiding an element with jquery...
$('element').addClass('hidden');
and in your CSS just use what ever you find appropriate to make that element "hidden"
.hidden{
/* whatever you find appropriate */
}
Related
I have a "button" component in Angular, with has a loading input. If the value is false it displays the text of the button, as displayed via content projection (<ng-content>). If true, it hides the content and displays a "spinner" component instead.
This done in the template using an *ngIf:
<button class="btn"
[ngClass]="{'loading': loading}">
<ng-content *ngIf="!loading"></ng-content>
<app-spinner *ngIf="loading"></app-spinner>
</button>
This works fine for toggling between the two views; if the Input on the button changes, the template renders it correctly.
However, when the input changes and the spinner is displayed, it causes a strange animation on the height of the button.
This happens when the button CSS has transition: all 0.25s ease-out;. If I comment that out, it's fine. But I want to keep the transition property if possible.
I've created a Stackblitz to demonstrate it:
https://stackblitz.com/edit/angular-ngif-in-button-strange-animation
I am wondering if it's because for split second, both components are in displayed while Angular's change detection is working, but I'm not sure.
I have tested your stackblitz and removing the padding from the .btn class will stop raising the button size.
This is happening because in the first frame, this padding from the .btn is being applied, making the button raise it's height. After that, the second style is applied from the .loading class, which resets the padding to padding: 0 12px and then the height goes to the normal size.
Can I detect the width of a dynamicaly filled div box without rendering it on the web page?
<div>{{some.data.from.some.model}}</div>
If I render it, I know it's width is 260px (in every modern browser).
Can I detect it, before it is rendered on the web page? Are there tools, mechanisms, libraries to do that?
My Imagination is:
That is the div box width this class (margin, padding, whatever)
This is the content (text, font, fontsize, whatever..)
Tell me it's width
Don't show it on the homepage yet, I'll decide afterwards
You can't get the size of an element that doesn't exist (hasn't been rendered). Any solution you find to calculating an element's size without it being rendered is probably not going to be cross-browser.
So, the best you can do is render said element out of view, be it via "visibility: hidden", or pushing it out of view with "display: fixed". Once you have an actual element, you can check it's size for the current browser via JS and proceed accordingly.
I have created a simple fiddle here: http://jsfiddle.net/5wq8o02q/.
HTML
<div id="playground" class="block">
some content
</div>
<span id="width"> </span>
CSS
.block {
/* width: 100px; */
height: 100px;
}
JQUERY:
$(function(){
//$('#playground').css('visibility','hidden');
$('#playground').css('display','none');
$('#width').html($('#playground').css('width'));
});
It helps to use display: none and it won't use screen real estate as visibility: hidden. It still gives the width you are looking for (I think). Let me know me it helps ...
Our form has a height problem with a div used for text feedback.
On a webpage I have a empty div with an id that has a style applied to it. Javascript is applied to the div when a user enters information into a form. Before the Javascript runs and put text into the div it has only a few pixels in height, when the Javascript adds text the div gains height and pushes the form elements under it down. The form should remain static without moving on user interaction.
With text the div is 29px high. Now I can apply the following style to the div.
height: 29px;
This solution does not seem to be safe as other browsers might render differently or someone might be using a different font size.
What is the best practice solution to setting the height of an empty div to stop it changing size when text is added?
If you set some fixed height (say... 29px) to the div it won't change size...
To better support different font-size, and/or number of lines, you can calculate that special number (29px) as the product of your font-size * line-height * numberOfLinesYouWantToAllow, and set this number as the div's height accordingly.
CSS
height: 29px;
overflow: auto;
Fiddle
I am making a social thumbs up button, and I'm having some issues. Inside my full button I have a second div to hold the right side of it. But it is about 15px tall, even if I use CSS to make it 300px tall. It also won't size with width. It is about 10px away from the right edge of the button container.
If you want the button to expand with whatever content you put in it, then the height property can't be set to an absolute value. Remove this line:
height: 25px;
from the #b CSS class and your button element should expand to contain whatever content you want inside of it. An alternative to the height property is the min-height property so instead of deleting the above line of css you could replace it with:
min-height: 25px;
The same principle applies with the CSS width property.
I have a <button> with an accesskey assgined to it. The accesskey works fine as long as the button is visible, but when I set display: none or visibility: hidden, the accesskey no longer works.
Also tried without success:
Use a different element type: a, input (various types, even typeless).
Assign the accesskey to a label that wraps the invisible control.
Note, I'm not sure if this is the standard behavior, but prior to Firefox 3 the accesskey seemed to worked regardless of visibility.
The behavior you are seeing is correct, you cannot "access" an element that is not displayed. Sal's suggestion will almost certainly work, but may I ask what your purpose is in doing this? There is probably a better way to accomplish what you are trying to achieve. Have you considered using a keypress handler?
I think you probably want to go with the other suggestions if you don't want a keypress handler. Try position:absolute; left:-9999px; to pull your content out of the page. Or use absolute position, change opacity to zero and z-index to -1. By using position absolute the element won't affect positioning of other content on the page, setting opacity will make it not visible. Even with opacity set to zero you can still click on the element and though you cannot see it it may prevent you from being able to click on other elements of the page so use a negative z-index to pull it behind other content.
You can apply a negative margin to push the element outsite of the visible page. I think many browsers and text readers ignore elements with display:none and possibly also visibility:hidden.
Easiest solution: height: 0px; margin: 0px; padding: 0px; in your CSS.
Instead of visibility or display attributes, position the button outside of the page
<button accesskey="a" style="position: absolute; top: -9999px">button</button>
Warning: using left instead of top causes a weird display bug in ie7