I am trying to build a MDL-based header, which includes drawer and tabs. The problem is that these two components come on different lines, while I want them to be on the same line.
1
http://codepen.io/anon/pen/KVWppQ
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
</div>
<!-- Tabs -->
<nav class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
</nav>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
Thanks in advance!
Related
I am trying to develop a dashboard using the AdminLTE-3.0.5 starter template. I programmed to upload a file in the sidebar, but the uploaded filename is not shown in the box provided. If I hover mouse on the box I can see the uploaded filename in the tooltip text.
The modified starter page is shown below. What am I missing?
Thanks
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>test dash</title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="./AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="./AdminLTE-3.0.5/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light" style="background-color: #383c44;">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"
style="color:#d6d7d8"></i></a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="#" class="brand-link">
<img src="./AdminLTE-3.0.5/dist/img/AdminLTELogo.png" alt="AdminLTE Logo"
class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">Dashboard</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-closed">
<a href="#" class="nav-link active">
<!-- <i class="nav-icon fas fa-tachometer-alt"></i> -->
<p>
data analysis
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<div class="custom-file mb-2 mt-2">
<!-- <input type="file" id="myFile" name="filename2" style="color:#d6d7d8"> -->
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<div class="input-group input-group-sm mb-2">
<button class="btn btn-primary">Upload</button>
</div>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function () {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h4 class="m-0 text-dark">Selected Columns</h4>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Box 1</h5>
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-body">
<h5 class="card-title">Box 2</h5>
</div>
</div><!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2014-2019 AdminLTE.io.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="./AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="./AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>
</body>
</html>
you need to import this
<script src=".AdminLTE-3.0.5/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
and this code to initialize
<script>
$(function () {
bsCustomFileInput.init();
});
</script>
It seems the following required scripts that were provided at the bottom of the body should have been in the head section.
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="./AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="./AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>
I'm wondering what the recommended way is to add title to a row in material design lite. Below I have a row (ie: a grid) with two columns in it. Suppose I want to add a title/heading to it. When you run the below code, you will see that the title is hugging the left of the document (and doesn't have the same indentation level as the content).
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<h3>My Title</h3>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col">
Content 1
</div>
<div class="mdl-cell mdl-cell--3-col">
Content 2
</div>
</div>
I could easily add some CSS to add some padding/margin to left of the <h3> but this feels a little hacky to me and doesn't feel like I'm using MDL properly if I were to do that.
I also tried moving the <h3> inside the row/grid div, but this causes things to become unaligned...
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="mdl-grid">
<h3>My Title</h3>
<div class="mdl-cell mdl-cell--3-col">
Content 1
</div>
<div class="mdl-cell mdl-cell--3-col">
Content 2
</div>
</div>
The only way I can think of is by wrapping the <h3> in its own mdl-grid. This works but it adds unwanted padding above and below the title (due to it being in a grid).
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<h3>My Title</h3>
</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col">
Content 1
</div>
<div class="mdl-cell mdl-cell--3-col">
Content 2
</div>
</div>
Is there anyway to simply add a title to a row using mdl?
Like that ?:
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="mdl-layout__title">
<div class="mdl-cell mdl-cell--12-col">
<h3>My Title</h3>
</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col">
Content 1
</div>
<div class="mdl-cell mdl-cell--3-col">
Content 2
</div>
</div>
I change first mdl-grid to mdl-layout__title
i have create a html code for my web radio player in my site...in pc browser is ok except sometimes but when i open the page from my smartphone i need to refresh page 1-2 times and after plays as the browser?Can i have a solution.Thanks.
<script language="javascript" type="text/javascript"
src="https://radio.streamings.gr/system/player.js"></script>
<div class="cc_player" data-username="panicradio">Loading ...</div>
try to insert the script at the end like this
<!-- jQuery js -->
<script src="http://panicradio.gr/js/jquery.min.js"></script>
<!-- Popper js -->
<script src="http://panicradio.gr/js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="http://panicradio.gr/js/bootstrap.min.js"></script>
<!-- All js -->
<script src="http://panicradio.gr/js/poca.bundle.js"></script>
<!-- Active js -->
<script src="http://panicradio.gr/js/default-assets/active.js"></script>
<script src="https://radio.streamings.gr/system/player.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Poca- Podcast & Audio Template">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>Panic Radio</title>
<!-- Favicon -->
<link rel="icon" href="./img/core-img/favicon.ico">
<!-- Core Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div class="preloader-thumbnail">
<img src="./img/core-img/preloader.png" alt="">
</div>
</div>
<!-- ***** Header Area Start ***** -->
<header class="header-area">
<!-- Main Header Start -->
<div class="main-header-area">
<div class="classy-nav-container breakpoint-off">
<!-- Classy Menu -->
<nav class="classy-navbar justify-content-between" id="pocaNav">
<!-- Logo -->
<a class="nav-brand" href="index.html"><img src="./img/core-img/mini logo.png" alt=""></a>
<!-- Top Social Area -->
<div class="top-social-area">
</div>
</div>
<!-- Nav End -->
</div>
</nav>
</div>
</div>
</header>
<!-- ***** Header Area End ***** -->
<!-- ***** Welcome Area Start ***** -->
<section class="welcome-area">
<!-- Welcome Slides -->
<!-- Single Welcome Slide -->
<div class="welcome-welcome-slide bg-img bg-overlay" style="background-image: url(img/bg-img/2.jpg);">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-8">
<!-- Welcome Text -->
<div class="welcome-text">
<h2 data-animation="fadeInUp" data-delay="100ms">Listen Now</h2>
<!-- Music Player -->
<div class="cc_player" data-username="panicradio">Loading ...</div>
<script language="javascript" type="text/javascript" src="https://radio.streamings.gr/system/player.js"></script>
<h5 >Αν δεν παίζει,κάντε refresh </h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
<!-- ******* All JS ******* -->
<!-- jQuery js -->
<script src="http://panicradio.gr/js/jquery.min.js"></script>
<!-- Popper js -->
<script src="http://panicradio.gr/js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="http://panicradio.gr/js/bootstrap.min.js"></script>
<!-- All js -->
<script src="http://panicradio.gr/js/poca.bundle.js"></script>
<!-- Active js -->
<script src="http://panicradio.gr/js/default-assets/active.js"></script>
<script src="https://radio.streamings.gr/system/player.js"></script>
</body>
</html>
When trying to use the example of the menu layout with Fixed Tabs, with Googl'es MDL: http://www.getmdl.io/components/index.html#layout-section/layout .
The "title", next to the hamburger menu, isnt aligned horizontally, like it is in the example.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
http://codepen.io/anon/pen/EPaBzW
as I am new to Bootstrap and working on a test site which requires nested column layout.
my code is as under
<html class="no-js" lang="en-US">
<body>
<div class="container">
<div id="page" class="row">
<header id="branding" role="banner" class="span12">
<nav id="access" role="navigation">
Menu
</nav>
</header>
<section id="primary" class="span9">
<div id="content" role="main">
<h1 class="entry-title">Some Title</h1>
<div class="entry-meta">
Some Info
</div><!-- .entry-meta -->
<div class="row meta-info">
<div class="post-image span3">
<ul class="thumbnails">
image
</ul>
</div><!-- .post-image -->
<div class="post-intro span4">
some intro text
</div><!-- .post-intro -->
<div class="post-desc span2">
some more info
</div><!-- .post-desc-->
</div><!-- meta info-->
</section>
</div><!-- #content -->
</div><!-- row -->
</div><!-- container -->
</body>
</html>
I see every think ok on a large display, but on a screen 1152x864, post-desc on span2 will break down and appears at the bottom of span4.
what I need that this should remain responsive and should adjust with browser re-size.
is my code correct? or is there any other way to achieve this?
Please help.
Regards
SAQ
<div class="row meta-info">
shoud be
<div class="row-fluid meta-info">
supposing your container has a max-width value on it, it should work.