Whenever I open a modal from Materializecss, the scrollbar (my body has inline scrollbar) hides everytime. What should I do so that whenever I open a modal, the body's scrollbar will remain?
<body>
<div id="modal_confirm_block" class="modal modal_dialog">
<div class="modal-content white" id="modal_confirm_co_content" style="padding:0px !important;">
<div id="div_available" class="center-align" style="padding: 20px !important;"> <i class="material-icons md-12 noselect center-align amber-text darken-4" > warning</i><br>
<p style="padding:20px !important;" class="center-align"> Are you sure you want to block this guest? </p>
</div>
</div>
<div class="modal-footer">
<div class="row" style="margin: 0 !important;">
<div class="col s6"> Confirm</div>
<div class="col s6"> Cancel</div>
</div>
</div>
</div>
</body>
Screenshot before opening a modal
Screenshot when a modal opens. Look at the scrollbar it was removed. And I don't like that because the screen always move.
for me, it worked by putting it that way in the css.
body {
overflow: scroll !important
}
Related
Modal Show Code
$("#classification-model").modal({
autofocus: false,
showOnFocus: false
})
.modal('setting', 'closable', false).modal('show');
Modal Hide Code
$('#classification-model').modal('hide dimmer');
Modal Html Code
<div class="ui page modals transition" id="classification-model" style="display: none !important;">
<div class="ui small modal transition visible active" style="position:relative;">
<div class="header">
<div role="list" class="ui large divided horizontal list">
<div role="listitem" class="item"><div class="content">Classification</div></div>
</div>
</div>
<div class="modalLists content classificationModalList">
<div class="ui two column grid" id="classificationModalList">
</div>
</div>
<div class="actions">
<div role="listbox" aria-expanded="false" class="ui selection dropdown main-classificationv2" tabindex="0" style="float: left;">
<div aria-atomic="true" aria-live="polite" role="alert" class="divider default text">Classification</div><i aria-hidden="true" class="dropdown icon"></i>
<div class="menu transition" id="main-classification">
</div>
</div><button class="ui icon left labeled button check-multi" onclick="ApplytoAll(this)"><i aria-hidden="true" class="check icon"></i>Apply to All</button><button class="ui icon left labeled button upload-resume" onclick="ContinueUploading(this)"><i aria-hidden="true" class="upload icon"></i>Continue Uploading</button>
</div>
</div>
</div>
how can i fix this problem semantic ui modal won't close.
modal does not close
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.
I want to add Bootstrap popover with content body in which I want two links named-"Update Profile" and "Logout" in content body. And this Popover I want to apply on a whole div section (div width around 100px and height=70px). So can anyone please help me !! Thank you !!
//Main Row starts of div section where i want to apply popover
<div class="row">
<div class="col-sm-1">
<li><img class="rounded-circle img-responsive" src="https://s3.eu-central-1.amazonaws.com/no-user-image.png" alt="image" style="width: 40px; margin-left: 10px" > </li>
</div>
<div class="col-sm" style="margin-left: 35px">
//second row starts in between a main row(of second column i.e just defined above with margin-left:35px )
<div class="row">
<div class="col-sm"><h4 class="small"> Amy Jackson </h4>
<div class="row">
<div class="col-sm"><h2 class="small" >amy#gmail.com</h2></div>
</div>
</div>
</div>
</div>
</div>
JSFiddle: https://jsfiddle.net/jnv07akx/
I'm using the NVDA Screen Reader to test my GUI for 508/accessibility compliance.
I have "Info Dialog" boxes created with Bootstrap Modal. In Firefox all paragraphs and elements in the dialog get read out loud when the cursor is on them, but in Chrome they do not -- there is silence when pointing at anything inside the modal.
First, test the modal in Firefox in the JSFiddle to verify that the modal's paragraphs/buttons work (get voiced). Then, compare with Chrome: none of the content inside the modal works. The only thing that gets voiced in Chrome is the button label which is outside, not the contents of the modal.
The Bootstrap Modal dialogs look like this,
<div class="modal" id="modalGapInfoSimple" tabindex="-1" role="dialog" aria-labelledby="modalGapInfoSimpleLabel" aria-hidden="true" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin:0 auto;">
<div class="modal-header" style="text-align:center;padding-bottom: 5px !important;">
<div style="text-align:center;">
<div class="modal-heading">
<div style="text-align: left; width: 90%;">
<h3 class="modal-title" id="modalGapInfoSimpleLabel">
<div class="modalHeader">Oops you have Gaps!</div>
<span class="modaltext">
Please edit the timeline to remove the Gaps. You can click on the Gap in your timeline and select the appropriate option presented to you in the prompt.
</span>
</h3>
</div>
</div>
<div class="modal-body panel" style="margin-bottom: 0px !important; padding: 3px !important;">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 text-right">
<div class="col-md-10 col-sm-10 col-xs-10"></div>
<div class="pull-right">
<input value="OK" onclick="handleModalGapInfoSimple();" class="modalButton" data-dismiss="modal" aria-label="Close" type="button">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
NOTE: I entered a bug for NVDA: https://github.com/nvaccess/nvda/issues/9156
I can't get it to work with NVDA in Firefox either. You have aria-hidden="true" and display:block, so the dialog will be visible to sighted users but hidden to screen readers.
Remove aria-hidden.
<div class="modal" id="modalGapInfoSimple" tabindex="-1" role="dialog" aria-labelledby="modalGapInfoSimpleLabel" aria-hidden="true" style="display: block;">
I try create a card with bootstrap+animate.css
PLEASE check with google chorme last version:
<div class="shop-card well">
<h3>title 1</h3>
<a href="/">
<figure class="figure">
<img class="figure-img img-fluid img-rounded" src="http://wewswiderska.home.pl/images/3dspace.html-i1.png">
</figure></a>
<div class="price">1234 <span class="symbol">R</span>
<del>5678</del>
</div>
<form class="hide buys" id="inform-ordering-5" name="inform-ordering-5" role="form" style="overflow: hidden;position: absolute;left:-1px;width: 100%; bottom: -1px;">
<div class="btn-group btn-group-justified">
<a class="btn btn-danger" data-target="#phoneModal" data-toggle="modal" href="#">modal</a>
</div>
</form>
</div>
I want When I move my mouse over the card, A red button appears. And then disappear.
ّI done it.
ّNow when I click on the button, It opens a modal box.
I done it!
But this is my problem:
when I close the modal box, contaners of card floats to left!
here is a demo: https://jsfiddle.net/1pyeg7w2/
I couldn't solved it.
I wrapped your div.shop-card.well content with another div with position:relative rule and it seems to be working
<div class="shop-card well">
<div style="position:relative">
your content here
</div>
</div>