This question is answered in multiple forums and in SO already.
I have fixed grid layout issues by adding col-sx- class and it works fine. The issue I am facing now is about the background colors.
As suggested by many answers and forums, I have commented the entire print media queries in bootstrap.css file.
#media print { }
But still the colors are not shown when printing. The HTML codes are provided below.
Issue 1:
<div class="alert alert-success" role="alert">Automation Tester</div>
The above code adds a color to the div class in browser. But in print, it shows only the border.
Issue 2:
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
</div>
<span class="progress-type">CSS3</span>
<span class="progress-completed">50%</span>
</div>
For the above code, the background color is not shown.
Live HTML Document: http://purus.github.io/resume/
Please try to print preview the above page and you can see the difference in live for the "summary" and "Technical Skills" section.
If you already removed media queries, try to check checkbox Background in additional printing options of Chrome's print preview. It is turned off be default.
Other browsers have the same functionality.
Related
I'm using bootstrap panels for the first time, and my panel header and panel body are shorter than my panel which looks a bit strange. I'm a bit stuck as to what's actually happening as the bootstrap styling is being called.
Code below:
<div class="software well row hidden">
<div class="info">
<div class="panel panel-success">
<div class="panel-heading"><h3>This INSERT NAME is available to download!</h3></div>
<div class="panel-body">
Or if you've tried that and experienced issues then please fill out the additional info box below and a member of the service desk will be in touch.
</div>
</div>
</div>
</div>
From the Comments:
Hmm. I [can't reproduce](https://jsfiddle.net/pbdevch/6t9afwdu/) the error in a JSFiddle. Look if your CSS is overwritten by some theme or by your own styles.
Response:
#chade that was it thanks - it was a css style that was overwriting my panel and not my panel-heading as I was expecting!
I'm answering this so other users with the same problem can easily determine the answer that was provided.
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
I have a page with two html files. I have exactly the same code for the footer in them. They use exactly the same CSS file but they look different and I still cannot find out why :
The code is here for the footer :
<div class="container_12">
<div class="grid_12"><footer>
<div class="socials">
facebook |
twitter |
google+
</div>
<div class="copy">COSMOSET © 2013 | Privacy Policy <!--{%FOOTER_LINK} -->
</div></footer>
</div>
</div>
Also if you visit the page here: HERE you can see the text-box-areas do not have the same transparent white background. I assume this one is a server issue (plesk). Because when i open the file on my PC (saved on my PC) it looks perfect.
If you go to the second link from the left (of your navigator) you can see that you have the following DOM structure:
The problem is that, on the page your provided in your post, the footer is a sibling of the <header>, <div class="clear"> and <div class="bg1"> elements, as you can see it in the following screenshot:
Your problem will get solved if you move the "container_12" to be a sibling of the elements I mentioned above.
LATER EDIT:
To answer your second question, for the #form textarea CSS selector you've added an extra . after the png extenstion:
one issue I don't quite understand.
I made an online sample, when I'm resizing the window, the SPANs response one by one.
Online sample http://jsfiddle.net/Pva7y/1/
Online Images
However, I copied the same code to my local html, the SPANs response just together.
Local Image.
why different? Thanks
HTML:
<div class="row ">
<div class="span7 blue">
1
</div>
<div class="span2 red">
2
</div>
<div class="span3 green">
3
</div>
</div>
CSS:
.blue{background-color:blue;}
.red{background-color:red;}
.green{background-color:green;}
First thing is that you forgot to use container div. Correct pattern is
<div class="container">
<div class="row">
<div class="span12">
1 2 3
</div>
</div>
</div>
See corrected jsfiddle (1).
Next, if you want your page to be responsive and fit the layout to the size of the viewport you have to also include bootstrap-responsive.css. See jsfiddle (2). In your local HTML you used either both bootstrap.css and bootstrap-responsive.css or prior files merged to one CSS for reducing client-server requests number.
Your <div>s are floated in your Fiddle, but they are not floated in your local html judging from your screenshot. And since bootstrap.css floats the <div> element with a class of span, I am guessing that bootstrap.css is not loaded properly in your local html file.
A way to troubleshoot your issue is to check the Inspector (if you're using Chrome), or Firebug (if you're using Firefox). Look at the computer style of the three <div>s in your fiddle AND your local html, and compare them. They must have been styled differently because they look different on the same browser, so that's the way to start troubleshooting.
I'm a programmer trying to learn some css and I've already run into a stumbling block.
I have the following HTML:
<div class="container">
<div class="span-24 last">
Header
</div>
<div class="span-4">
Left sidebar
</div>
<div class="span-16">
<div class="span-8">
Box1
</div>
<div class="span-4">
Box2
</div>
<div class="span-4 last">
Box3
</div>
<div class="span-16 last">
Main content
</div>
</div>
<div class="span-4 last">
Right sidebar
</div>
<div class="span-24 last">
Footer
</div>
</div>
In my css I have the following:
body {
background-color:#FFFFFF;
}
div.container {
background:url(/images/bck.jpg);
}
I just want to display an image for the background area for the container div but nothing shows up. If I remove the background section from the css and add background-color:#000000; then I see a black background for the container div.
What am I overlooking?
Most likely you are not specifying the correct path to the image:
background:url(images/bck.jpg);
Make sure that:
You are specifying the correct path
File name of the image is correct
The image file is present in the images folder
Note: As I answered a question today, see how to specify the path with ../.
Most likely the image path is wrong. Remember that the image must be specified relative to the location of your CSS file. Let us say that you have a folder named styles with your CSS files and you have a folder named images with your images. Then you may need to specify:
../images/bck.jpg
in order to access that image.
I find that using Firebug for Firefox, the Web Inspector for Safari, or the Developer tools for MSIE 8 helps me diagnose issues like this. Inspect your div.container element and see what path shows up for your image.
Of course, if you have access to your server logs you could also check those to find what image was requested.
I recently had a problem just like this in where a jpeg image refused to show, but only in MSIE. I had to open up the image in photoshop and use the "Save for Web" again then reupload it. I'm not certain what the glich was, perhaps it was saved in an incompatible jpeg variation or was corrupt in some way, but that worked for me.