I'm trying to modify Bootstrap's default buttons so that they look like they are de-pressing.
The effect can be seen here: http://www.esecamalich.com/blog/before-&-after/
I've been working on it with the Less framework, and so far I can make everything happen EXCEPT make the button move down 3 pixels on active. This essentially kills the illusion and is incredibly frustrating.
For instance, this is what my Active State CSS/LESS looks like:
.btn.active,
.btn:active {
top: 3px;
#gradient > .blockyShadowActive();
}
Now if I change top to margin-top, then it works, but has the unfortunate side-effect of moving down everything below it, which is silly. I've tried everything I can to sanitize the effect and see what is preventing it, but I can't figure it out. Some things I've tried:
Pulling the button out of all containers so that only body level properties apply
Removing/Commenting out all styling from the buttons except for the top property
Tried sanitizing the buttons and containers on a clean version of Bootstrap with pure CSS (no Less), removing every property and still can't get it to move down 3 pixels (or any pixels for that matter)
For the life of me I can't figure out what is preventing this from happening. Anyone seen this kind of thing before?
Related
On one of my sites, while the page loads images appear much bigger than they are supposed to (as specified in the CSS)
I was thinking that it might be something related to the size of the images, but no.
I tried changing the 'display' property but that did not help either. I'm thinking that perhaps it's some JS related resizing issue, but I don't really know how to test for it. The blocks are powered by OWL-Carousel, but I tried searching for such an issue and came up empty handed.
** Thanks for the answer - which was given by Benjamin. The issue was caused by FOUC, Above the fold rendering of the elements. Once I added the "critical CSS" (that loads before OWL carousel actually does), the issue dissepated.
What you're dealing with is something akin to what's known as FOUC (Flash of Unstyled Content) - though the cause for you appears to be related to your "owl carousel" which takes a moment to initialize, and your site relies on that for the actual final appearance.
You don't have any CSS that gets the layout close enough before the Owl Carousel loads in. If you applied something like the following CSS to it, it would get it pretty close (at least on desktop, I didn't check the actual appearance before/after on mobile, but that could be amended with an #media query)
.scolumns {
display: flex;
overflow-x: hidden;
}
.scolumns > .column {
width: 248px;
flex-shrink: 0;
padding: 10px;
}
Basically, if you rely on JavaScript based DOM manipulation for your final layout, you'll either want to apply some CSS that gets it close first (and doesn't affect the final layout, hence the Direct Child Combinator above: > - your carousel adds containers, so it won't affect it after it's done loading") - or use some kind of loading animation on the parent element that you hide when it's fully loaded.
So this is an "issue" that I've been experiencing for a new website that I've been building.
It utilizes WP Bakery's Visual Composer Row widget, and occurs when the CSS/JS kicks in to expand the header row from default to stretch.
Because the header row has a background colour, the initial header looks like this. However, when the CSS/JS kicks in to expand the row, it then "flickers" and looks like this.
This obviously looks very unprofessional, and was wondering can suggest anything that I could try.
Would appreciate any assistance.
Thanks!
This is similar to other FOUCs (Flash of Unstyled Content). You have a few options.
One is to add the stretch attributes to the element in question specifically. Basically take: .stretch { width: 100%; margin: 0 auto /* … whatever */ } and apply those styles to your element, ideally by ID: #my-header { width: 100%; margin: 0 auto /* … whatever */ } and put them in your header so they're loaded right away, perhaps in your Customizer.
Another option is to find another way to add the stretch class to that element manually. I'm not familiar enough with VC to give examples (though, to be honest the few sites I've made that use it haven't seemed to have this issue?). The benefit of this would be that you don't need to duplicate CSS attributes, and don't need to wait to JS to apply the class, which probably isn't happening until the entire footer is loaded.
Another option is the all-too common (and arguably unnecessary/annoying) "full page loader". This is the option I'd avoid if I were you, but you can plop in a full screen white page with your logo and a spinner that goes away when the entire markup is loaded or when all resources are fetched. This delays users accessing your site, and most users would prefer to see a FOUC than a loading screen, based on my limited testing.
Example: https://i.imgur.com/Xd0XkmE.png
I have tried fxFlexAlign - fxLayoutAlign on the parent, giving it an ID and using display:flex + justify-content:center with !important on everything.
The thing is -- all of the above do something to it, it reacts to the CSS and FlexLayout directives but the thing still looks obviously misaligned no matter what.
Upon inspection it becomes clear that it grows from the right bottom corner of its 'container' and simply does not care about aligning in any way.
Is there something I'm missing on dealing with these? I've looked through the documentation + stackoverflow + googled it and can't find a thing.
You mention in a comment in the answer you posted that you are changing font size and that triggers the problems. I think I recall noticing a bug with this - at least I know I've run into it. In addition to font-size you need to adjust width and height accordingly. Practically speaking, it's probably best to define classes to handle all that and apply them to the mat-icon elements. For example:
.mat-icon-16 {
font-size: 16px;
width: 16px;
height: 16px;
}
<mat-icon class="mat-icon-16">help<mat-icon>
Note that line-height also plays a roll but by default it is '1' so you shouldn't need to change that.
Ended up changing everything to font-awesome with svg icons, a bit more tedious importing each icon but keeps the bundle small and can't really argue with the value of svg. I'm not touching material icons in the next decade.
I had this working before, and then I upgraded a bunch of packages and rearranged some css, and now all of my ng-bootstrap component styles are ruined.
Please see this picture for a demonstration of the problem:
http://i.imgur.com/lrGnRht.png
As you can see, the NgModal is being added to the DOM but it is essentially invisible unless unless I manually add "opacity: 1" to my <ngb-modal-window></ngb-modal-window> . Also the background/backdrop isn't darkened like it should be. Also the modal isn't vertically centered - half of it is floating off the top of the screen. Lastly, the datepicker styles are trashed also. I don't know what went wrong with the css styles, but I removed all possible global styles and this still occurs, so I'm at a loss for words. Any ideas on what styles might be causing this?
This is using Angular#2.4.2, ng-bootstrap#1.0.0-alpha.20, and bootstrap#4.0.0-alpha.5
Long story short, I guess bootstrap#4.0.0-alpha.5 is no longer supported.
i created a page on which i tried to attain the effect of bottom aligned tool bar like the one face book has. For that i made a div with highest z-index set the position to fixed and set the bottom 0 like
#bar
{
z-index : 11;
position : fixed;
bottom : 0;
height : 50;
left : 0;
right : 0;
}
it works fine but while scrolling it seems like the page takes time rendering, like the page is heavy, scrolling is smooth but the page rendering is just a little slow that produces a not so good scroll effect. Did anyone know whats up...
or did you even get me :p
Position:fixed in itself shouldn't be causing these problems.
It sounds like the browsers are just being slow in rendering your page. Is the page large or complicated? This could be caused by over complicated HTML, CSS and especially Javascript.
Try simplifying (or disabling, for JS) each one in turn.
(I'd look hard at any JS events or and CSS that uses the * selector.)
If that bottom bar is at the bottom of the HTML-code, it will be loaded (and rendered) after everything else. If the rest of the page is big (silly code, complex javascripts or giant images), this will probably make everything worse, as styles are applied more or less continously as the page loads.
Simple way to check this: Recreate the bottom-bar at a super simple page and see if you get the same effect. If so, your page is probably to big or complicated.
Or your computer is just plain slow :-)
If you've got a "background-attachment: fixed" rule that may also be causing similar problems. Another issue you have to be careful about is IE6 doesn't support position: fixed, so you have to do it with JavaScript - which also slows down the website.