Problem
I'm having a problem with flex boxes. It is wrapping the content like it should, however any items that overflow the parent container are truncated. See the image below:
Here's the HTML of the entire page:
<html lang="enUS">
<head>
<!-- Page Title (Shows up in title bar of browser) -->
<title>Test Page: User Drill Down</title>
<!-- Favirotie Icons (Shows up next to the URL in the browser address bar)
Generated from https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="http://localhost:22080/core/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:22080/core/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:22080/core/images/favicons/favicon-16x16.png">
<link rel="manifest" href="http://localhost:22080/core/images/favicons/site.webmanifest">
<link rel="mask-icon" href="http://localhost:22080/core/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="http://localhost:22080/core/images/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="http://localhost:22080/core/images/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- JavaScript Core Files -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/ajax.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/heartbeat.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/treewalker.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/verify.js"></script>
<!-- Install Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/APIs/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
<!-- Install FontAwsome CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/APIs/fontawsome/fontawesome-free-5.15.1-web/css/all.min.css">
<!-- Install Custom Common CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/core/css/common.css">
<!-- Install Custom Header CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/core/css/header.css">
<!-- Install Slider CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/core/css/toggle.css">
<!-- Install Bootstrap Datepicker -->
<link rel="stylesheet" type="text/css" href="http://localhost:22080/APIs/datepicker/css/bootstrap-datepicker3.min.css">
<style type="text/css">.table-hover > tbody > tr:hover
{
color: #FFFFFF;
background-color: #000000;
}
.table-striped > tbody > tr:nth-of-type(odd)
{
background-color: #000033;
}
.table > thead > tr > th,.table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td
{
border-top-color: #660000;
}
.table > thead > tr > th
{
border-bottom-color: #660000;
}
table-bordered
{
border-color: #660000;
}
.table-bordered > thead > tr > th,.table-bordered > tbody > tr > th,.table-bordered > tfoot > tr > th,.table-bordered > thead > tr > td,.table-bordered > tbody > tr > td,.table-bordered > tfoot > tr > td
{
border-color: #660000;
}
.table-bordered th,.table-bordered tdborder-color
{
#660000: undefined;
}
.slider
{
background-color: #000033;
}
.slider:before
{
background-color: #808080;
}
input:checked:disabled + .slider
{
background-color: #FFFFFF;
}
input:disabled + .slider
{
background-color: #FFFFFF;
}
input:checked + .slider
{
background-color: #9999FF;
}
input:focus + .slider
{
box-shadow-color: #9999FF;
}
.cb-std:before
{
color: #99FF99;
}
.cb-std:checked:before
{
color: #99FF99;
}
.rb-std:before
{
color: #99FF99;
}
.rb-std:checked:before
{
color: #99FF99;
}
legend
{
border-bottom-color: #FF9999;
}
tooltip
{
color: #FFFFFF;
background-color: #000000;
}
tooltip-inner
{
color: #FFFFFF;
background-color: #000000;
}
</style>
</head>
<body href-link="drilldown.php" session-timeout="600" popup-time="30" style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">
<!-- Timeout Modal Dialog -->
<div class="container">
<!-- Modal -->
<div class="modal fade" id="logoutDialogBox" role="dialog" style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" id="logoutHead">
<h4 class="modal-title">Login Session Expired</h4>
</div>
<div class="modal-body" id="logoutBody">
<p>You have been inactive for some time. Your session will expire
in <span id="logoutTime"></span> seconds. Click on
the Stay Logged In button to stay logged in, or to logout now, click
the Logout button.</p>
</div>
<div class="modal-footer" id="logoutFoot">
<button type="button" class="btn btn-default" id="buttonStayLoggedIn">Stay Logged In</button>
<button type="button" class="btn btn-default" id="buttonLogout">Logout</button>
</div>
</div>
</div>
</div>
</div>
<!-- Beginning of header Nav Bar -->
<div id="navigationBarHeader">
<!-- Navbar header with logo, time, and logout button -->
<nav id="navigationBar" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Sea-Core Logo Image -->
<img class="navbar-brand" alt="Brand" src="http://localhost:22080/core/images/branding/base_small.png">
<!-- Div for the time -->
<div class="navbar-text" id="timeday">9:29:11 PM</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Nav Bar, Left Side -->
<ul class="nav navbar-nav">
<button type="button" id="returnHome" class="btn btn-default navbar-btn">Home</button>
</ul>
<!-- Nav Bar, Right Side -->
<ul class="nav navbar-nav navbar-right">
<li>
<!-- All pages have the logout button -->
<button type="button" id="logout" class="btn btn-default navbar-btn">Logout</button>
</li>
</ul>
<span class="icon-bar"> </span>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- End of header Nav Bar -->
<!-- Beginning of function bar -->
<nav id="functionBar1" class="nav nav-inline" hidden="">
<button type="button" id="something" class="btn btn-default navbar-btn">Item 1</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 2</button>
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="something" class="btn btn-default navbar-btn">Item 3.1</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 3.2</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.1</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.2</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.3</button>
<button type="button" id="something" class="btn btn-default navbar-btn">Item 4.4</button>
</div>
</nav>
<!-- End of function bar -->
</div>
<!-- Start of main content area -->
<div id="mainFrame">
<div style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0);" id="errorTarget"></div>
<div style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0);" id="responseTarget"></div>
<div class="row row-list">
<div id="link-nav" class="col-xs-2 link-nav-div"></div>
<div id="main" class="col-xs-8 link-main-div">
<div>
<div class="row" style="place-content: center; text-align: center;">
<span style="font-size: 24px; font-weight: bold;">Drill Down Test Module</span>
<span> </span>
</div>
<div class="row" style="place-content: center; text-align: center;">
<span style="font-size: 24px; font-style: italic;">Users</span>
</div>
</div>
<div class="image-border" style="left: 67px !important; width: 1211px !important; height: 6px !important; padding-bottom: 18px !important; padding-top: 12px !important;">
<canvas width="1211" height="6"></canvas>
</div>
<form class="form-horizontal">
<div class="row">
<div class="container" id="ddlink" style="color: rgb(0, 0, 0); text-decoration-color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">
<div class="flex-box-row" id="xddlink2">
<span class="text-control"> 0 </span>
<span class="text-control"> 1 </span>
<span class="text-control"> 2 </span>
<span class="text-control"> 3 </span>
<span class="text-control"> 4 </span>
<span class="text-control"> 5 </span>
<span class="text-control"> 6 </span>
<span class="text-control"> 7 </span>
<span class="text-control"> 8 </span>
<span class="text-control"> 9 </span>
<span class="text-control"> A </span>
<span class="text-control"> B </span>
<span class="text-control"> C </span>
<span class="text-control"> D </span>
<span class="text-control"> E </span>
<span class="text-control"> F </span>
<span class="text-control"> G </span>
<span class="text-control"> H </span>
<span class="text-control"> I </span>
<span class="text-control"> J </span>
<span class="text-control"> K </span>
<span class="text-control"> L </span>
<span class="text-control"> M </span>
<span class="text-control"> N </span>
<span class="text-control"> O </span>
<span class="text-control"> P </span>
<span class="text-control"> Q </span>
<span class="text-control"> R </span>
<span class="text-control"> S </span>
<span class="text-control"> T </span>
<span class="text-control"> U </span>
<span class="text-control"> V </span>
<span class="text-control"> W </span>
<span class="text-control"> X </span>
<span class="text-control"> Y </span>
<span class="text-control"> Z </span>
</div>
</div>
</div>
</form>
<div class="image-border" style="left: 168px !important; width: 1009px !important; height: 6px !important; padding-bottom: 18px !important; padding-top: 12px !important;">
<canvas width="1009" height="6"></canvas>
</div>
<div class="row">
<div class="container" id="dddata">
</div>
</div>
<div class="image-border" style="left: 67px !important; width: 1211px !important; height: 6px !important; padding-bottom: 18px !important; padding-top: 12px !important;">
<canvas width="1211" height="6"></canvas>
</div>
<div class="bottom-links">
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/privacy.php');">Privacy Policy</a>
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/cookie.php');">Cookie Policy</a>
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/about.php');">About Us</a>
</div>
<div class="col-xs-2">
<a onclick="window.open('http://localhost:22080/core/misc/contact.php');">Contact Us</a>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
<div class="vspace10"></div>
</div>
<div id="link-stat" class="col-xs-2 link-status-div"></div>
</div>
</div>
<!-- End of main content area -->
<div>
<form id="token_form">
<input type="hidden" name="token_data" id="token_data" value="144542ef22e58a893ce414ddbd3cdad9342037fe12194ad94003f6ac85471b53">
</form>
</div> <!-- Install Timer -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/timer.js"></script>
<!-- Install regular jQuery -->
<script type="text/javascript" src="http://localhost:22080/APIs/jquery/BaseJQuery/jquery-3.3.1.min.js"></script>
<!-- Install Bootstrap -->
<script type="text/javascript" src="http://localhost:22080/APIs/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- Install FontAwsome -->
<script type="text/javascript" src="http://localhost:22080/APIs/fontawsome/fontawesome-free-5.15.1-web/js/fontawesome.min.js"></script>
<!-- Install Logout Modal Handlers -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/modal.js"></script>
<!-- Common Javascript -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/common.js"></script>
<!-- Install Custom Checkbox -->
<script src="http://localhost:22080/APIs/checkbox/dist/js/bootstrap-checkbox.js"></script>
<!-- Install Datepicker -->
<script src="http://localhost:22080/APIs/datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Install Header Custom JavaScript -->
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/header.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/common.js"></script>
<script type="text/javascript" src="http://localhost:22080/core/js/baseline/html.js"></script>
<script type="text/javascript" src="http://localhost:22080/test/drilldown.js"></script>
<!-- Checkbox Boot Script -->
<script type="text/javascript">
function featureCheckbox() {
$(':checkbox').checkboxpicker({
html: true,
offLabel: '<span class="glyphicon glyphicon-remove">',
onLabel: '<span class="glyphicon glyphicon-ok">'
});
}
</script>
<!-- Tooltip Boot Script -->
<script type="text/javascript">
function featureTooltip() {
$('[data-toggle="tooltip"]').tooltip();
}
</script>
<!-- Datepicker Boot Script -->
<script type="text/javascript">
function featureDatepicker() {
$('.datepicker').datepicker();
}
</script>
</body>
</html>
And here is the relevant CSS:
/* Flex boxes */
.flex-box-row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
overflow-wrap: break-word;
overflow: hidden;
}
.flex-box-row>*{
flex: 0 0 auto;
}
span.text-control {
font-size: 14pt;
font-weight: bold;
cursor: pointer;
}
Here are some other screenshots that shows the results of other solutions that I have tried:
In this one, the zero is truncated from the beginning.
Here part of the beginning and ending text is cut off.
NOTE: overflow-wrap and overflow CSS attributes have no effect. I've tried it both ways.
NOTE: Since there are a series of SPAN elements as the flex child, I tried adding min-width: 0; as suggested by some of the linked questions but it does not work.
NOTE: This is related to another question here about partitioning large database tables into smaller pieces. That is located here:
Splitting up large data sets into smaller pieces for web viewing Needless to say, I have solved that problem.
Basically, anything that is outside the parent container in those two boxes is not displayed (you can't even click on them), but then content displays normally on the next line. As shown in the image with the flexbox highlighted, it extends past the container. I need to constrain that.
Also Bootstrap 3 is being loaded, but is not being used for the flexbox.
Research
I have done a lot of research into this over the past two days and here's what I have found:
Prevent flex items from overflowing a container
Flexbox item multiline text overflow
Truncated text in nested flexbox items
Centering Items with Flexbox and Overflow
Flexbox items with block content overflow the flexbox container
https://codepen.io/ScottWhittaker/pen/apKqpK
https://css-tricks.com/flexbox-truncated-text/
And many more....
Things that I have tried
I have tried multiple solutions with varying results. However, the main issue of truncating the items is still there no matter what solution that I have tried.
EDIT: 06/05/2021 2230 PDT
As people have pointed out about mixing inline and stylesheets, I'm working on that right now. However, the big issue here is that SOME mixing between stylesheets and inline styles cannot be avoided. The primary reason are theme colors (kinda hard to have many themes with stylesheets) and computed sizes such as the image-border stuff. Also some of the font things with the title headers must also be specified inline because JSON from the server can specify it. Everything inside the DIV with id="main" is generated on the client with JavaScript that interprets JSON from the server. Everything else is a template page that's generated by PHP on the server. Furthermore, when I try to do a minimal code set to reproduce the problem, I can't. That tells me that it's a stylesheet causing the problem, but I'm not sure which one. Bootstrap 3 is being loaded and used throughout the page. I wonder if it's a Bootstrap problem or a problem with one of my stylesheets. I will continue to try to build a minimal example to reproduce the problem though. As for all the external links pointing to localhost, I'm working on that as well.
I would recommend first of all not to mix up inline styles and stylesheets so much - its very hard to tell whats the issue when there is so many inline styles in a large html document. (Also keep in mind any inline styles will take presedence over your classes in the external stylesheet)
Maybe you could supply a minimal reproduction of the error with only the bit of HTML and CSS that is relevant to the problem in a codepen or a jsfiddle? It would make it much easier to help you
After doing a considerable amount of research, testing, and debugging, I found the problem. It seems that bootstrap-3's container class was the culprit. Removing that class for the HTML hierarchy corrected the problem in all cases. With that in mind, I took a look at the class. It had different properties depending on the width of the window. Looking at the docs, it's part of the responsive page functionality which allows a page to be optimally viewed on different size devices.
It was also causing a problem with tables too. Rows would have missing columns. That has been corrected as well.
Thank you to everyone who responded.
Related
I am trying to have multiple containers and i need them each to be able to collapse and reopen upon user interaction. Presently, i can only open but when i click on the 'Details' the divs do not close.
I have tried altering the collapse and also adding ids and making the data-target that id but still the same issue
Link:
https://www.w3schools.com/code/tryit.asp?filename=G4OW7SFO0DYR
Please try this.
<div class="card" id="card0" style="background-color: #c8c372; border:5px solid black;"><div class="description">
<h4 style="font-size: 25px; text-align: center"><b> Bottled water | $2 </b></h4><h5 style="text-align: center"></h5>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
button{
padding-left: 40%;
padding-right: 45%;
}
</style>
<div class="container">
<button type="button" data-toggle="collapse" data-target="#demo">Details</button>
<div id="demo" class="collapse multi-collapse">
Brands of water include: Dasani, Nestle, and Fiji
</div>
</div>
</div><span id="next-content0"></span></div>
---------------
------------------
------------
<div class="card" id="card0" style="background-color: #c8c372; border:5px solid black;"><div class="description">
<h4 style="font-size: 25px; text-align: center"><b> Bottled water | $2 </b></h4><h5 style="text-align: center"></h5>
<div class="container_1">
<button type="button" data-toggle="collapse" data-target="#demo_1">Details</button>
<div id="demo_1" class="collapse multi-collapse">
Brands of water include: Dasani, Nestle, and Fiji
</div>
</div>
</div><span id="next-content0"></span></div>
Please add your CSS and JS in the head tag. you don't need to call CSS and JS everywhere.
Problem 1:
The row is overflowing with other content (specifically on the other divisions that I made).
Question 1:
How to make a division to get the whole height of the viewport? like using "height: 100%"
Screenshot:
Normal Screenshot (PC View)
This is when the user is on "phone view" or with a smaller resolution.
Codes:
HTML Code (index.html)
<!DOCTYPE html>
<html>
<head>
<!--Meta Data-->
<meta charset="utf-8">
<meta name="author" content="Kirk Niverba" />
<meta name="description" content="Prospekt is a gaming community which helps users to comunicate, cooperate, collaborate, and share ideas or just to bond with other players or gamers out there!">
<link rel="author" href="https://plus.google.com/u/0/100208830349097131526" />
<link rel="publisher" href="https://plus.google.com/u/0/100208830349097131526" />
<meta property="og:title" content="Prospekt | A Gaming Community" />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://wallpapercave.com/wp/rJRFZZ8.png" />
<meta property="og:url" content="http://prospekt.ml" />
<meta property="og:description" content="Prospekt is a gaming community which helps users to comunicate, cooperate, collaborate, and share ideas or just to bond with other players or gamers out there!" />
<meta property="fb:admins" content="100003700811738" />
<!--Insert Required APIs-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/box.css">
<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<title>Prospekt | A Gaming Community</title>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="//prospekt.ml">Prospekt | A Gaming Community</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Prospekt</li>
<li>Introduction</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Glossary</li>
<li>
</li>
</ul>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Member Area <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Sign In</li>
<li>Register</li>
<li>Forgot Password</li>
<li>Your Dashboard</li>
<hr />
<li>Admin Login</li>
<li>cPanel</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid box-1 text-center" id="section1">
<br>
<br>
<h1> Welcome to Prospekt! </h1>
<hr>
<div class="row info">
<div class="col-sm-4">
<h1 class="title"> Why Prospekt? </h1>
<p class="content"> Why you should visit or use Prospekt as your social website? You should use Prospekt because it's <b>free</b>, <b>lightweight</b>, <b>fast</b>, and <b>reliable</b>.</p>
<p class="content"> We assure you your own privacy, security, enjoyment, and more when you visit our website. This website is also <em>mobile-friendly</em>, supported by jQuery and Bootstrap3. When you're a member, we assure your privacy and all the security measures to make you safe out there! Enjoy gaming! </p>
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Learn More...
</div>
<div class="col-sm-4">
<h1 class="title">Who We Are?</h1>
<p class="content">We are the gamers, or players, or geeks. It doesn't matter who you are in reality, it matters how you play or cooperate with others, avoiding to be toxic or salty out there!</p>
<p class="content">There are many ways to behave in the "tribunal" or to the games. Learn how to control yourself or became a <em>"non-salty/toxic"</em> player!</p>
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Anti Toxic Campaign
</div>
<div class="col-sm-4">
<h1 class="title">What Do We Do?</h1>
<p class="content"> We do many things, just like other people do. It doesn't mean that we're just sitting in front of a computer for hours, even days, is we aren't doing anything or we aren't even socializing with other people. <br><br><b>[Developer]: </b>As a developer of this website, I gave like a hundred of hours contributing to this website, I want you to cooperate with the system, by not being a toxic or a salty player. Enjoy my website and Happy Gaming out there!</p>
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Testimonials
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Developer Bio
</div>
</div>
</div>
<div class="container-fluid box-2 text-center" id="section2">
<h1> Other Informations </h1>
<hr>
</div>
</body>
</html>
Javascript (used for scrollspy and smooth scroll)
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
CSS File
/*
Author: Kirk Niverba
Project Name: Prospekt - DivCSS
Date: Sept 4, 2016
License: MIT License
*/
.box-1 {
height: 700px;
background-color: lightgreen;
color: black;
padding: 15px;
}
.box-2{
height: 640px;
background-color: #faf0e6;
color: black;
padding: 15px;
}
hr {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr:after {
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
}
h1.title{
font-family: Impact;
}
p.content {
font-family: Century Gothic;
font-size: 17px;
}
.info{
overflow: hidden;
}
Why not just use min-height:100%?
.box-1 {
min-height: 100%;
background-color: lightgreen;
color: black;
padding: 15px;
}
.box-2{
min-height: 100%;
background-color: #faf0e6;
color: black;
padding: 15px;
}
http://www.codeply.com/go/rnKegYatGf
Remove this line from your CSS. This is messing your code up.
.box-1 {
height: 700px;
I read information about navbar-nav but I don't use it because it make a list from my li elements instead of row.
If I want to reach it I should add this css
#media screen and (min-width: 768px) {
.navbar-nav {
width: 100%;
}
}
But this piece of css doesn't resolve my problem with IE8
HTML code
<nav class="status-navbar navbar navbar-default" role="navigation">
<!-- Collect the nav links, forms, and other content for toggling -->
<div
class="collapse navbar-collapse container-fluid container-lg-height container-md-height"
id="bs-navbar-collapse-1">
<div class="row row-lg-height row-md-height" style="margin: 0;">
<div
class="col-lg-4 col-md-4 search-panel col-lg-height col-md-height col-middle">
<form class="navbar-form navbar-left search-form" role="search">
<div class="form-group col-lg-10 col-md-10">
<input type="text" class="search-input form-control input-lg"
placeholder="Twitter Quick Search">
</div>
<div class="col-lg-2 col-md-2">
<button type="button" class="btn btn-lg btn-primary">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</form>
</div>
<div class="col-lg-7 col-md-7 col-lg-height col-md-height col-middle">
<ul class="nav navbar-nav">
<li class="col-lg-2 col-md-2 metricItem underline"><span class="metricsLabel">FOLLOWING</span>
<span id="followingTweetIds" class="metricsValue">0</span></li>
<li class="col-lg-3 col-md-3 metricItem"><span class="metricsLabel">SAVED
SEARCHES</span> <span class="metricsValue">0</span></li>
<li class="col-lg-2 col-md-2 metricItem">
<span class="metricsLabel">TWEETS RETRIEVED</span>
<span id="tweetsRetrieved" class="metricsValue">0</span>
<div class="limitPane">
<span class="metricsLabel">( LIMIT</span>
<span id="limitRequests" class="limitRequests"></span>
<span class="metricsLabel">)</span>
</div>
</li>
</ul>
</div>
<div class="col-lg-1 col-md-1 col-lg-height col-md-height col-middle">
<ul class="nav navbar-nav">
<li><a href="#" id="notificationBtn" class="notificationBtn" style="font-size: 17px;">
<span class="glyphicon glyphicon-bell">Notifications</span>
</a></li>
</ul>
</div>
</div>
</div>
</nav>
Please, help me to understand for what I should use navbar-nav and how to make it cross-browser solution in my example.
Link to JSFiddle
Even interesting, I changed position this fragment from head under bootstrap.min.css to the bottom of <body> element.
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Now in IE 8 it looks like
It was my mistake with location for including resond js. Because I use jquery layout framework. I've understood that I have a problem with display: table-row. I use it because I want to create columns inside row that have equals heights Bootstrap 3 responsive columns of same height
Reference the Respond.js script after all of your Css
.UPDATE 2
I changed my navbar to default Bootply. But it still looks different from result that I want to achieve. I lost possibility to align my Notification link and form element inside navbar addind navbar-btn doesn't help. I can't do responsive width for input field. Bootstrap 3 - How to maximize input width inside navbar. This solution works well just for input-group. Please, help me to understand how create
Responsive items of same height inside navbar
Stretch width form (using input-group not form-group) such a way that when I resize page button go down on the next line
This example is in Bootstrap 3.2 which has bug fixes for their components, but that's -- probably -- not the issue here. Your css is very messy and it's hard to determine what doesn't work in IE8.
I would build my own component and not use Navbar, which is not intended for use as you have. Over-writing so much is really not a good idea without intimate familiarity with source CSS.
Avoid margins, like you have, on elements with box-sizing:border-box especially if they are trying to fit inside a fluid container. You have margins on col-- classes, this will mess stuff up.
Screen Shot IE 8:
Demo: http://jsbin.com/zaxiwo/1/
Edit: http://jsbin.com/zaxiwo/1/edit
Tips:
Keep media queries to a minimum, that is use fewer if possible.
Every time you make a change, even minor, check in IE8, then you know what happened.
Comment your html
HTML: (requires respond.js correctly installed in the head as per their instructions, before CSS AND locally hosted CSS linked via RELATIVE path.)
Notes: the html and the CSS is not complete, the small viewport styles have not been done. You put the common, shared among all viewport sizes BEFORE the min-width media query. If it's common to all it goes outside the media queries, but if there is a slight difference you can remove that style, so if there is padding on small viewports but no padding on larger, remove the padding on the larger, but if there is a total difference in appearance, then put the smallviewport styles ONLY in a max-width, which is 1px less than the min-width.
<div class="control-bar container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".control-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse control-collapse">
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</div>
<!--/.col-*-3 -->
<div class="col-sm-5">
<div class="row">
<div class="col-sm-4 indicator active">
<span class="title">Word</span>
<span class="number">1</span>
</div>
<!--/.col-*-4.indicator :: nested -->
<div class="col-sm-4 indicator">
<span class="title">Word</span>
<span class="number">2</span>
</div>
<!--/.col-*-4.indicator :: nested -->
<!--/.col-*-4 :: nested -->
<div class="col-sm-4 indicator">
<span class="title">Word</span>
<span class="number">3</span>
<span class="notice">word</span>
</div>
<!--/.col-*-4.indicator :: nested -->
</div>
<!--/.row (nested) -->
</div>
<!--/.col-*-7 -->
<div class="col-sm-3 col-sm-offset-1 icon-link">
<i class="glyphicon glyphicon-home"></i> icon link goes here
</div>
<!--/.col-*-3 -->
</div>
<!--/.row -->
</div>
<!--/.nav-collapse -->
</div>
<!--/control-bar.container-fluid -->
CSS
.control-bar {
background: #333;
color: #fff;
clear: both;
}
.control-bar a {color:#fff}
.control-bar .control-collapse {
clear: both;
width: 100%;
padding: 0 15px 20px;
}
.control-bar .icon-bar {
background: #fff;
}
.indicator:hover,
.indicator.active {
border-bottom-color: orange
}
.indicator {
padding: 10px 15px;
border-bottom: 5px solid transparent;
}
.icon-link a {
padding: 10px 0;
display: block;
}
/* how it looks on larger viewports*/
#media (min-width:768px) {
.control-bar .control-collapse {
display: inline!important;
padding: 0;
}
.indicator {
height: 100px;
padding: 5px 0 0 0;
display: table;
}
.indicator span {
display: table-row;
text-align: center;
font-size: 14px;
border: 1px solid red;
vertical-align: middle;
}
.indicator .title {
font-size: 15px;
text-transform: uppercase;
}
.indicator .number {
font-size: 20px;
color: orange;
}
.indicator .notice {
font-size: 12px
}
/* height of parent minus by height of element divided by 2 */
.control-bar .input-group {
margin-top: 33px
}
.icon-link {
text-align: right;
padding-top: 28px;
}
}
Internet Explorer is not able to read CSS Media Queries, so you need to add this meta tag on your HTML head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And include a JS file in order to IE read and execute these media queries:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Before you Work in Bootstrap Version 3.1.1
You have to be aware of Browser compatibility and CSS3 Support for Windows Explorer 8!
Please read: http://getbootstrap.com/getting-started/#support
In addition, Internet Explorer 8 requires the use of respond.js to
enable media query support.
See also: https://github.com/scottjehl/Respond
For this reason the basic template contains these lines in the head section:
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
Related Useful Links
Bootstrap Support Documentation
CSS Compatibility in Internet Explorer
IE8 issue with Twitter Bootstrap 3- stackoverflow Question [Must Read]
Page Rendering in IE stackoverflow Question
Support of IE with Bootstrap stackoverflow Question
For that in Bootstrap Documentation:
Try importing html5-respond.js
in your head section of html page, hten IE will be able to render the media queries.
My main issue with using CSS libraries is that they often overwrite custom CSS styles that I specifically set. For example, here I have a list that exists within a Bootstrap expand/collapse menu:
<ul class="nav navbar-nav">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
I want to set my own font color, so I use the following CSS:
nav li {
font-size: 16px;
color: #004687;
}
But when I view in Firefox's Inspector, I see the color I have chosen is being overridden by Bootstrap.
My custom CSS occurs after the Bootstrap files have been loaded in the of the HTML document.
How do I prevent this happening without setting style="color: #004687" to every element?
EDIT: Thanks for the suggestions thus far, but none have been successful. I'm pasting the full original code to give you greater detail:
<div class="container">
<header class="navbar navbar-static-top bs-docs-nav">
<div class="col-md-4 visible-xs" id="mobile-nav-outer">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Menu
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" id="mobile-nav-inner" role="navigation">
<ul class="nav navbar-nav">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
</nav>
</div>
</header>
</div>
My CSS is included like this:
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/docs.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
#mobile-nav-outer {
border: 1px solid #CCC;
background-color: #FFF;
}
#mobile-nav-inner {
border: 1px solid #CCC;
background-color: #FFF;
margin: 3px;
}
nav li {
font-size: 16px;
color: #004687;
}
.nav-mobile-link {
font-size: 16px;
color: #004687;
}
</style>
</head>
EDIT 3: I have found a cheap workaround by using ID's rather than classes which works due to CSS specificity (ID's override classes). This isn't a very clean solution and I'd still like to know why I cannot override the Bootstrap classes with my own.
Overwrite it with additional class added to the list:
<ul class="nav navbar-nav custom-class">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
and in your custom styles:
.nav.custom-class li {
font-size: 16px;
color: #004687;
}
try to place custom css file below bootstrap.css.
or
nav li {
font-size: 16px !important;
color: #004687 !important;
}
I've been trying to troubleshoot a problem with my Bootstrap page via previous questions on here, Google, and Bootstrap's documentation, but in the past two days I've been unable to solve the problem. Sadly, I bet it's something pretty simple.
I modded the size of the hero-unit and added a background image to it. Since then, the div row underneath it has been breaking up into three separate lines rather than maintaining the three span4's on a single line. Again, I'm sure this is a stupid question, but I am still fairly new to Bootstrap and how the grids work.
Anyone know what the problem is and how to correct it? Code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>With Bootstrap</title>
<link rel="stylesheet" href="http://www.ascentapps.com/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Rock+Salt|Dosis:200' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container-fluid">
<div class="hero-unit">
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<div align="center">
<h1><center>Moving Sale?</center></color></h1>
</br>
<p style= "color: white; font-family: 'Dosis', sans-serif; font-size: 22px">Make it a whole lot easier</p>
</div>
</div><!-- .hero-unit -->
<div class="row">
<div class="span4">
<center><button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-paperclip"></span>
</button>
<p>text</p></center>
</div><!-- .span4 -->
<div class="span4">
<center><button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-pushpin"></span>
</button>
<p>text </p></center>
</div><!-- .span4 -->
<div class="span4">
<center><button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-lock"></span>
</button>
<p>text </p></center>
</div><!-- .span4 -->
</div><!-- .row -->
</div><!-- .container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Here is the CSS I've added on to the end of the standard bootstrap.min.css:
.hero-unit {height: 100%; max-height:400px; min-height:400px;background:url(http://ascentapps.com/furniture.jpg)}h1 {font-family: 'Rock Salt', cursive;color:white;}span.glyphicon-paperclip {border: 3px solid orange;color: orange;font-size: 8em;}span.glyphicon-pushpin {border: 3px solid orange;color: orange;font-size: 8em;}span.glyphicon-lock {border: 3px solid orange;color: orange;font-size: 8em;}
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
.glyphicon-bell:before {
content: "🔔";
}
.glyphicon-bookmark:before {
content: "🔖";
}
.glyphicon-briefcase:before {
content: "💼";
}
.glyphicon-calendar:before {
content: "📅";
}
.glyphicon-camera:before {
content: "📷";
}
.glyphicon-fire:before {
content: "🔥";
}
.glyphicon-lock:before {
content: "🔒";
}
.glyphicon-paperclip:before {
content: "📎";
}
.glyphicon-pushpin:before {
content: "📌";
}
.glyphicon-wrench:before {
content: "🔧";
.container-fluid .row-fluid [class*="span"] {
margin-left:0px;
}
Does anyone know what's causing the break up on to separate lines?
The page can be viewed here: http://www.test.ascentapps.com/indextest.html
Thanks so much
You're using bootstrap 3 which doesn't use span4 anymore. You probably want something like col-md-4
http://getbootstrap.com/css/#grid