I have a Div element that pops up when clicking on a icon.
This works fine on desktop. But when I'm trying it on mobile it appears underneath the content instead of above, although the elements z-index is set to 5000.
It seems like it only ends up underneath when running on a webkit-based browser. First I thought it was depending on the height of the page but it's only when i'm running chrome in device toolbar and all phones that I've tested.
It should look like this. It's a popup that appears when you click the Info button in the footer:
The css for the box/popup is element with class cms-footer-info is the popup/box:
position: fixed;
background-color: #444445;
color: #fff;
height: auto;
display: block;
left: 1%;
bottom: 60px;
padding: 2%;
z-index: 4000;
Html for the the footer :
<div class="footer">
<div class="footer-column-one">
<i class="fa fa-globe fa-3x" aria-hidden="true"></i>
<div class="cms-links">
<h6>Document identity</h6>
<div>
<span class="cms-footer-info-0-label">something</span>
<span class="cms-footer-info-0-value">else</span>
</div>
</div>
</div>
<div class="cms-footer-center">
<div class="cms-footer-center-0">Some Text </div>
</div>
<div class="footer-column-three">
<i class="fa fa-info-circle fa-3x" aria-hidden="true"></i>
<div class="cms-footer-info">
<h6>Document identity</h6>
<div class="cms-footer-info-0">
<span class="cms-footer-info-0-label">Publ. no. </span>
<span class="cms-footer-info-0-value">T810181</span>
</div>
<div class="cms-footer-info-1">
<span class="cms-footer-info-1-label">Label</span>
<span class="cms-footer-info-1-value">Value </span>
</div>
</div>
</div>
</div>
The content underneath the pop up has static layout and has no z-index:
The css:
margin-bottom: 65px;
margin-left: auto;
margin-right: auto;
max-width: 700px;
display: block;
The html:
<div class="container">
<div>
Alot of text. Wrapped in spans, divs and so on.
</div>
</div>
Any tips are greatly appreciated. Thank you!
Link to working example: Working example
When you have loaded the site. Try pressing the info or globe icon in the bottom. It will show you the relevant popups, now open the developer console and choose toggle device toolbar top left corner in the developer console in Chrome or visit the url on a phone.
take out the overflow:hidden; from the footer. it solved it for me.
Related
My HTML
<div class="col-sm-5">some content</div>
<div class="col-sm-1">
<button class="fa fa-plus-circle" type="button"></button>
</div>
<div class="col-sm-6">some other content</div>
My css
position: absolute;
bottom: 10px;
left: 0px;
right: 0px;
color: #fff;
margin: 0px auto;
text-align: center;
font-size: 40px;
I want to make the plus button to come down. By the above codes it will come to the exact correct position however col-sm-6 sticks itself to the left because the button is absolute.
I'm using bootstrap 3
How can I fix this issue?
Thanks
Maybe try this.
<div class="row">
<div class="col-sm-5">some content</div>
//put all other content you want in a grid-1 here
</div>
<div class="row">
<div class="col-sm-12">
<button class="fa fa-plus-circle" type="button"></button>
</div>
<div class="row">
<div class="col-sm-6">some other content</div>
//content for the remaining grid-2
This should probably make your design as
-- Grid 1
-- Plus Circle
-- Grid 2
The mistake you are doing is that you aren't following bootstrap grid convention here.
Also, For some reason, you haven't described class, ID, Tag on which you have added CSS.
Lastly, Make sure your CSS is below bootstrap CSS.
I write these code and made 2 grid using bootstrap.Now i want to the backgound image in the wrapper class.I tried it but i din't get success. Any idea about this?
.wrapper {
background-image: url(http://www.steamatic.com/images/footer-pattern-grey.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="wrapper">
<div class="col-md-6">
<div class=" flex">
<div class="media-left"> <i class="fa fa-home fa-3x"></i></div>
<div class="media-body">
<h4>Resenditial Services</h4>
</div>
</div>
<p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
</div>
<div class="col-md-6">
<div class=" flex">
<div class="media-left"> <i class="fa fa-building fa-3x"></i></div>
<div class="media-body">
<h4>Commercial Services</h4>
</div>
</div>
<p class="para">We've been providing commercial clients money-saving and asset-protecting services for nearly five decades. Steamatic's full range of restoration and cleaning services means we have your business covered.</p>
</div>
</div>
I get the image in my background but i want to get full width image what i do?
U can show the image i upload
If you read the documentation of bootstrap, the cols are always wrapped in a row , if you want to wrap it in your own .wrapper class, then add
.wrapper{
overflow: hidden;
}
or you can try float: left; to .wrapper , its your choice
Add overflow: auto; to your .wrapper element.
You have to add overflow: hidden to your .wrapper class parent element of the two floating elements inside of it. So that if you add background image on your .wrapper it will show. Because, bootstrap grid classes are using float.
I have a weird issue with the text under the icon bar not being centered under the icons.
code example
<div class="row">
<div class="small-12 columns">
<div class="icon-bar five-up small">
<a class="item" a href="/index.html">
<i class="fi-home"></i>
<div>
<label>Home</label>
</div>
</a>
<a class="item" a href="/cart.html">
<i class="fi-shopping-cart"></i>
<div>
<label>Cart</label>
</div>
</a>
<a class="item" a href="/pages/about-us">
<i class="fi-info"></i>
<div>
<label>About</label>
</div>
</a>
<a class="item" a href="/pages/contact-us">
<i class="fi-mail"></i>
<div>
<label>Contact</label>
</div>
</a>
<a class="item" a href="/account/login">
<i class="fi-torso"></i>
<div>
<label>Account</label>
</div>
</a>
</div>
</div>
</div>
I've tried to center the labels with no luck. Has anyone had any issue with this before. Can't post a screenshot since it's a new account. but the contact label and account label seem to start on the left of the icon and go right instead of the start of the actual icon box.
Ok your problems is about CSS in foundation. the property "padding" here:
.icon-bar > * {
font-size: 1rem;
padding: 1.25rem;
}
To fix that, you need to add a media query for mobile. Maybe something like:
#media (max-width: 400px) {
a.item {
padding-left: 0;
padding-right: 0;
position: relative;
text-align: center;
}
}
Change the value 400px of your resolution. If its doesn't work because CSS style is overrite by another.. change padding-left and padding-right for:
padding-left: 0 !important;
padding-right: 0 !important;
Check this JSFiddle
I'd like to center a vertically aligned button in a div using bootstrap
<div class="row" >
<div class="col-xs-2">
<button class="btn" style="color: #660066;">
<i class="fa fa-arrow-left" data-ng-click="onClickBack()" ></i>
</button>
</div>
<div class="col-xs-10">
<h4> {{rootNode.nodeName}}</h4>
</div>
</div>
As you see, I have two columns,one containing a button in the left, another containing Label. When label.length is increased then the div'll change the height -> I want the button to be always centered in the div.
You can use display:inline-block and vertical-align:middle:
.col-xs-2, .col-xs-10 {
display: inline-block;
float: none;
}
.col-xs-10 {
vertical-align: middle;
}
Here's a demo fiddle.
Though you will have to make sure to remove the white space in between the column <div>s in your markup. Refer to this answer for more information on that.
I used this. Check the "style property". That will do the trick.
style='position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)'>
<span class='glyphicon glyphicon-refresh spinning'>
</span> Loading...</button>
The problem is that the padding on the H4 is more than the button. You can wrap you button inside the H4 (perhaps not the best practice), or change the button padding in your CSS..
<div class="row">
<div class="col-xs-2">
<h4>
<button class="btn" style="color: #660066;">
<i class="fa fa-arrow-left" data-ng-click="onClickBack()"></i>
</button>
</h4>
</div>
<div class="col-xs-10">
<h4> {{rootNode.nodeName}}</h4>
</div>
</div>
OR, leave the button as is, and apply this CSS to the H4..
h4 {
margin-top: -0.5em;
}
http://bootply.com/106259
I am using Bootstrap and Font Awesome to make a table like the one from FAQ zalando.
So on the left side, there should be an icon, and on the right side, there should be text.
I want the text to be exactly under each other, they should not be out of alignment with each other. If I give the icons a span, then it will be ignored.
Here is my code:
<div class="row">
<i class="span2 icon-user "></i>
<div value='register' class="span4">
Registrierung
</div>
<i class="icon-mobile-phone span2"></i>
<div id='Newsletter' class="span4">
Newsletter
</div>
</div>
<div class="row">
<i class="icon-euro span2"></i>
<div value='kost' class="span4">
Kosten
</div>
<i class="icon-phone span2"></i>
<div id='probleme' class="span4">
Probleme
</div>
</div>
As an update to this, FontAwesome now has fixed-width support built in.
<i class="fa fa-fw fa-user"></i>
The fa-fw class supplies the fixed-width style.
Put your icon inside the element and make it behave as an inline-block so you can change its width and margin.
http://jsfiddle.net/LeBen/B9yjd/
Both, the original code of the Zalando website and the Fiddle by LeBen, are not "ideal" - espacially when it comes to HTML semantics.
Why having empty elements if you only want a background image for an element?
Just add the icon as background-image and set the padding-left for all these elements to the required value.
Just target the icons classes directly adding your styles in css:
[class*="btn-"]:before,
[class^=" btn"]:before {
margin-right: 1em;
}
And there's no need for an empty , just use:
<div class="row">
<div value='register' class="icon-user span4">
Registrierung
</div>
<div id='Newsletter' class="icon-mobile-phone span4">
Newsletter
</div>
</div>
just had this issue playing around with the options after not wanting to bang all my FontAwesome icons in spans/divs. Adding class 'fa-fw' did indeed solve it, but so does simply adjusting the width of the icon with CSS (maybe a new thing as this is an old post), so no extra classes needed if you have many icons. 'svg-inline--fa' was a common class for all my icons - see example
.item{
padding: 5px;
}
.svg-inline--fa{
font-size: 20px;
width: 40px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" defer></script>
<div class="item">
<i class="fas fa-bolt"></i>
Fast, local and friendly team
</div>
<div class="item">
<i class="fas fa-tags"></i>
Honest and transparent pricing
</div>
<div class="item">
<i class="fas fa-handshake"></i>
All our work is guaranteed
</div>
<div class="item">
<i class="fas fa-clipboard-check"></i>
Trained to the highest UK standards
</div>