So I'd like to have a popup on my page. I would like to style it with flexbox. I'm using scss to style things and I have mixins for flexbox properties.
The issue I came across is that I want to have flexbox properties applied to my popup such as display: flex which has it's browser variants:
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
When I try to change css to display: none my browser overrides it with display: -webkit-flex; so I'm still not hiding my element. I thought about using visibility but since jquery uses .show and .hide with display and not visibility it kind of seemed like a wrong tool.
Should I somehow override the jQuery .hide() to change the other display properties as well or maybe create the element each time I want to display it and then delete the html of it after submit?
I have my scss with this overlay-content styling:
.overlay-content {
/* this may or may not be here */
/* visibility: hidden; */
#include flex();
#include flex-direction(column);
#include flex-justify-content(flex-start);
}
And I'd have a code which triggers when I want to display my popup:
$('.overlay-content').css('visibility: visible;');
$('.overlay-bg').css('visibility: visible;');
Is it okay to use the visibility css property or should I always use the display property to change the visibility of the element?
What bothers me is that this way I can't use the cool jquery.hide() options for cool user experience
I've run into the same issue and solution I came up with may not be the most elegant but it does the job.
I simply called .hide() in the initialization code of the component. jQuery adds inline display: none to the element, and subsequent call to .toggle() removes it, so specified in the stylesheet display: flex comes into play.
Related
I am using calendarDateInput.js to add dates to my form which is all working. The problem is when my page resizes to mobile and its a much smaller screen size.
At the moment the screen can move to the right due to a hidden element in the
td.calendarDateInput
When you click on the style it shows this grid Which I want to delete as Im not using it for this site.
The . Loads from the calendarDateInput.js file ( I have tried to delete it but that does not solve the problem)
Example below
https://jsfiddle.net/timcross/sj9aronc/4/
(But can’t get the css from the js to show for some reason on JSfiddle)
You could use CSS to set display: none on the elements. There may be a more elegant "catch all" way of doing this but you get the idea...
#eventenddate_ID_Link{
display: none;
}
#eventenddate_ID{
display: none;
}
#eventstartdate_ID_Link{
display: none;
}
#eventstartdate_ID{
display: none;
}
or
#eventenddate_ID_Link,
#eventenddate_ID,
#eventstartdate_ID_Link,
#eventstartdate_ID{
display: none;
}
I am working in a project where theer are many js procedures like the following:
if (show)
$('.some-element').css('display', 'block');
else
$('.some-element').css('display', 'none');
How can I achieve the same thing when I don't want to require that .some-element uses display: block; when visible?
.some-element might for example have been designed to use display: inline-block; or display: flex;.
Limitations:
I don't want the element to take up any space when hidden. For this reason I think that the popular methods visibility: none; and opacity: 0; would not work.
I don't want to save any state in js, for example to remember the original display property value.
Do it like this
if (show)
$('.some-element').css('display', '');
else
$('.some-element').css('display', 'none');
This code ($('.some-element').css('display', '');) will remove the inline display: none property , when it is not needed.
jQuery's already solved this problem for you with toggle, show, and hide:
$('.some-element').toggle(show);
or
if (show) {
$('.some-element').show();
} else {
$('.some-element').hide();
}
What I generally do is use a class for the hidden state, because you do know that when the element is hidden the display property should be none.
.whatever {
// normal rules
}
.whatever.hidden {
display: none;
}
Then you manipulate the visibility of the element by adding or removing the "hidden" class. Since your rules don't affect the visible rules for the element, it can be display: inline; or display: table-cell; or anything else.
This approach can get complicated when there are in-line "style" attributes; that's a reason I don't generally like those in my code.
Another alternative to using display is to give the element an absolute position far off the visible page:
.whatever.hidden {
position: absolute;
left: -10000px;
}
This is useful for form fields that need to be invisible but which also need to actually work as form fields. Internet Explorer in particular does not like invisible (display: none) inputs, but it's OK with ones positioned off the screen.
i need to use slideDown function from jQuery, which requires the content to be animated to be put under class " .hide ",
for .hide I had this in my custom css :
.hide {
display: none;
}
which conflicted with Bootstrap css as it contains :
.hide {
display: none !important;
}
thus when i linked both these stylesheets, slideDown was'nt working, then i tried diffrent variations of .hide in both files, finally removing .hide from my custom css file completely worked,
so my ques is why does .hide in custom css affect the results when the properties defined in Bootstrap ".hide" and custom css ".hide" are exactly same except having " !important " in addition which (i guess, please correct if i am wrong) implies that custom selector would be given preference?
i am trying to share the working version of my code using codepen, but i dont know why my code still does'nt wrok on codepen : http://codepen.io/anon/pen/RaGJwE
The !important is always very strong. It could just be bypassed if you use a display: block !important; afterwards.
The simpliest way would be to not use the "hide" or "hidden" classes which are targeted by bootstrap. Just change the class to "hideit" or something else like in this updated fiddle:
http://codepen.io/anon/pen/MyjXOv
It looks like with the new version 3.0 I have to set the class names of an image to col-lg-4 col-sm-4 col-4 if the image is part of div with the same class names to make the image responsive with all breakpoints.
In version 2 the images CSS properties inherited by default the parent's div properties.
Is this correct?
Bootstrap 4
For Bootstrap 4 use Sass (SCSS):
// make images responisve by default
img {
#extend .img-fluid;
}
answer updated for version 3
Bootstrap 3 has a special class for responsive images (set max-width to 100%). This class is defined as:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Note img tag gets by default:
img {
vertical-align: middle;
border: 0;
page-break-inside: avoid;
max-width: 100% !important;
}
So use class="img-responsive" to make your images responsive.
To make all images responsive by default:
css: add the code below under the bootstrap css:
img {
display: block;
height: auto;
max-width: 100%;
}
less: add the code below in your mixins.less:
img {
&:extend(.img-responsive);
}
Note: requires Less 1.4.0. see: https://stackoverflow.com/a/15573240/1596547
Carousel
img tags inside a carousel are responsive by default
Semantic rules
See also the answer of #its-me (https://stackoverflow.com/a/18653778/1596547). Using the above to make all your images responsive by default turns your images to block level elements. Block level elements are not allowed in paragraphs (<p>), see: https://stackoverflow.com/a/4291515/1596547
As far as i understand the distinction of block-level vs. inline elements is replaced with a more complex set of content categories. See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level.
So in HTML5 a p tag can contain any phrasing element intermixed with normal character data. (see: http://www.w3.org/TR/html-markup/p.html) The img tag is such a phrasing element. The img tag's default value for the display property is indeed inline-block. Changing the display property to block does not violate any of the preceding rules.
Block level elements (display:block) take all the available space of their parent, which seems exactly what you expect for responsive images. So setting display: block; seems a reasonable choice, which has to be preferred above the inline-block declaration.
Images inside p elements which require inline-block as suggest by #its-me (https://stackoverflow.com/a/18653778/1596547) should maybe not be responsive at all.
Excellent suggestion by #BassJobsen, but I'd use display: inline-block; instead of display: block; as that feels more semantic 1 (which means you can be a bit more sure you are not messing up somewhere else).
So, mine would look like this:
img {
display: inline-block;
height: auto;
max-width: 100%;
}
Please do let me know if my understanding is flawed. :)
[1]: For one, images are almost always wrapped in a block-level element if that's the use case; and then again, we also use images in elements like paragraphs (p), where an inline-block would be more appropriate than a block element.
Got here after trying to figure out if it's safe to apply img-responsive for all images.
The answer by #its_me led me to think that it isn't safe to apply this for images under a p element.
This does not seems to be what the bootstrap team think.
This is why images are not responsive by default in bootstrap3:
The summary is that it breaks a ton of unsuspecting third-party widgets (including Google Maps), which understandably don't anticipate the images within them being forcibly resized to other widths. This is why we rolled back Bootstrap v2's "images are responsive by default" approach in Bootstrap v3 in favor of an explicit .img-responsive class.
https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107
How can I use jQuery's slideDown with display: inline-block, as opposed to the default display: block;
Some of the content inside the div I'm using requires it to be so, and the design partly breaks unless I fix it. However, fixing it after the sliding down has finished will be glitchy.
Any ideas?
You should probably wrap the div with display: inline-block, into another div, with simple display: none, that will be the target of your slideDown function.
I made up a demo for you here http://jsfiddle.net/d3BHL/2/
Let me know if it helps