I am just porting some code over from backbone.marionette into react.js and I notice the browser doesn't seem to be able to pick up the formatting for buttons, though it always used to when working with backbone.marionette.
Relevant HTML/Javascript code:
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Order of the Mouse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/jpg" href="./ico/favicon.jpg">
<meta name="description" content="Psychological horror/detective/spiritual RPG set the medieval, magical future world of 2079; Web-Based">
<meta name="keywords" content="RPG, Horror, Detective, Order of the Mouse, Rabbit-Cat, Dragon-Bear, Clown-Fox, Deer-Wolf">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<script src="./js/vendor/jquery-1.11.3.min.js"></script>
<script src="./js/vendor/bootstrap.min.js"></script>
<script src="./js/vendor/underscore-min.js"></script>
<script src="./js/vendor/backbone-min.js"></script>
<script src="./js/vendor/backbone.marionette.min.js"></script>
<script src="./js/vendor/react.min.js"></script>
<script src="./js/vendor/react-dom.min.js"></script>
<script src="./js/vendor/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,200' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="main" ng-controller="MainController">
<!-- Main Header -->
<div class="jumbotron" id="top-bar">
<div class="container" id="header"><h1 id="title-text1"><span class="brand">ORDER of the MOUSE: Alpha</span></h1>
<img id="deer-wolf" height="128" width="128" src="./img/alphaDeer-Wolf_small.png" alt="deer-wolf">
<img id="tiger-humming" height="92" width="128" src="./img/alphaTiger-Humming_small.png" alt="tiger-hummingbird">
<h4 id="main-sub">Rabbit-Cat, Dragon-Bear and Clown-Fox experience horror in the Castle of Cages and Revolving Walls.</h4>
</div>
</div>
</div>
<!-- MVC starts here-->
<div id="content"></div>
<script type="text/babel">
var StoryBox = React.createClass({
render: function() {
return (
<div className="storybox">
<p><em>You are Drogon Barre, aka Dragon-Bear.</em></p>
<p>The date is October 3rd. You are sitting quietly at your father's house when a letter arrives through the door with details of a rape and murder. The letter says that the murder was committed by a member of the infamous cult <strong>The Order of the Mouse</strong>. The writer claims the victim was her sister and that she looked on powerless as the assailant took her sister's life. She claims that the perpetrator currently resides in a hotel just outside Plymouth. The letter gives the address but no further details.</p>
<p>Do you choose to investigate?</p><button type="button" class="btn btn-success" id="yesbtn">Yes</button><button type="button" class="btn btn-danger" id="nobtn">No</button>
</div>
);
}
});
ReactDOM.render(
<StoryBox />,
document.getElementById('content')
);
</script>
<!-- Modules -->
<script src="js/app.js"></script>
<script src="js/page-move.js"></script>
<script src="js/audioset.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/StoryController.js"></script>
<script>
</body>
</html>
Why isn't bootstrap auto-styling the buttons? Bootstrap is definitely being loaded, and the debugger in Firefox throws no errors.
To set class attribute you should use className instead of class,
<button type="button" className="btn btn-success" id="yesbtn">Yes</button>
<button type="button" className="btn btn-danger" id="nobtn">No</button>
Example
Related
So I have the css link here:
<link rel="stylesheet" type="text/html" href="/public/assets/lib/css/style.css" />
Now, in this current state the styling doesn't show up at all. I've looked into what others have said and tried:
take off rel="stylesheet"
change to "text/html"
check the paths
put it in public folder regards to express
add <base href="/">
etc..
still I'm having issues.
If I have text/css, I get mime errors.
my file path below:
app.js:
var express = require("express");
var app = express();
var request = require("request");
app.set("view engine", "ejs");
app.use(express.static(__dirname + '/public'));
app.get("/", function(req, res) {
res.render("search");
// res.render("location");
header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
*
<link rel="stylesheet" type="text/html" href="/public/assets/lib/css/style.css" />
*
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link
href="https://fonts.googleapis.com/css?family=Josefin+Sans:600|Open+Sans&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<script
src="https://kit.fontawesome.com/3870ba704e.js"
crossorigin="anonymous"
></script>
<title>tv guide</title>
</head>
<body>
search:
<%- include('partials/header') %>
<section class="container-fluid content">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<i class="fas fa-tape">filmraid</i>
</a>
</nav>
<h1>Search for a Movie</h1>
<form action="results" method="GET">
<input type="text" placeholder="search term" name="search" />
<!-- <br />
<input type="radio" id="usMovies" name="location" /> US
<input type="radio" id="ukMovies" name="location" /> UK -->
<br />
<input type="submit" />
</form>
</section>
<%- include('partials/footer') %>
I'm wondering if I'm missing something else here.
Thanks for taking a look.
Solved this problem by:
creating a new public folder since
http://localhost:3000/assets/lib/css/styles.css
was unreachable.
I could not find any already asked questions relating to my problem.
Also, I'm new (again) to MVC structure as I took a long hiatus.
Anyhow, I created a new layout file _Layoutwithtop.cshtml. The Index.cshtml adopts the layout just fine, although About.cshtml and Contact.cshtml do not.
I will need all future View files to inherit _Layoutwithtop. Here are my attached files. Yes, I have included #Layout = "~/Views/Shared/_Layoutwithtop.cshtml"; line in the About and Contact Page.
Thanks.
_Layoutwithtop.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<meta charset="UTF-8">
<meta content="Great Lakes Imaging carries new and pre-owned radiology and x-ray imaging equipment for Chiropractors, Medical offices and Veterinary clinics. Offering a wide variety of top brands in the industry, we help you find the right equipment for your practice." name="description">
<meta content="Kodak POC 140, AGFA CR 30X, Bennett, HCMI, digital x-ray, film processor, x-ray parts, xray accessories, technique chart, radiation, xray equipment, xray companies" name="keywords">
<link href="Content/bootstrap.min.css" rel="stylesheet">
<link href="Content/Site.css" rel="stylesheet">
<link href="Content/animate.min.css" rel="stylesheet">
<link href="Content/assets/icons/icons.css" rel="stylesheet">
<link href="Content/owl.theme.css" rel="stylesheet">
<link href="Content/owl.carousel.css" rel="stylesheet">
<link href="Content/nivo-lightbox.css" rel="stylesheet">
<link href="Content/nivo_themes/default/default.css" rel="stylesheet">
<link href="Content/styles.css" rel="stylesheet">
<link href="Content/responsive.css" rel="stylesheet">
<link href="Content/colors/blue.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet">
</head>
<body>
<div class="preloader">
<div class="status"></div>
</div>
<div>
#RenderBody()
</div>
<!-- footer -->
#Html.Partial("_footer")
<!-- / footer -->
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<!-- scripts -->
<script src="Scripts/jquery.min.js"></script>
<script>jQuery(window).load(function(){"use strict";jQuery(".status").fadeOut(),jQuery(".preloader").delay(1e3).fadeOut("slow")})</script>
<script src="Scripts/smoothscroll.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery.nav.js"></script>
<script src="Scripts/wow.min.js"></script>
<script src="Scripts/nivo-lightbox.min.js"></script>
<script src="Scripts/owl.carousel.min.js"></script>
<script src="Scripts/jquery.stellar.min.js"></script>
<script src="Scripts/jquery.ajaxchimp.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="Scripts/custom.js"></script>
<!-- / scripts -->
</body>
</html>
Index.cshtml
#{
ViewBag.Title = "Home Page | Great Lakes Imaging, Inc.";
Layout = "~/Views/Shared/_Layoutwithtop.cshtml";
}
<header class="header data-stellar-background-ratio=0.5" id="home">
<div class="overlay-layer">
<div class="navbar bs-docs-nav navbar-fixed-top sticky-navigation" role="navigation">
<div class="container">
<!--- nav header --->
<div class="navbar-header">
<button class="navbar-toggle" data-target="#stamp-navigation" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-grid-2x2"></span>
</button>
Great Lakes Imaging, Inc.
</div>
</div>
</div>
<!--- main home wrapper --->
<div class="container">
<div class="only-logo">
<div class="navbar">
<div class="navbar-header">
<img alt="Great Lakes Imaging Main Logo" src="images/newGLITranswhite.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="intro-section">
<h1 class="white-text intro">Your #1 source for digital x-ray equipment</h1>
<h5 class="white-text">We just happen to have 100 + chiropractic tables, too</h5>
<div class="button">Browse all of our equipment</div>
</div>
</div>
</div>
</div>
<!--- /main home wrapper --->
</div>
</header>
#Html.Partial("_Menu")
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layoutwithtop.cshtml";
}
I'm using Material Design and Angularjs, but the display is random.
It seems sometime that the material-lite.css is loaded at time, sometimes not.
Index.html :
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<!-- META TAG -->
<link rel="stylesheet" href="styles/material.indigo-deep_purple.min.css"/>
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/autocomplete.css">
<link rel="stylesheet" href="styles/ngDialog.min.css"/>
<link rel="stylesheet" href="styles/ngDialog-theme-default.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body ng-app="tdcWebappApp">
<div ng-view=""></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/ngDialog/js/ngDialog.min.js"></script>
<script src="scripts/material.min.js"></script>
<script src="scripts/autocomplete.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>
singin.html :
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header" >
<main class=" mdl-layout__content mdl-color--grey-100 ">
<form>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
Identité
<a href="#registration" class="mdl-tabs__tab" >Adhésion</a>
Activités
Règlement
</div>
<div class="mdl-tabs__panel is-active" id="identity">
...
</div>
...
</div>
</form>
</main>
</div>
Please, can you explain to me what is the mecanism ?
Thanks
If you add an Element after windows.load you have to upgrade the dom manually because material-design-lite does not know that there are new elements. material-lite adds a global object named componentHandler. Simply do this after you added a new material-lite element.
componentHandler.upgradeDom();
//OR
componentHandler.upgradeElement(element);
material-design-lite code
I'm kind of new to Foundation and I'm trying to create a top bar, but my code does not create the top bar for me. Can you help??? I've reviewed the documentation for the top bar, but I'm still stuck.
Thank you in advance.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<!--<div class="row">
<div class="meduim-6 columns"><img src="http://placehold.it/300x100"></div>
</div>-->
<div class="contain-to-grid sticky">
<nav class="top-bar" >
</nav>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation({
topbar : {
custom_back_text: false,
is_hover: false,
mobile_show_parent_link: true
}
});
</script>
</body>
</html>
Thank you in advance.
Your app.css and app.js are missing
<head>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!-- Custom Modernizr -->
<script src="javascripts/foundation/modernizr.foundation.js"></script>
</head>
<body>
<!-- jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- JS Files-->
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
</body>
Here is my html code:
<!DOCTYPE html>
<!--
test app
-->
<html>
<head>
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" charset="utf-8" href="http://darrenvenn.com/greenie.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<title>test app</title>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>Sample Header</h1>
</div>
<div data-role="content" data-theme="a">
<input type="button" value="selection 1" onclick=""/>
<p>
<input type="button" value="selection 2" onclick="" />
</p><p>
<input type="button" value="selection 3" onclick="" />
</p><p>
<input type="button" value="selection 4" onclick="" />
</p>
</div>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
</div>
</body>
</html>
When I run this from a browser it finds the greenie.min.css file just fine. When I run it in PhoneGap/Xcode it does not load the css, ever. Wondering why my css won't load in PhoneGap when it loads fine in the browser. I've tried in many different ways, using the plain and min version, loading locally and loading from url, nothing works, nothing.
This should be so simple!...
Check the permissions of the CSS files and the directories in which they are located. In particular, ensure the x flags are set on the CSS director(ies). This has been known to affect CSS loading in certain cases, such as within EPUBs with certain ereaders including iBooks.
For me it was because i started my paths with '/'. This worked fine in Chrome and Android but not on IOS for some reason.