I want to move or replace .pac-container, the problem is that pac-container is somwhere in deep in my HTML and i want to move whole div to my bootstrap modal, how can i do it?
<div class="pac-container" style="display: none;"></div>
My HTML
<body>
<div class="modal">
<input name="adress"></input>
<!-- I want to move container right here -->
</div>
<div class="container">
Blaaa
</div>
<!-- Concurent position of pac container -->
<div class="pac-container" style="display: none;"></div>
May I guess that the main issue is that the autocomplete-input is placed in the modal and the suggestions(placed in the .pac-container) will appear behind the modal?
When yes: moving the .pac-container wouldn't help here, the result would be a incorrect position.
Try using a z-index for the .pac-container that is higher than the modal's z-index(currently it's 1050)
<style>
.pac-container{z-index:1051;}
</style>
Related
On my website https://bennetdev.de I have a fixed-top navbar which seems to be wider then my actual html tag. I think it is a problem between the navbar and my bootstrap modal but I don't know how to solve it. Due to the wider navbar a white space on the right side is shown when you visit the page, but disappears when opening the modal (through the contact button) and is not existent anymore until you refresh the page. Anyone knows how to fix this?
EDIT: There is no overflow because I hide the x-overflow on my body element but what I mean is the white bar on the right side, which would be a x-overflow without me hiding it
Ahh, yes, I see it now. It seems to be caused by the negative margins on a "row".
In your case, the div <div class="project row" >.
For bootstrap rows and columns to work correctly (ie. negative margins), the parent of a "row" should have the class "container". See the docs here.
eg.
<div id="projects" class="container">
<div class="project row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
<div>
You can use max-height: 210px; to define how much height do you want for your nav bar.
Anyway I recommended to upload some code that we can see.
When I click on an icon, a popover shows.
I realize that there is delay set with the popover, but when I scroll, the popover moves as well.
How can I make it stay where the icon is and not work with scroll?
<md-badge class="current-plan-type__icon--badge" direction="right" [mdPopover]="tootltipTemplate" delay="10000"
popoverTrigger="MouseEnter">
<i class="cui-icon icon icon-info_16 current-plan-type__icon--info"></i>
</md-badge>
Just move tootltipTemplate outside of your scrolleable div it will be called even if is not at the same level.
I think you have this problem: the popover template inside of the scrolleable div.
<div #root>
<div #scrolleable>
<div #tootltipTemplate></div>
</div>
</div>
Then my suggetion is: moving out the popover template of the crolleable div.
<div #root>
<div #scrolleable>
</div>
<div #tootltipTemplate></div>
</div>
I hope it works for you.
I've got a problem with my header menu. The menu div is inside a container (width 1240px) and the div is 100%. I would like to have a full green colored menu (like above from Stack Exchange).
Can I change it with CSS? Could anybody help me please?
You'll need to take the menu div out of the container and place it above.
If you are using bootstrap, you could use container-fluid, if not follow the answer of Jordan and move the menu out of the container
Assuming this is your situation
<div class="container" width="1240px">
<div class="menu" width="100%">..</div>
</div>
You can either do the following
<div class="menu" width="100%">..</div>
<div class="container" width="1240px">
</div>
or
<div class="container-fluid">
<div class="menu" width="100%">..</div>
</div>
I have a logo image in my header and I have the standard code in there, the browser source code even shows it, but the link isn't going anywhere. Please see below:
<img class="img-responsive hidden-xs" src="img/sitewide-images/logo.png" width="106" height="106" alt=""/>
Here is a link to it live on a testing server: http://wsieworksstaging.com/ptmw/index.html
Bootstrap should be container > row > column
You didn't place those columns within a row, so the row below isn't clearing and is overlaying it. Try this:
<div class="container">
<div class="row"> <!-- wrap with a row to force the content below to clear -->
<div class="col-md-2 col-sm-2">..</div>
<div class="col-md-10 col-sm-10">..</div>
</div>
<div class="row">
<nav class="navbar navbar-default navbar-inner" role="navigation"> .. </nav>
</div>
</div>
From The Documentation
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Because your div with the class row is sitting on top of it and blocking any clicks. Add clear:left to have it get out of the way, and the link will become clickable.
You can also try giving that anchor an absolute position and a z-index value.
a[href="index.html"] {
position: absolute;
z-index: 1;
}
I need to do something like this using Boostrap. "Fluid" content on the page with two widgets inside it - first at top-right and second at left-bottom.
Widget1 is easy - I just needed class="pull-right". But what to do with the second one to get it to the bottom of the page keeping "Content" floating around?
style="bottom:0;"does not work:
Having this code
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
<div class="offset1 span8 pull-left" style="bottom:0;">
... Widget 2...
</div>
.... a lot of content ....
</div>
</div><!--/.fluid-container-->
I have this as a result:
Moving Widget 2 down also does not help:
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
.... a lot of content ....
<div class="span8 pull-left" style="bottom:0;margin-left: 0;">
... Widget 2...
</div>
</div>
</div><!--/.fluid-container-->
Any ideas how to do that without dirty hacks (for example I could use JavaScript to fix Widget2 position)?
Or (ok, ok) with them?
From all I have read you cannot do exactly what you want without javascript.
If you float left before text
<div style="float:left;">widget</div> here is some CONTENT, etc.
Your content wraps as expected. But your widget is in the top left. If you instead put the float after the content
here is some CONTENT, etc. <div style="float:left;">widget</div>
Then your content will wrap the last line to the right of the widget if the last line of content can fit to the right of the widget, otherwise no wrapping is done. To make borders and backgrounds actually include the floated area in the previous example, most people add:
here is some CONTENT, etc. <div style="float:left;">widget</div><div style="clear:both;"></div>
In your question you are using bootstrap which just adds row-fluid::after { content: ""} which resolves the border/background issue.
Moving your content up will give you the one line wrap :
http://jsfiddle.net/jJNPY/34/
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
.... a lot of content ....
<div class="span8" style="margin-left: 0;">
... Widget 2...
</div>
</div>
</div><!--/.fluid-container-->
I understand that you want the Widget2 sharing the bottom border with the contents div. Try adding
style="position: relative; bottom: 0px"
to your Widget2 tag. Also try:
style="position: absolute; bottom: 0px"
if you want to snap your widget to the bottom of the screen.
I am a little rusty with CSS, perhaps the correct style is "margin-bottom: 0px" instead "bottom: 0px", give it a try. Also the pull-right class seems to add a "float=right" style to the element, and I am not sure how this behaves with "position: relative" and "position: absolute", I would remove it.