index.html:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app" class="bg-red-300"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue:
<template>
<div class="flex flex-col md:flex-row">
<Nav class="bg-gray-300 md:w-1/4" />
<router-view class="bg-yellow-400" />
</div>
</template>
<script>
import Nav from './components/nav_components/Nav.vue';
export default {
name: 'App',
components: {
Nav,
},
};
</script>
<style></style>
640px Tailwind's small breakpoint (sm)
768px Tailwind's medium breakpoint (md)
Until 768px I use flex-col, and for bigger screen sizes I use flex-row as you can see in my code as well.
RESULT: (0-768px width, flex-col):
Between 640px and 768px the width of both my Nav and router-view containers stop expanding and I can see the red background of my where I mount my App.
RESULT: (>768px width, flex-row):
After 2050px, my container stops expanding which leads to the same result as mentioned before.
What can i do to workaround this behaviour?
Max width was by default 1536px. Setting max-w-full to my router-view container fixed the problem.
Related
I am developing a codeigniter4 web-application. I use apache as my web server. When I enable CSP in app/Config/App.php using
public $CSPEnabled = true; , I get the image in my web page blocked. How would I unblock images from same origin and disable others by customizing CSP behaviour?.
The head tag of my code is:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png" />
<link rel="icon" type="image/png" href="../assets/img/favicon.png" />
<title><?=$title?></title>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
<!-- Nucleo Icons -->
<link href="../assets/css/nucleo-icons.css" rel="stylesheet" />
<link href="../assets/css/nucleo-svg.css" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Main Styling -->
<link href="../assets/css/soft-ui-dashboard-tailwind.css?v=1.0.4" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<style>
.errors {font-size:small;color:red;}
.error {font-size:small;color:red;}
.alert {font-size:small;color:red;}
</style>
</head>
The portion of the page that contains the image which gets blocked after enabling csp is:
<div class="w-full max-w-full px-3 lg:flex-0 shrink-0 md:w-6/12">
<div class="absolute top-0 hidden w-3/5 h-full -mr-32 overflow-hidden -skew-x-10 -right-40 rounded-bl-xl md:block">
<div class="absolute inset-x-0 top-0 z-0 h-full -ml-16 bg-cover skew-x-10" style="background-image: url('../assets/img/curved-images/curved6.jpg')"></div>
</div>
</div>
</div>
My ContentSecurityPolicy.php file has the following settings:
public $reportOnly = true;
public $styleSrc = ['self','https://fonts.googleapis.com/css','https://cdn.tailwindcss.com'];
public $imageSrc = ['self', 'https://cdn.tailwindcss.com'];
Some of the stylings also doesnt work after enabling CSP.
You will have to whitelist the domain from which you load the image in your website at, app\Config\ContentSecurityPolicy.php.
The line to be modified is, public $imageSrc = 'self';
self - You can load images from the same domain as your website.
Example:
public $imageSrc = ['self', 'data: w3.org/svg/2000', 'https://www.google.com'];
With this you can load images from your same domain, google.com and inline SVG images which is usually used in Twitter bootstrap.
I am using thymeleaf for my front end design ,I create a nav bar and
I want this nav bar work for all pages, my Requirement is make one nav
bar and use this nav bar in every page ,with out define another nav
bar in separate page .
I create a nav bar inside my fragments folder that situated inside
template folder
When i call my nav bar in my index page it is not working
Here is my code of index page
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Coursel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="/static/demo.js"></script>
</head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid">
here my register form codes
</div>
</body>
</html>
nav.html
<nav class="nav">
<a class="nav-link active" th:href="#{/templates/index.html}">Active</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Register</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Login</a>
<a class="nav-link active" th:href="#{/templates/index.html}">AboutUs</a>
</nav>
Here is my project structure
I use IntelliJ IDEA as code editor.
It is possible, look into Thymeleaf Layout Dialect.
In short:
you create some layout.html in your templates folder. In it:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- all common head tags - meta etc. -->
<title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE">App name</title><!-- define title in your page template and it will be added too your app name, e.g. 'Home - My App' -->
</head>
<body>
<nav>
<!-- your nav here -->
</nav>
<section layout:fragment="content">
<!-- don't put anything here, it will be replaced by the page contents -->
</section>
</body>
</html>
And in you page templates:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/path/to/layout.html}">
<head>
<title>Page name</title>
</head>
<body>
<section layout:fragment="content">
<p>This will be added into your layout!</p>
</section>
</body>
</html>
In order to make it work, you will need to add it to your templateEngine() bean definition:
#Bean
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver( thymeleafTemplateResolver() );
templateEngine.addDialect( new LayoutDialect() );
return templateEngine;
}
See mvnrepository to import this dialect using maven.
I am trying to centre a button inside a region by using jQuery easyui layout feature:
<!DOCTYPE html>
<html style="height: 90%;">
<head>
<meta charset="UTF-8">
<title>The Analytic Platform - Home Page</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style>
.middle {
height:30%;
}
.topandbelow {
height:40%;
}
</style>
</head>
<body style="height: 90%;">
<h2>The Analytic Platform</h2>
<p>Easy analytics for everyone!</p>
<div id="p" class="easyui-panel" title="Step 1: Load data for analysis" style="width:100%;height:100%;padding:10px;">
<div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%">
<div data-options="region:'west',split:false,border:true" style="width:40%;" title="Get data from Excel file">
<div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%">
<div data-options="region:'centre',split:false,border:true" style="width:100%;">
<a href="ExcelUpload.html" class="easyui-linkbutton" >Upload Excel file</a>
</div>
</div>
</div>
<div data-options="region:'east',split:false,border:true" style="width:40%;height:100%" title="Get data from database">
<div class="easyui-layout" data-options="fit:false" style="width:100%;height:100%">
<div data-options="region:'north',split:false,border:true" class="topandbelow"></div>
<div data-options="region:'centre',split:false,border:true" class="middle">
Define Database Connection
</div>
<div data-options="region:'south',split:false,border:true" class="topandbelow"></div>
</div>
</div>
</div>
</div>
</body>
</html>
The "east" region is not displaying its nested "centre" region with the "north" region overlaying it.
What could be wrong in here?
I left on Friday with my application working in dev mode....I came in this morning and the Layout.Mobile.chtml was NOT being used.....THIS IS DEV MODE so I still starting the web server each time.... I read about a similar issue related to the cache....but I don't see how this could be related to my problem as once the web server shuts down the cache is cleared.
I am using Visual Studio 2012 as my development "web server".
Everything was running and I don't see where the problem is nor do I understand where to look next. Any suggestions of how to diagnosis this problem or where to look would be appreciated.
This is ONLY for the Layout.Mobile.cshtml....when I switch back to the Layout.cshtml it is being called fine....
In my global.asax.cs I have the following set to force firefox to display using the mobile layout:
//The following forces Firefox to use the Mobile View ONLY
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("mobile")
{
ContextCondition = (context =>
context.Request.UserAgent.IndexOf("Mozilla", StringComparison.OrdinalIgnoreCase) >= 0)
});
My _ViewStart.cshtml file is:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
My _Layout.Cshtml is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Etracs</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
#RenderSection("scripts", required: false)
</head>
<body>
<header>
*#
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#Html.Partial("_ViewSwitcher")
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - Turning Basin Services</p>
</div>
</div>
</footer>
</body>
</html>
My _Layout.Mobile.cshtml is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
#* #Styles.Render("~/Content/Mobile/css") *#
#* #Styles.Render("~/Content/jquerymobile/css") *#
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
#* #Scripts.Render("~/bundles/jquery") *#
#* #Scripts.Render("~/bundles/jquerymobile") *#
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
#RenderSection("scripts", required: false)
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header">
#RenderSection("backbtn", false)
<h1>#ViewBag.Title</h1>
#RenderSection("Home", false)
</div>
<div data-role="content">
#* #RenderSection("featured", false) *#
#RenderBody()
</div>
<div data-role="footer">
<h4> #Html.Partial("_ViewSwitcher") © #DateTime.Now.Year - Turning Basin Services</h4>
</div>
</div>
</body>
</html>
In my views I am usually setting up the view to impliclity map to the Layout using viewstart.... however, my .Login.Mobile.cshtml hardwires the assocaiation to the mobile layout as follows:
#model TBS.Etracs.Web.Main.Models.LoginModel
#{
ViewBag.Title = "Log in";
Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
}
#Html.ValidationSummary(true)
<section id="loginForm">
#* #using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) { *#
#using (Html.BeginForm ("Login")) {
#Html.AntiForgeryToken()
<div data-role="content">
<div data-role="fieldcontain">
<label for="UserName">UserName:</label>
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div data-role="fieldcontain">
<label for="Password">Password</label>
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</div>
<div data-role="fieldcontain">
<label for="ProgramMode">ProgramMode</label>
<select name="ProgramMode" id="ProgramMode">
<option value="VW">VW</option>
<option value="Porsche">Porsche</option>
<option value="Bentley">Bentley</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="ConnectionMode">ConnectionMode</label>
<select name="ConnectionMode" id="ConnectionMode">
<option value="Production">Production</option>
<option value="Test">Test</option>
</select>
</div>
<input type="submit" value="Log in" />
</div>
}
</section>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I see you acknowledged you didn't believe this was related to the cache - but I'm adding this here since it's critical to be aware of when using mobile views.
The caching bug is explained here
Dave Ward:
Something everyone should be aware of when using MVC 4's mobile view
support is that there's a bug in the RTM version that results in the
wrong view being rendered for mobile devices after the view falls out
of the resolution cache the first time. The tricky part is that you
won't notice this in debug mode or until 15 minutes of inactivity in
release mode, so it's incredibly easy to let the buggy behavior slip
into production. There's an easy fix on NuGet, which Rick Anderson
covers here:
http://blogs.msdn.com/b/rickandy/archive/2012/09/17/asp-net-mvc-4-mobile-caching-bug-fixed.aspx
See also comments in this post
http://www.hanselman.com/blog/MakingASwitchableDesktopAndMobileSiteWithASPNETMVC4AndJQueryMobile.aspx
If you have a custom view engine (like i do) you can just change the base class after installing the nuget package:
public class SiteIdentityViewEngine : Microsoft.Web.Mvc.FixedRazorViewEngine, IVirtualPathFactory
Using Glimpse I found that that the _layout.mobile.cshtml was still being called and included....the problem was that it was not working....which relates to a problem I had earlier.....
In my _Layout.Mobile.chtml I went back to the following code and my layout is now working
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
I used this to replace the following lines in my _layout.Mobile.cshtml
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
The big question that I am VERY confused about is what happened .... this prevous worked for several days and then quit working..... Input would be appreciated.
I have two layouts and both are working in index page, but when I give to another the second one doesn't work. I don't know what the problem is, I'm new to tapestry.
my code is
<html t:type="layout1" title="accountInfo VideoClub"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;" name="viewport" />
<title>Video Club</title>
<link href="./layout/layout.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrap">
<div id="scroll">
<ul id="thelist">
<div style="text-align:center;">
<p><h1>Account info</h1>
<t:actionlink t:id="getStatus"> <img src="../layout/images
/sub.png"/>
</t:actionlink><br/><br/>
<t:actionlink t:id="getStatuss"> <img src="../layout/images
/cancel_sub.png"/> </t:actionlink><br/></p>
</div>
</ul>
</div>
</div>
</body>
</html>
Without the entire code (tml and java) we can't help you much.
Layout components in tapestry are plain components, which render their body with some content around it.
Please paste your code here.