I was not able to find how to change the position for top for the latest reveal modal in foundation 5. Seems I have to make a change in the *.js file, but where?
If you are encountering the issue that the top position of the modal is not matching your needs, try to add the following to your css.
.reveal-modal-bg {
position: fixed;
}
.reveal-modal {
top: 150px !important;
}
This will make shure that your modal and your modal background are always on top - and not somewhere off the viewport.
The thing is that - as I think, reveal positions it self under the position you have clicked with the mouse. So if you open the modal with a click on a link at the bottom of your page, it opens Npx under the point you have clicked. This caused my modal to cinda vanish of the viewport. But I have fixed it with the css code I posted above.
Hope It helps you.
Now to your original Question. If you want to change the Javascript of the reveal modal, you will have to include the single js files of foundation - what means not the foundation/js/foundation.min.js but the single files you need in your project - eg. foundation/js/foundation/foundation.js and foundation/js/foundation/foundation.reveal.js. Then you can make your changes in the foundation/js/foundation/foundation.reveal.js file. I think you are looking for the show method, which starts at Line 300.
Hope this helps, good luck! :)
You can change the Sass variable:
$reveal-position-top: rem-calc(100);
The default is 100 (modal opens 100px from top of screen).
Related
Bootstrap 5 Modal does not work properly on scroll, after adding some content dynamically - which cause Modal's height exceeds than earlier.
Let me explain!
I opened a Bootstrap Modal by clicking on the 'Add Make' button.
Modal just appeared properly, and it have a form having up to 5 inputs.
See attached image
Note: Still modal is working properly on scroll.
Now I just entered values in these inputs. And there are 2 inputs of type 'file', which I am using to upload a Image (One for 'icon' and Other one is for 'thumbnail'). And I am also showing these images underneath each of this input of type file. Which is a kind of preview box for me to show that Image which is going to be uploaded.
As that preview box is hidden by default. And when we select a file then that preview box appears with the selected image.
See attached image
Note: Now, modal height has been exceeded than before. And has gone
out of windows height. And now our modal should scroll along with our
windows scroll-bar on scrolling. (This is the common behavior of
modal)
But, in my case, Modal is not getting scrolled properly. I just scroll down, and it scroll back automatically.
In short, I am facing a scrolling issue with my modal after adding dynamic content to my Bootstrap modal which change modal's dynamic height.
I have tried many solution but still failed to resolve this issue.
I have tried the following:
Adding overflow-y = auto
adding overflow-y = scroll
Note: Even already, I have overflow-y to auto.
I have added following
<div class="modal-dialog modal-dialog-scrollable">
But, still failed !
Finally, I'm here to post my issue!
Please remember to include your code when asking question Bilal. For now you could try adding .modal-dialog-scrollable alongside .modal-dialog in your HTML. Ths will add a scroll bar to the modal.
class=" modal-dialogue modal-dialog-scrollable"
I have an html file being served by Express, which also fetches data from an api. When I click a link in the navbar and switch routes (or the page is reloaded), the top navbar moves right, then left, and I can't figure out how to fix it.
If you look at the JSFiddle (link below), you'll notice that I have links to other pages, like /profile, /about, etc. Each time one of these pages loads, the navbar shifts (it's adjusting for the vertical scroll bar disappearing, then reappearing).
https://jsfiddle.net/h7bjyk63/5/
To mimic the api call, I added a setTimeout. To reproduce the issue and see what I'm talking about, you will probably need to run this code locally on your machine, and then refresh the page.
The strange thing is that this issue only occurs when there's some kind of delay (like an api call, or setTimeout). If I remove the delay and immediately load the content, everything works fine.
Some css code is commented out. The only key element I want to add later is position: fixed to fix the navbar to the top of the page.
How do I prevent the navbar from moving around?
The browser first renders the page without the scrollbar because it simply doesn't have to. Then you dynamically add few long paragraphs into the DOM, which makes the scrollbar to appear. This is what's causing your content 'shifting'.
The scrollbar is adding up to the width of your page. To prevent it from doing so, you need to do this:
html{
overflow-y: scroll;
}
I finally found something that worked, although I'm not 100% sure it's the correct way to do things. I just changed the width under the navbar--site-header class to 100vw instead of 100%.
DVN-Anakin's answer helped me understand the problem (and one possible solution), and this answer provided some additional good solutions.
Background:
- I have a custom SharePoint masterpage with custom CSS.
- I also placed a custom div into the masterpage.html
Problem:
When I use the color picker to change some font color and select "more colors…", the modal dialogue box that comes up is too small and has scroll bars.
I would like for it to auto adjust.
How do I fix this?
I tried using F12 to figure out what CSS element may be affecting it, but I am unable to figure it out.
Note: I tried removing the custom div but the problem persists.
If I get two more reputation points I can upload a picture so you can visually see what I am talking about. A picture is worth a thousand words:/
Or you can go here to see the pic.
UPDATE:
I was able to figure it out:
I update the following custom css with 300px !Important:
#contentBox
{
margin-right:20px;
margin-left:20px;
min-width:300px !Important;
}
And I added the below custom css:
.more-colors-picker
{
margin: 0px;
}
For a complete history and explanation with pictures go here
I've been given the task to try and fix an issue on this site:
[redacted]
When you tap below the bottom half of the screen on an iPhone 5, taps aren't registering and so links can't be clicked, etc.
I tried debugging by alerting what element is tapped, and nothing is registering below the halfway point. If you scroll down the page so the link you want to click is above the top half, it works perfectly fine.
I've searched around and there seems to be some issues with iPhone 5 apps (as far as I can tell, I'm not an app developer!) but I can't seem to find anyone having the same error on a responsive website.
What's going on - is it something to do with the viewport?
It looks like in your DOM you have an <iframe "id=FirebugUI"> that sits right below your element. It has some inline styles that include visibility:hidden; and a z-index of a super large number which means it's a hidden element that is on top of everything. You have some options:
1 - Get rid of it if you're familiar with what firebugUI is and can comfortably remove it all together. then you're good to go. It's probably being injected with some javascript.
2 - display none - you can add this css to remove it:
#FirebugUI {
display: none !important;
}
You'll need to add the important to the value so it overrides the inline styles. This may render the FirebugUI useless though.
3 - z index - you can update the z-index by setting it to like 0. But that will probably render this thing useless. so you might as well just remove this plugin if you're going to do that. You'll also need to use the !important value to override the inline styles.
I was having the same problem as this question:
jQuery Mobile 1.1.1 Custom Select Menu - Placeholder Text not Visible
The above question solved my problem by telling me to use 'http://code.jquery.com/mobile/latest/jquery.mobile.min.js'. That solved my original problem but caused another.
The select menu is always displayed and doesn't center on the select item like it did before.
After:
Does anyone know how to fix this. I think I might be able to hide and show the menu if that was the only problem that I was having, but even when selected it is not in the right position. It should be centered over the select element both horizontally and vertically (if given enough vertical space).
This is caused by the latest release of JQuery, but I also can't download 1.1.1 because it causes the original problem that I had which was solved in the other question.
Looks like the menu is displaying relative to the rest of the content - Try adding a css line on there
position:absolute;
on the menu structure - Another good way to test this would be to load up your site in google chrome and use firebug to see why the menu is positioning lower than the "click point." Just on glance it appears that the menu is appearing relative.