I am designing a front-end login/signup page by using html and materialize css. The features that I am trying to include are:
a tab view inside a card with an unordered list with two items:
"Login" (<a href="#login">), and
"SignUp" (<a href="#signup">).
Two separate content areas with their own id: "login" and "signup"
My goal is to have the "id=login" content load when a user clicks Login, and likewise "id=signup" content to load on clicking SignUp but that's not working. As the image shows, both the tab view and both content "cards" are displayed.
Screenshot
This is my code
<div class="row">
<div class="col l6 offset-l3 m8 offset-m2 s12">
<div class="card-panel center">
<ul class="tabs">
<li class="tab">Login</li>
<li class="tab">Sign Up</li>
</ul>
</div>
</div>
<!-- Login content area -->
<div class="col l6 offset-l3 m8 offset-m2 s12" id="login">
<div class="card-panel center">
</div>
</div>
<!-- Sign Up content area -->
<div class="col l6 offset-l3 m8 offset-m2 s12" id="signup">
<div class="card-panel center">
</div>
</div>
<!-- row ends here -->
</div>
Related
**Using Laravel 5.8.31 & Bootstrap 4. Browser: Chrome v. 76.0.3 and Opera 62.0.33 **
I was testing my CRUD functions by deleting a post. After deletion, the controller redirects back to my post index page. When the page loaded, the bootstrap side bar wrapped down below the other posts, rather than being on the right. Was fine before the post deletion.
I tried altering the cols and floating elements to no avail. Using Chrome dev tools, I see that the sidebar is nested in an em tag that isn't in the code. Tried clearing application cache. No effect.
I suspect this has something to do with the blade templating language and parsing the html, although if it is, I have no idea how to fix this other than manually installing the sidebar on every page.
How do I fix this??
Code can be found here: https://github.com/gkennedy87/Hillcrest/tree/master/resources/views
(It seems that laravel is also wrapping the footer in an em tag. Although this is a non-issue at the moment)
// views/posts/index.blade.php
#extends('layouts.app')
#section('content')
#include('inc.navbar')
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8">
<h1>Our Blog</h1>
#if (count($posts) > 0)
#foreach ($posts as $post)
<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">{{$post->title}}</h2>
<p class="card-text">{!! str_limit($post->body,200,'...')!!}</p>
Read More →
</div>
<div class="card-footer text-muted">
Posted on {{$post->created_at}} by
Start Bootstrap
</div>
</div>
#endforeach
{{$posts->links()}}
#else
<p>No Posts Found</p>
#endif
</div>
#include('inc.sidebar')
<!--end row -->
</div>
<!--end container -->
</div>
#include('inc.footer')
#endsection
// views/inc/sidebar.blade.php
<!--sidebar start -->
<div class="col-md-4 col-lg-4">
<div class="sticky">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<!-- sidebar end -->
I setup the app on a local environment, the sidebar always stays on the right even after deleting a post. The response also doesn't contain any em tags. Could you try clearing the cache:
php artisan cache:clear
php artisan view:clear
php artisan config:clear
I have been working on a job-listing website during the last few weeks as a self taught CS student. I finished the front end of the website in July and now I am learning mySQL and PHP to produce the back-end.
So, on the current "job listing" page search.html, there is currently 4 listing in the page but I typed those directly on the html when I was making the front-end just to see how it will look like.
I have build my database like this and added few examples:
I also made a back-end page to let the user add a a new listing and it is working.
I am not sure it was a good idea to start with the front-end. I am now trying to display three columns (title, location, type) of eachrowbased on my specific front-end layout. I won't display thedate` yet since I have not created it on mySQL.
search.html
<div class="job-listing">
<div class="container">
<div class="job-number">
<h2>We Found <span id="number-jobs-total" class="text-secondary"></span> Offers For <span>You</span> </h2>
</div>
<ul class="job-board">
<li class="job job-1">
<div class="job-title">
<h2>Process Engineer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/19/2019</p>
</div>
<div class="job-industry">
<p>Engineering</p>
</div>
<ul class="job-keywords">
<li>Engineering</li>
<li>Science</li>
</ul>
</li>
<li class="job job-2">
<div class="job-title">
<h2>Chief Financial Officier</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-3">
<div class="job-title">
<h2>Assistant CEO</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-4">
<div class="job-title">
<h2>Front-End Developer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
</ul>
<nav class="pagination-container">
<ul class="pagination">
<li>Previous</li>
<li>Next</li>
</ul>
</nav>
</div>
</div>
Things I will do later:
I need to protect my PHP code against injections
The pagination button is not working
I've created a file called menu.php to be my universal nav/menu file. The way it was created using bootstrap though, I have a div called article at the bottom which serves as the main body of the app, since the sidebar in my menu is expandable/responsive.
I really want to have one global menu file. I'm currently including it in all of my content pages like so:
<?php include("menu.php")?>
This works but it breaks my formatting. What I'm trying to do is make all of my main pages such as index.php have the html formatted so that it will always sit inside the tag in my code below which shows card classes.
<header>
<div class="branding">
<div class="menu-button menu-toggle nav">
<i class="material-icons">menu</i>
</div>
<img src="" />
</div>
<div class="page-details">
</div>
<div class="settings">
<div class="menu-button profile">
<i class="far fa-user-circle fa-2x"></i>
</div>
<div class="menu-button menu-toggle aside">
<i class="material-icons">chat</i>
</div>
</div>
</header>
<div class="app">
<nav>
<div class="title-block">
<img src="" />
</div>
<ul>
<li><a href="#"><i class="material-icons">home</i>
<span>Home</span></a></li>
</ul>
</nav>
<!--This following article section is the main body of the page, that I want each additional page to take up-->
<article>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</article>
</div>
Example:
Menu.php is my global menu/nav file but it makes the page/app act as a wrapper for all the other pages (index.php, editor.php, etc.)
menu.php
<div class="app">
<nav>
Nav menu content
</nav>
<article>
This will be the main page article for index.php, editor.php,etc.
</article>
</div>
example with index.php (the start and end are just hypothetical to show the endpoints)
<body>
<?php include("menu.php");?>
<?php start('article') ?>
<!--Everything from here to the end() call would be inserted in the article tags on menu.php-->
<div class="app">
<div id="content">
<div>
<h1 style="text-align: center; color: #A9BD50; ">Content Management Editor</h1>
</div>
<form method="post">
<textarea id="mytextarea"></textarea>
</form>
<div>
<h1 style="text-align: center; color: #A9BD50; ">Preview</h1>
</div>
</div>
</div>
<?php end() ?>
</body>
I am creating a project on PHP. But I have a problem. I want to pass some values from a section to another section. For example: In first section I am showing all products, and second section I am showing product details. When I click a product on first section, products values should pass second section. I am sharing my codes. Thanks
First Section
<section class="section pb-60 sm-pt-90">
<!-- Portfolio Items -->
<div id="portfolio-gallery" class="portfolio-container isotope-container portfolio-gallery row animated mfp-gallery" data-animation="fadeInUp" data-animation-delay="1200">
<article class="portfolio-item isotope-item col-md-4 col-sm-6 tasarim">
<div class="project-container">
<a href="http://blogaktuel.com//upload/Ekran Alıntısı.PNG" data-size="1080x1440" class="portfolio-gallery__img--main">
<img src="http://blogaktuel.com//upload/Ekran Alıntısı.PNG" alt="" style="width:360px; height:256px;">
<div class="overlay">
<div class="overlay-wrapper">
<div class="overlay-inner background-dark-5 opacity-70"></div>
</div>
</div>
</a>
<div class="project-details">
<h4 class="project-title heading-uppercase">Yeni Proje Mesela</h4>
</div>
</div>
</article>
Second Section
<div id="detay" class="ed-slide">
<div class="slide-container">
<div class="slide-content">
<section class="section sm-pt-0">
<div class="container">
<h2 class="text-white text-center animated" data-animation="fadeInDown"><!-- Project Title --></h2>
<div class="divider divider-alt divider-center divider-light animated" data-animation="fadeInDown" data-animation-delay="300"><span></span></div>
<p class="lead text-white mb-50 text-center animated" data-animation="fadeInDown" data-animation-delay="600"><!-- Project Info --></p>
<!-- Project Images etc. -->
</div>
</section>
</div>
</div>
</div>
You can make that using 2 ways:
-First way: when clicking on a product, you reload the page, and you pass the id in the url, and you display the data in the other section.
-Second way(Best way): via jquery for example, when clicking on a product, you load the data for this product and you display it in the other section.
I solved my problem with jQuery. I am sharing jQuery codes.
$(".details").click(function(){
var proje_baslik = $("input[name=proje_baslik]").val();
var proje_aciklama = $("input[name=proje_aciklama]").val();
var proje_url = $("input[name=proje_url]").val();
var proje_fiyat = $("input[name=proje_fiyat]").val();
var proje_resim = $("input[name=proje_resim]").val();
$("#detay .proje_baslik").html(proje_baslik);
$("#detay .proje_aciklama").html(proje_aciklama);
window.location.href = "http://localhost:81/Projeler/kodaktuelOnePage/#detay";});
Thanks for all comments
I am currently displaying content from my database using a foreach loop within a boostrap panel. However the layout is not behaving as I expected it too, I have tried resolving this using breaks which had fixed the layout from being worse than it is at the present. However it is still off if you take a look at the image below :-
In addition to this I also have bootstrap dropdown menu's that are not working at all embedded within a div.
This is my code -
<div class="parabox">
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- Search -->
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search For Comics">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<strong><p class="navbar-text">Sort Comics By : </p></strong>
<ul class="nav navbar-nav">
<li class="dropdown">
Order Comics<span class="caret"></span>
<ul class="dropdown-menu">
<li>Ascending Order</li>
<li>Descending Order</li>
<li>Numerical Order</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
Universe<span class="caret"></span>
<ul class="dropdown-menu">
<li>Dark Horse Comics</li>
<li>DC</li>
<li>IDW</li>
<li>Image</li>
<li>Marvel</li>
<li>Valiant</li>
</li>
</ul>
</div>
</div>
</br>
<!-- Start of Col Div -->
<div class="col-md-12">
<!--/.Panel for Comics -->
<!-- Count for Comics -->
<?php
if(count($comics)){
?>
</br>
<div class="panel panel-default">
<div class="panel-heading panel-heading-green">
<h3 class="panel-title">My Comics</h3>
</div>
<div class="panel-body">
<div class="row">
<!--/.row1 -->
<!-- Display each comic by id -->
<?php foreach($comics as $list): ?>
</br>
<div class="col-md-3 comic">
<a href="#">
<?= ($list['image'] <> " " ? "<img style='max-width:200px; max-height:250px;' src='Images/{$list['image']}'/>" : "") ?>
</a>
<div class="comic-title">
<?= ($list['name'] <> "" ? $list['name'] : "") ?> #<?= ($list['issue'] <> "" ? $list['issue'] : "") ?>
</div>
<div class="comic-add">
</div>
</div>
<!-- End of Foreach Statement for Comics -->
<?php endforeach; ?>
<!-- Else show this message if user has no entries -->
<?php
}else {
?>
<p><b>You haven't posted any comic yet!</b></p>
<?php } ?>
</div>
</div>
</div>
<!--/.row1-collapse -->
</div>
<!-- /.container -->
</div>
I am using MVC format which is why the code may seem short or missing pieces which is in header and footers within my template part of my application. Any ideas on what I can do to sort the layout out and get the dropdown menu's to work as they do seem a little related ?
As far as I know, bootstrap requires you to always have a markup like:
<div class="container">
<div class="row">
<div class="col-*">…</div>
<!-- many more cols -->
</div>
</div>
So this:
container
row
col
col
col
row
…
structure should always be give, whereby this structure can be nested.
This way the layout has all the negative margin magic applied
UPDATE
According to the posted image I guess that the resulting markup is corrupted (if the »container > row > col« structure exists). I recommend to have a a look at the browser console and compare the resulting dom tree with the expected. It is also very helpful to search the page source, in Firefox corrupted elements (missing closing tag, wrong attributes etc) are shown in red, so this helps to find the bug.
*Create a wrapper div to hold the image, title etc. Then for that div add a css with the style as display:inline-block; So if it is not able to accomodate with in the view in browser, it will get automatically wrapped into the next line. Follow this example see teh working sample code created by some one: http://jsfiddle.net/ajruk60t/3/*
You must break your line after the number of columns your row can contain. For instance, if you use col-3, then you must not define more than 4 columns. At this point, you recreate a row and carry on.
<div class="row">
<?php
$i = 1;
foreach($comics as $list) { ?>
<div class="col-md-3">
...
</div>
<?php
if ($i % 4 == 0) {
?></div><div class="row"><?php
}
$i++;
?>
<?php } ?>
</div>
Alternatively, you can create the same effect adding manual breakpoints rather than recreating a row. I have not tried this solution myself, but read it here:
<div class="clearfix visible-md-block"></div>
Thank you for your help it steered me to the answer which was the foreach loop had to start after the break.
<?php require('template/header.phtml') ?>
<div class="container">
<div class="row">
<!-- Start of Col Div -->
<div class="col-md-12">
<!--/.Panel for Comics -->
<!-- Count for Comics -->
<?php
if(count($comics)){
?>
</br>
<div class="panel panel-default">
<div class="panel-heading panel-heading-green"><h3 class="panel-title">My Comics</h3></div><!-- End of Panel Heading -->
<div class="panel-body">
<div class="row">
<!--/.row1 -->
<!-- Display each comic by id -->
</br> <?php foreach($comics as $list): ?>
<div class="col-md-3 comic">
<a href="#">
<?= ($list['image'] <> " " ? "<img style='max-width:200px; max-height:250px;' src='Images/{$list['image']}'/>" : "") ?>
</a>
<div class="comic-title">
<?= ($list['name'] <> "" ? $list['name'] : "") ?> #<?= ($list['issue'] <> "" ? $list['issue'] : "") ?>
</div>
<div class="comic-add">
</div>
</div> <!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<?php endforeach; ?>
<!-- Else show this message if user has no entries -->
<?php
}else {
?>
<p><b>You haven't posted any comic yet!</b></p>
<?php } ?>
</div><!-- end of row -->
</div> <!-- end of panel body -->
</div> <!-- end of panel panel-default -->
<!--/.row1-collapse -->
</div> <!-- end of col-md-12 -->
</div> <!-- End of Row -->
</div> <!-- /.container -->
<?php require('template/footer.phtml') ?>