Bootstrap multiple modal - css

Can you help me out solve this modal with bootstrap I really don't have a clue
a multiple modal in one window

Looking at the screenshot, it seems that it is just one modal.
Within the modal there's multiple tabs, but they don't open a new modal, just show different content.

Related

Open Modal at the top of the modal content with CSS

I have a modal where the content of the modal is longer than the modal height so there is a scrollbar
The content of the modal is a survey. If the survey is not taken then the modal opens at the top of the survey
But if the survey has been taken and a person comes back to change their answers the modal opens at the bottom of the survey and people often do not realize they are at the bottom of the survey, not the top
How to open the modal so it opens at the top of the modal content regardless of whether the survey has been taken or not
Is there a way to do this with CSS?
Thank you
I think you can't solve it with css.
But which language do you use?
If you use something like React, that means your programming language is JavaScript, you can use this:
window.scroll(0, 0);
If you set it up at the top of your modal, every time you open it, it starts at the top.
If you use something other language, I think you find a similar code-example.

nz-popover - nzPopoverPlacement, target another element for centering

I was wondering if there was a way to get the nz-popover to center on another element.
I basically have a text input followed by two buttons in a div, I would like to center the popover on the div rather than on the button that triggers it.
I found that i could add the popover to the actual div and then use the nzVisible to trigger it but then i loose the ability to close the popup when the user leaves the area (prob when they hover over the mask or click it). I tried many ways to close it once the popover looses focus etc but that would cause the popover to close if the popover contains a menu or datepicker (when they are used).
Anyone got any ideas? (i used to use angular material and i believe they had something similar (think it was called target or something).
Thanks in advance,
For anyone who is interested in this, we have submitted a PR to provide this feature. You would be able to use this in 9.x (and future) versions.

Bootstrap 4 navbar horizontal overflow

I would like to set up a horizontal navbar to scroll inside the page in the style of uber eats (https://www.ubereats.com/en-EN/new-york/food-delivery/zafis-luncheonette-les/-VDewOpIRMe4mh2tNVzVCw/ ,check the second navbar in which you can navigate throught the different categories of the menu). I managed to create the navbar and set the spyscroll but I don't know how to reproduce the responsive behaviour : how to hide the category from the navbar when it overflow and add it to the "More..." dropdown ?
I hope my question was clear enought !
Thanks for your help
What You are looking for is called a "Priority Navigation". Just Google it, there are plenty of examples and plugins out there.
e.g. https://css-tricks.com/the-priority-navigation-pattern/ or http://gijsroge.github.io/priority-nav.js/

Bootstrap Calendar not modal?

Is there any way to make Bootstrap Calendar not modal? I just want to always display it inside a simple div tag.
I got it to work fine, but I need it to always display.
Thanks for any help!

youtube mobile style navigation with jquery mobile

I currently using jquery mobile and want to achieve the top navigation as youtube mobile with 2 icons at the right side (picture below)
So i try using this code below, but only one icon appeared.
<h1>Youtube Mobile</h1>
Menu
Search
Anyone can help me solve this problem? Thanks
Both buttons are there. They are just being absolutely positioned one on top of another. Add the class 'grid' to your grid button. Then use .grid.ui-btn-right{right:30px;} to position your grid just left of search button. Here is a fiddle demonstrating this http://jsfiddle.net/codaniel/JMKss/1/

Resources