I've created model popup by using Bootstrap.css.
It's coming properly in Chrome, but in IE(9,10,11) modal padding-bottom is not getting applied and creating UI issue.
There is no space between buttons(submit and cancel) and model at the bottom of the page
And I've created the mock view in plunker.
I unable to find the fix for IE.pls let me know how to fix this issue
Instead of giving padding-bottom, keep submit and cancel buttons in a div and use padding for the div,i think it will be perfect and Solves your problem.
Just add the following class to your css:
.btn-fixed-inner { padding-bottom: 15px; }
This might help:
.modal-body { margin-bottom: 15px; }
Related
My code is available here:
https://drive.google.com/open?id=0B1sXI26Zssw2YUVueDdyUHlrVXM
The problem that I'm facing is that there's some space showing up between my navigation tabs, and I didn't have this problem before I used the 'display: inline' function to center my navigation. What can be done? I've tried using "negative pixel margins" but they don't seem to work at all (They did work in another sample navigation I was experimenting with).
Here's a screenshot of the output of the code.
Ok so I downloaded the files and tested it on my server, what I found was rather strange, but the space was only there when the code was on different lines, I ended up fixing it by putting all the <li> elements on one line. You can see the code here: https://gist.github.com/HoogleyB/87de68e1a74480d73150770885e25224
Try to set margin = 0 . If you are running your code on chrome, it adds additional padding and margin of about 8px on its own. So try to fix that.
Have you tried:
ul li{ margin-left:-6px; }
Hope it will helps you.
Just so you know, this bug is because you are using display: inline-block;
With inline-block, if your html has breakline between elements you will see a space.
To remove it there is a tricky css thing :
ul {
font-size: 0;
}
li {
font-size: 12px;
}
If you set the parent with a font-size 0 the space will disappear.
I found this post on Bootstrap Tutorial for Blog Design.
I am planning to use it for one of my project for the responsive layout that it provides.
I have found an issue in the page hosted for demo.
have attached a screenshot
The first post in the page "Facebook Timeline Design using JQuery and CSS" is falling outside the border of the background [Have marked it in blue].[not the expected result]
The rest of the posts in the page falls inside the border which is the expected behaviour[have marked it in green].
Is there any way I can fix the issue of the first post falling outside the background border. I have tested this in IE,firefox and chrome with the same results.
have created a jsbin page here
You can get it resolved by using jquery selector
$('.row > [class*="span"]:first-child').css({"padding-left":"20px"});
In the css files its stated that the first span-element to have no margin on the left.
bootstrap-responsive.css on line 232:
.row-fluid [class*="span"]:first-child {
margin-left: 0px;
}
bootstrap.css on line 419:
.row-fluid [class*="span"]:first-child {
margin-left: 0px;
}
Remove or comment these out.
Add this stylesheet (prefered at the bottom)
.row > [class*="span"]:first-child {
padding-left: 20px;
}
If you want you can add this jQuery
$('.row > [class*="span"]:first-child').css('padding-left','20px');
As you can see from the example below, the Facebook like button is supposed to appear in that blank space between the date and the start of the article, but instead it's shifted downwards for an unknown reason that I can't figure out. I'm sure it's some obscure weird CSS stuff, but any help is appreciated. Thanks! :-)
And here's the actual page: http://readabout.me/achievements/Reinhardt-University-s-Morgan-Sparks-Selected-for-Who-s-Who-Among-Students-in-American-Universities-and-Colleges/3638644
I fount the issue
Please remove margin #news-story iframe.fb_ltr
http://readabout.me/stylesheets/news.css line 30 - and set padding top on "#fbLikeButton" problem will be solve
I could fixed the issue on firebugg , this is print screen;
Delete line 30 in your news.css file:
#news-story iframe.fb_ltr {margin:25px 0 10px 0;}
You are explicitly giving the like button iframe a top margin of 25px.
I think this will solve your problem :)
<div id="fbLikeButton" style="height: 50px; ">
Edit: I think the #cpilko has spotted the exact reason, though I believe the news.css is not yours but facebook's, in that case you can try adding the following code to your css.
#news-story iframe.fb_ltr {
margin: 0 !important;
}
Just add a height property in the like button - #fbLikeButton{height:60px;}
This worked. Thanks everyone!
-#news-story iframe.fb_ltr {margin:25px 0 10px 0;}
+
+div#fbLikeButton {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
Basically, I removed the internal styling and styled the surrounding div. I didn't realize we had code that actually styled inside the Facebook like button iFrame.
We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?
I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}
Hope this is what you were looking for, because it was exactly what I was looking for!
Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.
The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.
I found this to work:
/* the below allows the fb:like iframe to show entirely instead of getting cropped off */
.fb-like iframe {
max-width: inherit;
}
/* the same issue with the "send" button */
.fb-send iframe {
max-width: inherit;
}
As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.
Hope that helps.
I modified Shane's excellent solution to focus specifically on z-index:
css:
.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
z-index:8 !important;
}
The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.
This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.
I have a problem in viewing my web app in mozilla.
In my web app I have a button whose css styles are as below:
.page_button
{
BACKGROUND-IMAGE: url(../images/pagebutton_bg2.png);
BORDER-LEFT:0px;
/*WIDTH: 100%;*/
CURSOR: pointer;
/*COLOR: #000000;*/
BORDER-BOTTOM:0px;
}
As above I have commented out the "Width:100%"&"Color:#000000" attributes as they are causing problems in Mozilla Firefox.(The width100% option makes my buttons appear very small) -- so i commented them.
But the problem here is that this button is inheriting the same Color:#000000 & Width:100% from other parent elements.How can I stop this inheritance.
I even tried overriding those properties like : Color : null; Width : none ---> But this is not working.
I appreciate any suggestions to overcome this.
Regards,
Vijay
I don't know if I understand your problem correctly but if you want to prevent accidental inheritance you can try and use full paths...so instead of just .page_button you could use something like body.page_button though it is more probable that you should do that somewhere else in your code and not in the part you are displaying hope that helps...good luck!
width is not an inheritable property, so you must be applying the style width: 100% to your button using another selector.
If you don't already have Firebug, then I recommend installing it and using it. With Firebug, you can select any DOM element and trace back exactly how the values of all CSS properties on the element were calculated.
If the button is on a link element, then width will have no effect unless the link is set to display:block; or display:inline-block; . That could be having an unintended effect.
I also second the Firebug recommendation!