Table bug fixed: I was missing thead and tbody tags!
I have a weird problem with Bootstrap. Everything works perfectly fine, but when I try to use table-hover class it just does not work. Also, the table has upper border: http://gyazo.com/796c5bb99058c0d07e8ece8f54790399.png
Also, when I resize the Chrome browser, the navigation bar looks like this:
http://gyazo.com/cb7842b71d7a6e63eb0d5ce3f0b52902.png
instead of normal 'mobile' look on getbootstrap.com site.
I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
Code:
<table id='keytable' class='table table-hover'>
<tr><th>sv_licensenum</th><th>Type</th><th>Key</th><th>Description</th></tr>
<tr><td>0</td><td>Ranked</td><td>alrCOdo8PsFUur6iZmIlESd7</td><td>test2</td></tr>
<tr><td>1</td><td>Ranked</td><td>VLnNg25kSZRB4IzNpufu0qIs</td><td>test456</td></tr>
</table>
id="keytable" is not specified in any external non-Bootstrap CSS file/code. it is only used for Javascript.
After inspecting the file carefully I have figured the reason for this weird behavior.
You need to remove the style you have defined in you html. This is the reason the navbar gets a padding when you reach 979px or less. You can consider defining this through #media or media-query
body {
padding-top: 60px;
background-color: #f5f5f5;
}
And then you have to remove the style
nav-collapse collapse
This will hide whatever you put inside this.
Read http://getbootstrap.com/2.3.2/components.html#navbar
Hope this solves your problem.
I hope you have also included the required bootstrap js files. I did not get any issues when I tested the code you provided.
Related
I was trying to upgrade a website that I made on Atom with css but my code isnt working. When I was trying to use the style tag, my code seemed to work as expected but as soon as I tried to use a link tag instead it went back to how it was before. I really want to fix the issue. Here is the code on my main page:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>☆My Test Site☆</title>
<link rel="stylesheet" href="css/styles.css">
</head>
Here is the code for a different file called styles.css:
body {
background-color: #FFE6E6;
}
hr {
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width: 5px;
width: 5%;
}
Btw I have been double checking for over a day now so i dont think there is a problem with the file name.
I solved the problem. It turns out that my css folder wasnt on the same level as my other folder which had my main file in it!
Do anyone know how the css work on mobile? I tried to declare any statement below one by one but no luck.
#font-size-base: 20px;
body {
-webkit-text-size-adjust: 100%;
}
Refer to the image I attached, the font-size was redeclared 2 times from html {10px} to body {16px} and then to p {16px}, but finally it was changed to 28.8px, it is very large on mobile.
In the head, I do declare the meta
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
I can't find which statement change the font-size to 28.8px. Please help.
I can't understand why the utilities "show-on-small" and so on do not work. Even though the following script should only show on small, it shows all the time (please note that other materialize classes work, so it's not that I can't access their files).
Example:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<div class="show-on-small"> <p style="color: black" class="show-on-medium">Only smaall</p></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
Any idea? Thanks a lot!
By looking at what .show-on-small does, we can clearly see it never hides the element. It only makes sure it is shown on small:
#media only screen and (max-width: 600px) {
.show-on-small{
display:block !important
}
}
So the next example will work:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<p class="show-on-small" style="display:none;">I only show on small</p>
... because it has display:none on all cases, except on small where it is overridden by Materialize's CSS with !important.
Do note you can also use .hide-on-* classes in Materialize, which do what you seem to want.
You can use hide-on-med-and-up which sets display: none for screens bigger than 601px in width.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/><!-- Do you have this line? -->
</head>
<body>
<div class="hide-on-med-and-up">Only smaall</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>
Their files can be found at https://github.com/Dogfalo/materialize. From there you could also contribute.
For only showing on mobile use .hide-on-med-and-up
It will work
everything in my style sheet will work apart from divs. Kinda strange. I created a test page to try and see why it won't work but no joy.
If I include the div in a tag at the top of the page it will work. Just not if I link the css file itself. I will put my code below.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="boxed">
This should be in a box
</div>
And a clean stylesheet. With just the information for the div class.
#charset "utf-8";
/* CSS Document */
.boxed {
border: 1px solid green;
}
Hopefully, someone can point me in the right direction.
Instead of this, try just typing the full URL , so instead of "style.css" ,
type "http://yourWebsite.com/style.css" instead of "style.css"
<link type="text/css" rel="stylesheet" href="style.css" />
edit: also add type="text/css"
2nd edit:
you also need to have a title in your head, that is required. maybe it's causing this issue, maybe not
<head>
<title>This is my Title! </title>
</head>
Try this in your Style.css file:
.boxed {
border: 1px solid #008000;
display: inline;
}
check to see if you haven't misplaced any '}' or semi columns and i don't think you need the
#charset "utf-8" in your stylesheet since you already specified it in your head
http://foundation.zurb.com/docs/components/buttons.html
From the doc it is possible to get Custom Color using Mixin. I don't know much about SCSS and trying to get by without using it.
I want Black color buttons instead of the default Blue. It is possible to create some CSS class .black { ... } which will make the button black?
Yes. You can override the css by your own class if you do not know SCSS, though it is recommended to change the SCSS variable value in _variables.scss.
The way for css override is:
create a new css file for example. mystyle.css
And then call the css in the html head after
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/mystyle.css">
<script src="js/vendor/custom.modernizr.js"></script>
</head>
.small black colour button
<body>
Then your css will override the foundation.css class.
add your css class into the button element in html file.
Please see in the above code.
I think that your error might be that it is being overridden and one of the only ways of doing it even though it is frowned upon is to use !important so you would need to use:
.black {
background-color: #000 !important;
}
Also as you have used !important just for the regular one you also need to add it to your hover method so like this:
.black:hover {
background-color: #ccc !important;
}
Edit
Just found out that you don't even need important though if it starts to misbehave then that is what to do
Here is a fiddle:
http://jsfiddle.net/Hive7/p868s/