I'm working a little dashboard app for one of our internal systems, and opted to add a full-screen overlay when something is loading. It all works fine in Chrome, but on Edge I get something to this effect...
As far as I can tell its caused by having the fa-spin class on my main loading indicator as well as the overlay being transparent. I've removed fa-spin, Edge still has a few weird side effects (that I can live with), but it exacerbated by having the spin effect active.
Questions:
Has anyone encountered this before as my google attempts are returning seemingly futile results. Is there even a fix / work around for this, or is it just Edge being Edge...
Even though I'd love to opt and say to our users to not use Edge / IE, I'd feel like I'm giving up which isn't an option :P
HTML structure (More or less)
<div class="container-fluid" ng-class="{ 'overlay' : vm.isLoading }">
<div ng-if="vm.isLoading">
<div class="overlay-modal">
<p><i class="fa fa-gear fa-spin"></i>
</p>
</div>
</div>
<div class="col-md-7 main">
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-12 container-fluid" ng-class="{ 'blur' : vm.isLoading }">
...
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
<div class="col-md-5">
...
</div>
</div>
I've just tried on my dashboard application using fa-spin and I can assure you that it didn't caused my issues. I've tried fontawesome both from cdn and embedded in my static files. Most probably that weird effect is caused by a number of overlapping CSS/JS styles/class toggling. I hope this answers your question.
Related
I'm using Blazor, and it doesn't look like CSS Push/Pull is working
If I take the stock Microsoft Sample app, and replace the table in FetchData.razor with:
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4 col-sm-push-8" style="background-color:lavender;">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4" style="background-color:lavenderblush;">.col-sm-8 .col-sm-pull-4</div>
</div>
The lavender block is still on the left (aka not pushed)
(sample code from TryIt Tutorial on Push/Pull)
Any ideas?
The bootstrap version in the blazor default website is different from the w3schools link you have shared. The version in default blazer website is 4.3.1 and the one on w3schools is 3.4.1
As far as I can find, there is no .col-sm-push-8 helper class in bootstrap 4. Instead you can use the class order-* as below:
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4 order-4" style="background-color:lavender;">.col-sm-4 .order-4</div>
<div class="col" style="background-color:lavenderblush;">.col</div>
</div>
</div>
Output will be like this:
Here are more details
The above was really close, I just changed to order-sm-xxx
This is a very strange issue. On the Reveal Form (onclick of "Price and Save My Shopping List"), I thought that for some reason the text box and dropdown were disabled. This is not the case; however, it's only allowing me to click on them on the far right of the control--I had to increase the dropdown to "medium" from "small" to be able to interact with it at all. I have no idea why this is happening and couldn't even think of what to Google. So I've looked at everything related to Foundation Reveal to no avail.
Here is the jsfiddle, but although it works on my site, it does NOT on jsfiddle. If you want to see it in action, I'll send you a link to my site.: http://jsfiddle.net/jenborn/TQjm9/
Here is the modal form since apparently I have to include code if I link to a jsfiddle:
<form id="saveShoppingList" action="" method="POST" class="custom">
<div class="small-12 columns">
<div class="small-6 small-centered columns"><h4>Your Shopping List</h4></div>
<div id="makemebold" class="large-4 columns"><!--label for="name"-->Name it: <!--/label--></div>
<div class="small-8 columns"><input type="text" id="name" name="name" /></div>
<div id="makemebold" class="small-4 columns"><!--label for="style"-->Style: <!--/label--></div>
<div class="small-8 columns"><select id="beer_style" class="medium"><? echo $style_opt ?></select></div>
<div id="makemebold" class="large-4 columns">Keep Private:</div>
<div class="small-3 left columns"><div class="switch tiny round"><input id="private" name="private" type="radio"><label for="private" onclick="Off">On</label><span></span></div></div>
</div>
<div class="row">
<div class="small-6 large-centered columns">
<button type="submit" class="button radius">Go</button>
<button type="reset" class="button radius alert">Reset</button>
</div>
</form>
You have some major issues in your use of Foundation's grid. You have subsequent columns adding up to well over twelve, and columns nested within other columns without an interposing row. If you go through the Foundation Docs' grid section and rewrite your code accordingly, I'm betting your issue will be resolved. Pay special attention to the section titled "Infinitely nest your grid".
I would also suggest basic improvements like using a label element for your form labels, as browsers will know how to use them better. And for semantics, of course.
I'm having a very hard time assigning intelligent class names to my DOM elements.
I feel like the example below is something my CSS commonly devolves into:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share"></div>
</div>
</div>
</div>
But then later I'll want to add a different style of "Share" button lower on the page. So I end up doing:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share-tiny"></div>
</div>
</div>
</div>
<div>...More stuff...</div>
<div class="btn-share-big"></div>
Then things spiral out of control from there.
I guess what I'm looking for is: Is there any kind of Chicago Manual of Style for CSS? Like when is a <div> really better described as a <section> or <footer>? How do you intelligently name non-visual DIVs that serve as containers?
My CSS is a nightmare after 2 years of coding without structure. Just about given up and gone all inline on this particular project. :) Tips appreciated.
SMACCS is style guide for CSS, and might be exactly what you're looking for. You can buy it, or alternatively much of the content is available free on the site.
Additionally, BEM is a framework developed by the guys at Yandex, which I found useful reading and is used (somewhat) by InuitCSS, which I personally am keen on.
You should find some answers here, in this article titled: What Makes For a Semantic Class Name?.
In a nutshell, when you can, use the new HTML5 tags:
<header></header>
<article></article>
<aside></aside>
<footer></footer>
for your example, it would be better to do something like this :
<div class="btn-share"></div>
...
<div class="btn-share bigBtn"></div>
and only change the size in the bigBtn class.
Is it possible to prevent certain data from appearing depending on the size of the device?
For example, I'm in the process of removing a table - I'm changing it to a grid made up of <div> tags.
If the user is on a desktop, I'd like to be able to show something like this:
<div class="row show-grid" id="tblheading" naming="tblheading">
<div class="span1">Branch</div>
<div class="span1">Branch Name</div>
<div class="span1">Building</div>
<div class="span1">Building Name</div>
<div class="span1">Room</div>
<div class="span1">Asset Name</div>
</div>
<div class="row show-grid">
<div class="span1">CAN</div>
<div class="span1"></div>
<div class="span1">CAN-Building1</div>
<div class="span1"></div>
<div class="span1">CAN-Building1-Room1</div>
<div class="span1">Value 123</div>
</div>
<div class="row show-grid">
<div class="span1">CAN</div>
<div class="span1"></div>
<div class="span1">CAN-Building2</div>
<div class="span1"></div>
<div class="span1">CAN-Building2-Room1</div>
<div class="span1">Value xyz</div>
</div>
But if they're on a mobile device, I don't want to display the first "row" with the headers. If possible, I'd also like to remove some of the other fields and only show the asset name for mobile devices.
I'm just new to responsive design so I apologize for any remedial questions. If you can point me in the right direction, I'd appreciate it.
Thanks.
If you look here in the Bootstrap docs, it talks about the built-in classes for this.
You could use these classes to show and hide columns or rows based on screen size. If the differences are significant enough, you could create multiple tables and show the appropriate one for each size.
It's just a case of adding a class to the rows/ cells you'd want to hide and then having that class set to display: none in the media queries targeting mobile devices.
I think the twitter bootstrap even has such classes already built in, but can't remember the exact names.
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>