What I've done so far
First of all I'm REALLY NEW at laravel. I'm watching a great tutorial on YouTube and following most of the instructions. I uploaded the project to my domain, because I wanted to try out how the database connections worked in a production environment and using MySql (the guy uses sqlite in the video).
Even though I managed to make the project work as its supposed to, when I open up the page, it doesn't look alright, the smaller the screen is, the worst it looks, you can move sideways (it's hideous, really).
It used to work fine
When I created a blank laravel project from hostinger, and I accesed it with my cellphone, for instance, it worked well, and by that I mean that the font that said "Laravel" had margins and everything looked centered and as one is supposed to see a bootstrapped page. After I created a project following the tutorial and uploaded it, the nightmare started.
Showing you the code
The base laravel project says "Laravel" where my project says "gastiGram" (It's commented as "¡¡¡HERE IS THE PROBLEM!!!"); maybe with the less letters it works well on mobile (of course I'm kidding, I must have messed up somewhere). This is the code, guys and gals, so maybe you can help me out. Thanks.
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gastiGram</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
gastiGram <!-- ¡¡¡HERE IS THE PROBLEM!!! -->
</div>
<div class="navbar-brand">
<div>
</div>
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
Vapor
GitHub
</div>
</div>
</div>
</body>
</html>
As no one seemed to find an answer for me...
I tried what others said and my conclusion is that it wasn't a problem with bootstrap nor vue. I guess it was the fact that the classes content and title m-b-md didn't provide the desire responsiveness I expected from the text
<div class="content">
<div class="title m-b-md">
gastiGram <!-- ¡¡¡HERE IS WHERE THE PROBLEM WAS!!! -->
</div>
<div class="navbar-brand">
<div>
</div>
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
Vapor
GitHub
</div>
</div>
I'm willing to accept an answer that demonstrates that what I'm saying is wrong and I can apply other solution to my problem in this project.
Kamlesh Paul suggestions were useful to me... now I have a little bit of a better understanding on how laravel works; still it was insufficient since the font was collapsing sideways applying what he said would work, but didn't, so I just applied the style manually
<h1 style="font-size:20vw;">gastiGram</h1>
<link href="{{asset('css/app.css')}}" rel="stylesheet">
I solved the problem placing this code in head section of welcome.blade.php page.
Related
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Sun Jan 29 23:34:52 ART 2023
There was an unexpected error (type=Not Found, status=404).
No message available
So, what I am trying to do is overwrite spring's security login template so that I can use a custom one I made.
My IDE (IntelliJ Idea) doesn't recognise the view (nor does spring) however, if I add this line of code
LoginConfiguration.java
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}
then it works. I would like a way to not overwrite the default resource handlers (because I think it's a bad practice) so both the IDE and Spring can recognise my view.
Application.properties
server.port=8081
spring.datasource.url=jdbc:XX
spring.datasource.username=Y
spring.datasource.password =Z
spring.jpa.hibernate.ddl-auto=update
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect
spring.jpa.show-sql=true
spring.web.resources.static-locations=classpath:/static/
spring.mvc.view.prefix=/static/
spring.mvc.view.suffix=.html
And here's the method I am trying to make it work
LoginController.java
#GetMapping("/sarasa")
public ModelAndView sarasa() {
var mav = new ModelAndView();
mav.setViewName("login-form");
return mav;
}
So I want help on how to make spring boot get the files from src/main/resources/static
I tried resources/WEB-INF, also WEB-INF/classes/, resources/templates/, etc. I am using no template handler (so no thymyleaf or anything and I'd rather not use one since I want to use react later). I also saw lots of post on this site regarding this problem but none of them solved my issue.
Also, here's my login-form.html
login-form.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.login-form {
width: 340px;
margin: 50px auto;
font-size: 15px;
}
.login-form form {
margin-bottom: 15px;
background: #f7f7f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.login-form h2 {
margin: 0 0 15px;
}
.form-control, .btn {
min-height: 38px;
border-radius: 2px;
}
.btn {
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="login-form">
<form action="/login" method="post">
<h2 class="text-center">Log in</h2>
<div class="form-group">
<input type="text" name="username" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" name="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Log in</button>
</div>
</form>
</div>
</body>
</html>
I've run npm run watch and received the message
This dependency was not found:
* in ./resources/assets/js/app.js
To install it, you can run: npm install --save
So I ran npm install --save but still get the same message.
From my understanding, I need npm run or npm run watch to load the Vue files in Laravel.
For example, in 'resources/assets/js/components/Example.vue' file, I made edits to it but when I load up 'resources/views/welcome.blade.php' file, which I have as follows, the update from Example.vue file does not load.
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#if (Auth::check())
Home
#else
Login
Register
#endif
</div>
#endif
<div id="app">
<example></example>
</div>
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
Documentation
Laracasts
News
Forge
GitHub
</div>
</div>
</div>
<script src='js/app.js'></script>
</body>
</html>
(I only added in the script src link and the div with the 'app' id and the 'example' component)
What must I do to load the changes made to the Example.vue file? After this, I need to create new components in Vue.js in Laravel as well for my application.
You need to run :
npm install
then :
npm run dev
Eventually I figured it out what happens. I don't know why exactly but I have got the answer:
You are trying to include a vue component in a non-layout page like welcome.blade.php. Try wrapping this single page in a layout and add your component, in this case <example></example>. Be sure you are linking to your app.js.
Updated:
This is what happens exactly: Answer.
For some reason, IE-8 doesn't display my menu inline. (see picture attached)
My code is:
#navigation #main-menu {
display: inline-block;
float: none;
margin: 0 auto;
padding: 0;
position: relative;
text-align: center;
line-height: 18px;
font-size: 12px;
list-style: none;
}
I have found the following post IE8 display inline-block not working. Tried adding the Doctype, as well as added this code:
<!-- [if lt IE 8]>
<style type="text/css">
#navigation #main-menu {
display: inline;
}
</style>
<![endif]-->
Still doesn't work, any advice? you can see a picture with the issue here: http://preciseos.com/PreciseOs/Untitled.jpg
Here is the html code:
<ul style="margin-top:20px;margin-right: 10%;" class="nav-collapse collapse" id="main-menu">
<li class="active">Home</li>
<li class="">About</li>
<li>Services</li>
<li>Work</li>
<li>Contact</li>
You can also see the issue at www.preciseos.com.
Thanks,
Oz
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Why dont you add this?? which is the answer of your source. Give it try
IE8 will treat it as a block level element unless you use float
Note:
I posted doctype as comment but it was corrupted, so posting this as answer
Updated:
HTML
<ul id="main-menu">
<li class="actives">Home
</li>
<li class="actives">About
</li>
<li class="actives">Services
</li>
<li class="actives">Work
</li>
<li class="actives">Contact
</li>
</ul>
CSS
.actives {
display: inline;
padding:10px;
float: left;
}
a {
text-decoration:none;
}
Demo
The reason it breaks the layout is IE8 does'nt support HTML5 Elements such as nav.
Instead you can use <div> tag or try including javascript Workaround HTML5shiv to support IE
First, make sure you target the li element with your selector
#navigation #main-menu li
as well try using float instead of display: inline;
#navigation #main-menu li {
display: block;
float: left;
margin-right: 10px;
}
As Surjith SM said, the IE8 doesn't support HTML5 elements such as nav.
The problem was solved by adding the following code:
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
html5shi(m|v) creates doc elements for all the html5 elements so the styles from your CSS can kick in. Default behaviour for IE is to ignore unknown elements. For more info see header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don't support HTML5?
I am beginner in Laravel 4 and I have include css file using HTML class but it's not working so please help me.
My code is :-
In view :- model_window.php
<?php HTML::style('css/style.css'); ?>
<input type="submit" value="show" name=""show_button>
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
</div>
</div>
my css file :- in public -> css -> style.css
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
you can rename your file to such as index.blade.php second of that must be have blade and you can simply use:
{{ HTML::style('public/css/index.css') }}
{{ HTML::script('public/js/jquery.pnotify.min.js') }}
you must to put files into public directory and then can easily use
<?php echo HTML::style('css/style.css'); ?>
You always have to include your CSS files in the <head> section of your HTML. That's why your styles aren't applied.
And the relevant line should be:
<?php echo HTML::style('css/style.css'); ?>
Your view is invalid. You need to include link to .css file between tags.
<!doctype html>
<html lang="en">
<head>
<?=HTML::style('link/to/style.css')?>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="submit" value="show" name=""show_button>
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
</div>
</div>
</body>
</html>
Now, it will work.
I'm having a issue with the min-height in firefox, I'm trying to put it at 100% but it is not working. In Chrome it works perfectly.
My code is:
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="../css/main.css"/>
</head>
<body>
<div class="main">
<div class="header">Here is the header</div>
<div class="content ">Here is the content</div>
<div class="footer">Here is the footer</div>
</div>
</body>
</html>
And the css file is
.header {
height:160px;
}
.content{
min-height: 100%;
height: auto !important;
height: 100%;
}
.footer{
margin: -215px auto 0 0;
height: 55px;
}
All I'm trying to do is to keep the footer at the bottom of the page, in Chrome it is working, but in firefox it takes no height for the content.
I've been looking for the solution and in many people say to put
#page{min-height:100%;}
html, body{min-height:100%;}
but it makes the same, it still works in chrome but not in firefox.
Can somebody help me?
Thanks
if you're just trying to keep the footer at the bottom you could use
.footer{
position:fixed; /*or absolute, or whatever*/
bottom:0px;
height: 55px;
}