I have a webpage with a loading menu that greys out the background while the loading menu is shown. The menu is last in the document as to be on-top of the rest of the page. However, when using Google's Material Icons, the icon appears above the loading menu.
My guess would be that the icons load last, and as such are infront of static parts of the webpage.
I would expect and prefer the icon to be behind the loading menu. How could I achieve this?
In addition, I use bootstrap. I do not believe that my issue resides with bootstrap, however it may be crucial to understanding the code snippits.
Snippit of buttons: (I included more than neccesary incase my issue resides outside the icons)
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Link:</span>
</div>
<input type="text" class="form-control" id="studentLink" value="<?=studentLink?>" readonly>
<div class="input-group-append">
<button class="btn btn-light h-100" onclick="copyLinkToClipboard()">
<span class="material-icons"style="font-size: 1em">
content_copy
</span>
</button>
</div>
</div>
Snippit of Loading Menu:
<!-- Loading Alert -->
<div class="d-flex justify-content-center align-items-center" style="position: absolute; top:0px; width: 100%; height: 100%; visibility: visible" id="loadingAlert">
<div class="bg-light opacity-75" style="position: absolute; top:0px; width: 100%; height: 100%"> </div>
<div class="shadow col-6 card bg-info text-white">
<div class="card-header">
<div class="d-flex">
<div class="me-2 spinner-border align-self-center"></div>
<div class="vr"></div>
<h3 class="mx-2 align-self-end">Loading:</h3>
</div>
</div>
<div class="card-body text-center">
<h1>Creating Session</h1>
<h3>Please wait</h3>
</div>
</div>
</div>
Thank you #Kip for the answer.
Add the css style 'z-index' to the loading element.
Example (Based upon my code snippit):
<div class="d-flex justify-content-center align-items-center" style="position: absolute; top:0px; width: 100%; height: 100%; visibility: visible; z-index: 1000" id="loadingAlert">
...
</div>
Note the section style="z-index: 1000".
This feels like a very clunky solution, as why would you need to update the z-index, but here the solution is.
Related
I have a bootstrap container in which I have 1 row with 6 columns, like so:
<div class="container-fluid m-0 p-0 bg-primary">
<div class="row">
<div class="card col-2">
</div>
<div class="card col-2">
</div>
<div class="card col-2">
</div>
<div class="card col-2">
</div>
<div class="card col-2">
</div>
<div class="card col-2">
</div>
</div>
</div>
In each column I am adding some additional cards with text content in them. When the browser is fully expanded, the text looks nicely.
However, when I shrink the browser to half size, the entire container shrinks... so the 6 columns are now tiny and unreadable. Not only that, my inner components end up growing vertical scrollbars which makes it look horrible.
Is there a way to keep the container from shrinking when you shrink the window? I want the size to be fixed.
This means that it is possible that there will be a horizontal scrollbar since the container won't fit on the browser screen if it is shrunk.
Thank you. I found an answer from 2012-2013 about shrinking but I want something more updated.
I found the solution myself (based on my device). I didn't find how to programmatically find my device screen width, but in either case, absolute positioning with pixels seems to be the way to go.
<div class="container-fluid m-0 p-0 bg-primary" style="position: absolute; width: 1518px;">
<div class="row">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 0.0px;">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 253.0px;">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 506.0px;">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 759.0px;">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 1112.0px;">
<div class="card col-2" style="position: absolute; width: 253.0px; left: 1265.0px;">
</div>
</div>
I'm writing a code for website with accordion patters and can't figure out how do I remove border from the "bottom section" of the accordion pattern. I need to have borders on top section that opens the rest of accordion patter onclick. Anyone knows? Tried searching for it and could not find anything.
Here's my code :
<section id="specification" class="mt-5 pt-4">
<div class="container-fluid container-fluid-shorter">
<!--Accordion wrapper-->
<div class="accordion md-accordion accordion-1" id="accordionEx23" role="tablist">
<div class="card my-4">
<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading96">
<h4 class="text-capitalize mb-0 py-1">
<a class="text-black font-weight-light" data-toggle="collapse" href="#collapse96" aria-expanded="true"
aria-controls="collapse96">
kupní typ
</a>
</h4>
</div>
<div id="collapse96" class="collapse show" role="tabpanel" aria-labelledby="heading96"
data-parent="#accordionEx23">
<div class="card-body">
<div class="row">
<div class="col-md-8">
<h6 class="font-weight-light black-text text-grey mb-5">Sponsorship</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I tried adding additional CSS such as :
.card-body{
border: none !important;
}
.collapse{
border: none !important;
}
I expect the above CSS properties to overwrite the border but it doesn't seem to make any difference. Anyone knows how can I remove the border for the section below the clickable text?
In order to remove the border, you have to target .card-header,
so the css would look like:
.card-header {
border-bottom: none !important;
}
for the bottom, you have to edit the card itself:
.card {
border: none !important;
}
please let me know if this works :)
I am still learning bootstrap and have gone a little far to create a page, I am stuck on 2 things, first one is the phone image at the top section, on my screen it is fine which is 24" with 1600 resolution, but on 15" lcd the phone cuts in half, can someone tell me what to do ? how to fix this ? secondly the images , sections look so magnified so big, does it have any fix ? should I place it in a container ?
Live page : https://babaraliseehar.com/chet/
I have created a single bootstrap page but I am having a little issue in responsiveness.
<section class="section hero-section position-relative" id="a">
<div class="container-fluid position-absolute h-100 hero-bg mob-hid">
<div class="row align-items-stretch h-100">
<div class="col-md-6 hero-left"> </div>
<div class="col-md-6 hero-right"> </div>
</div>
</div>
<!-- <div class="col-md-7 p-0 hero-left-img wow fadeInLeft mob-hid" data-wow-delay=".1s">
<img src="assets/images/front-left2.png" alt="">
</div> -->
<div class="col-12 p-0 hero-mob d-none m-block">
<img src="assets/images/front-left2.png" alt="">
</div>
<div class="container">
<div class="row align-items-stretch">
<div class="col-md-6 offset-md-7 hero-right-text wow fadeInRight" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInRight;">
<h1>Get better, together.</h1>
<p>A professional development social network <br> for today's audience: share what you are <br> doing, in the moment, to get better. </p>
<div id="form_first">
<div class="beta-available">
<p><strong>Join the list for the next beta release!</strong></p>
<form method="post">
<div class="form-bx">
<input type="email" name="email" class="input-bx input-brd txtEmail" placeholder="Email Address" id="txtEmail_first">
</div>
<div class="form-bx ">
<button type="submit" name="submit" class="btn button-blue btnValidate_first ">
<span class="">Sign Up</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
image is croped because you used background-size: cover;. if you don't want image to get cropped,
use:
background-size: contain;
also in your layout, image should be on right. so add:
background-position-x: right;
to your image as well.
Also if you want your image to crop, but you want the right side to be always visible, let it to be cover, and use background-position-x: right; to crop only left side.
Codepen: https://codepen.io/sahandz/pen/zRzoEP
I'm trying to create a sidebar that collapses at max-width 766 px, and a hamburger button that makes it visible again onclick.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="container-fluid">
<div class="topdiv">
<h1>Dinner Planner</h1>
</div>
<div class="row dish-item-view">
<button type="button" data-toggle="collapse" data-target="#sidebar" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 sidebar" id="sidebar">
<div>
<div class="noofpeople">
<div class="row noofpeople-wrapper">
<h4>My Dinner</h4>
<label>People <input type="number" class="form-control"></label>
</div>
</div>
<div class="dinneroverview">
<div class="dish-overview-header">
<span class="dish-name">Dish name</span><span class="cost">Cost</span>
</div>
<div class="price">
<span id="pricetag">SEK 0.00</span>
</div>
<div class="confirm">
<button type="button" class="btn btn-default">Confirm Dinner</button>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 main-bar">
<div class="row dishsearch">
<h4>Find a Dish</h4>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-padding">
<input type="text" class="form-control" value="Enter keyword">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-padding">
<select class="form-control">
</select>
</div>
<button type="button" class="btn btn-default">search</button>
</div>
<div class="row dishreel">
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<!-- The application JavaScript code -->
<script src="js/app.js"></script>
<script src="js/model/dinnerModel.js"></script>
<script src="js/view/sidebarView.js"></script>
CSS:
#media (min-width:767px){
#hamburger{
display:none;
}
.sidebar{
height:100%;
border-style:solid;
display:block;
}
.collapse{
display:block;
}
}
#media (max-width:766px){
.sidebar{
display:none;
}
}
.dish-item-view{
height:100vh;
}
I'm running into two main problems:
When making the window width small (which collapses the sidebar) and then clicking the button once to make it pop up again (this time not as a sidebar but as a row at the top of the page), everything works fine. But when I enlarge the window again (with the sidebar expanded/visible) the sidebar has lost its full height and only takes up its own height, not the full height of the page like before.
(Reload the page). Make the window width small again, then click on the hamburger button to make the sidebar visible, and then click on it again to hide it once more. If you now enlarge the page, you will see that the sidebar does not become visible/expand again. It should.
How can I fix this? I've tried all sorts of CSS rules but it seems like I can't make bootstrap work for me in a good way. I would like to avoid having to write this myself in javascript since I want to learn to use existing libraries.
Adding !important to some of the CSS rules did the trick:
new CSS:
#media (min-width:767px){
#hamburger{
display:none;
}
.sidebar{
height:100% !important;
border-style:solid;
display:block !important;
}
.collapse{
display:block;
}
}
#media (max-width:766px){
.sidebar{
display:none;
}
}
.dish-item-view{
height:100vh;
}
The reason this works is that bootstrap injects css into the html when clicking the hamburger-button which overrides other rules on the element, unless !important is used. Also,
I'm trying to have a responsive input and a logo ontop of it using bootstrap. I tried every thing within my knowledge to do it. Columns (gridsystem), resize, etc. No matter how I do it. It turns out buggy. i.e when I size the browser window down it starts getting out of order.
Resize the result window to see how everything is pulled out of porportion.
http://jsfiddle.net/Cbuyn/
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="http://placehold.it/500x300" class="img-responsive" alt="Responsive image">
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
This is done with Bootstrap 3. I'm out of ideas..
If you want to center your image (assuming you add an id="main-img" to the image):
#main-img {
margin-left: auto;
margin-right: auto;
}
jsFiddle Demo (image centered)
If you want to make the image full width:
#main-img {
width: 100%;
}
jsFiddle Demo (image full width) (Updated as per comments)
I see from the comments that you have a solution. That said, the following works fine without adding the additional classes. It will be 100% at xs and sm sizes, then beginning at the md size, it will be 50% of the container. Remember, responsive isn't about people resizing their browser, it's about different device sizes. Most people (other than developers who build responsive websites and are trying to test them) don't resize their browsers when they are looking at a page. Also, if you're on a mobile type device, in most cases you can't resize your browser. So, if you want the 992px (md) and up viewports to see the input/image at only 50% of the container, your code was perfectly fine.
DEMO
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="http://placehold.it/500x300" class="img-responsive" alt="Responsive image" />
</div>
<div class="col-md-6 col-md-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
As #dan stated, if you want the image to be the same width as the input you can add:
img {
width: 100%;
}
or to center it and make it remain no larger than it's max-size:
img {
display: block;
margin: auto:
}