How to hide header and footer in view of yii2?
view->panel
One page without header and footer in yii2.
<div class="wrap">
</div>
and
<footer class="footer">
</footer>
In your app/views/layout you can create a layouts without header and footer (eg: starting duplicating main.php layout and removing what not needed)
then in you controller/action you can use the new layout assigning
...
$this->layout = 'your_new_layout';
return $this->render('your_view',[
'model'=> $model,
]);
Related
Import React from "react";
export default Layout() {
return (
<div>
<aside> side left bar </aside>
<aside> side right bar </aside>
<main>
<navBar/>
<FirstComponent /> // hidden
<SecondComponent />
</main>
<div>
)
}
when layout render show a secondComponent at the top of mainContent and make user to scroll up to show a first component
I am trying to create a website using React and Tailwind for the first time.
I want to display a Hero Section at the top and Nav bar at the bottom of the screen.
My strategy for doing this would be to have two separate divs. The hero section at 80vh and the Navbar at 20vh to cover the full page.
When trying to set this up I am trying to set my Hero Component up as such:
const HeroSection = () => (
<div className="h-4/5 bg-green border-nft-gray-1">Hero Section</div>
);
export default HeroSection;
I am using the documentation of h-4/5 for 80% screenspace as document here:
https://tailwindcss.com/docs/height
Unfortunately the front end does not show this effect and here is the result, the Hero Section is the green div, it does not fill 80%vh but remains as big as high as the content.
Here is where the app is being compiled:
const Marketplace = ({ Component, pageProps }) => (
<NFTProvider>
<HeroSection />
<Navbar />
</NFTProvider>
);
export default Marketplace;
And here is the Provider im using to transfer data that wraps the two components and what is returns
return (
<NFTContext.Provider value={{ nftCurrency, buyNft, createSale, fetchNFTs, fetchMyNFTsOrCreatedNFTs, connectWallet, currentAccount, isLoadingNFT }}>
{children}
</NFTContext.Provider>
);
From I can tell this is not interfering with the CSS in any way, what am I doing wrong in regards to tailwind and how do I achieve my desired composition?
Thanks alot
You have set the height of your div (hero section) to h-4/5 which is indeed 80% height. But that height is only relative to its parent window. In order to do the styling you're thinking of you have to specify that you want the height of the whole viewport.
So change it to <div className="h-[80vh] bg-green border-nft-gray-1">Hero Section</div>
Instead you can provide the height when you use the components.
const Marketplace = ({ Component, pageProps }) => (
<NFTProvider>
<HeroSection className="h-4/5" />
<Navbar className="h-1/5" />
</NFTProvider>
);
export default Marketplace;
And remove h-4/5 from the herosection component itself .
I have this custom handelbars helper
// custom-helper.js
module.exports = function(name, options) {
if (!this._sections) {
this.sections = {};
}
this._sections[name] = options.fn(this);
return null;
};
// register with assemble
var app = assemble();
app.helper('section', require('./custom-helper.js'));
How to Register custom handelbars helper in assemble 0.17.1
This helper should work like here:
Handlebars with Express: different html head for different pages
And in my grunt Project is does work perfectly. But in this gulp Project it´s not working.
My Layout.hbs:
<body>
<div id="page">
{%body%}
</div>
{{{_sections.foot}}}
</body>
My pages that contain the _sections.foot content and the rest of the page content:
--- layout: default.hbs ---
<h1>Body Blah Blah</h1>
<p>This goes in page body.</p>
{{#section 'foot'}} my custom per page foot content {{/section}}
What the code should do is to tage the custom content in my pages, that is this:
{{#section 'foot'}} my custom per page foot content {{/section}}
and render it in the place that I defined in the layout:
{{{_sections.foot}}}
When I run my gulp task or assemble task I get this.
"null" is written in my rendered .html file at the position in my page.hbs, thats directly under the pages content inside #page and not after #page where my layout.hbs says to put it in.
Here are the Problems:
1. Null is rendered and not the content.
2. Even if the content would be rendered it would appear at the wrong position in html.
I'm using Foundation, and would like a sticky top bar with sub links to internal parts of the page. The problem is, if I do it naïvely, i.e.:
<div class="sticky">
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<ul class="left">
<li>Intro</li>
<li>Basic</li>
</ul>
</section>
</nav>
</div>
... not much stuff ...
<a name="/intro"></a>
<h2>Intro</h2>
... much stuff ...
<a name="/basic"></a>
<h2>Basic</h2>
... much stuff ...
... then the top of the page scrolls to the top of the header, which is then obscured by the sticky top bar. See the jsfiddle and click on the top links to see what I mean.
How can I keep a sticky top bar, yet have clicks on the top bar scroll the page such that the header is right below the top bar, instead of obscured?
Solution #1
Add an <h2> style rule to the CSS, something like:
h2 {
margin-top: 30px;
}
Solution #2
If you want to minimise the extra white-space added to the document, you might try something like the following, instead:
a[name]:target {
padding-top: 30px;
}
This will only add white-space to the <a> element which is currently targeted.
I ended up writing a function to do this.
It changes the window location, so acts as if the user clicked an <a href='#internal-ref></a> link.
It scrolls to the link anyway using scrollIntoView() (thanks to this answer for making me aware of its existence).
It then scrolls back by $("nav.top-bar").height() pixels using window.scrollTo().
The code:
function scrollToAnchor(name) {
// change location
window.location = '#' + name;
// scroll to element anyway
var element = $("a[name='" + name + "']")[0];
if (!element) {
console.error("No such anchor with name", name);
return;
}
element.scrollIntoView();
// scroll back to leave room for sticky nav
var stickyNavHeight = $("nav.top-bar").height();
console.log(stickyNavHeight);
window.scrollTo(window.scrollX, window.scrollY - stickyNavHeight);
}
Live demo.
What is the best practice to make different layouts for pages in Yii2?
The problem I am facing is that Yii2 layout/main.php code looks like
<div class="container">
<?= $content ?>
</div>
Yii2 uses Bootstrap and I need to make full width image only in site/index.php.
Basically in the index.php I need to wrap
<?= $this->render('_search') ?>
into .container-fluid class.
How can I replace .container class to .container-fluid class only for index.php page?
Make a new layout, e.g. layout-fluid.php, and in controller do
public function actionIndex()
{
$this->layout = 'layout-fluid';
return $this->render('index');
}
If fluid container is the only change you need, you can do this instead: in index view file add
$this->params['fluid'] = true;
And in layout file change the desired container to
<div class="container<?= $this->params['fluid'] ? '-fluid' : '' ?>">
params array is a good place to propagate information within view.
If you need just change wrapper class only for site/index, in main.php you can do it like this:
<div class="container<?=($this->context->id=='site' && $this->context->action->id=='index')?'-fluid':'';?>">
<?= $content ?>
</div>