As per the bootstrap documentaion
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable.
In ASP.NET MVC we have layout.cshtml page which typically includes container. and all other views gets rendered inside the this container.
Does that mean we cannot use 'container' in the individual view?
It all depends on your layout structure and what you want to achieve. There are 2 ways to accomplish this (I can't think of any more).
I don't use containers in my _Layout.cshtml template. I normally have my containers in my views. My _Layout.cshtml template only has the bare minimum.
This is what my _Layout.cshtml template normally looks like:
<body>
#RenderBody()
#Html.Partial("_Footer")
#Scripts.Render("~/bundles/js")
#RenderSection("scripts", false)
</body>
And then in my views I would have the following:
<div class="container">
<p>Test paragraph</p>
</div>
You can also have the container in your _Layout.cshtml template but then in your views you must just remember that you already have a container that you are working with. So your _Layout.cshtml it could look like this:
<body>
<div class="container">
#RenderBody()
</div>
#Html.Partial("_Footer")
#Scripts.Render("~/bundles/js")
#RenderSection("scripts", false)
</body>
And then your view could look like this:
<p>Test paragraph</p>
The best way to see what will work in your scenario is to play around with the various positionings of the containers and the other HTML components. It will take a while but it will give you an indication of what is possible and what is not.
Related
Is there a way to set the height of a div using only CSS so it will fill out the reminder of the page height?
I have very limited control over the webpage (a client's custom framework), and it's not possible to change any html or use javascript.
Basically I have a textbox where I can write CSS, and that's it.
Also, I can't make fundamental changes(like introducing flex or anything like that) since it would break the page/site.
The site don't use any media queries or define viewports or anything like that. Basically they use HTML 3.2. It's an ASP.NET WebForms site where the core parts were built around 2002 - 2005.
...
<body>
...
<div id="rowContainer"> <!-- This is the div that needs to go all the way down to the very end
of the entire page.
(NOTE: NOT the end of the visible part of the page) -->
<!-- child elements consist of hierarchy of divs
(but are row based, the content of a "row" is undefined),
which use a mixture of relative, absolute and fixed positioning.
They are dynamically generated and they are "undefined",
so no assumptions can be made about the child nodes -->
<div css="row" > ... </div> <!-- These child divs might all be
absolutely positioned -->
<div css="row" > ... </div>
<div css="row" > <!-- row content is undefined and can change at any time --> </div>
<div css="row" > ... </div>
</div> <!-- There are no other visible elements after the "rowContainer" -->
</body>
use
#rowContainer{
height:100vh;
}
I'm trying to create a fixed Navbar using Project Clarity
I'm using it in my Angular project, they are using FlexBox, I have tried putting in position: fixed but it doesn't seem to work, anyone have any ideas ?
<clr-header class="header-6">
In order to fix the header so that content scrolls underneath it, your application needs to have the correct Application Layout. Our components work within this structure because A properly structured layout enforces an optimal, consistent experience across applications.
The general structure for A Clarity Application layout takes this form:
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
...
</header>
<nav class="subnav">
...
</nav>
<div class="content-container">
<div class="content-area">
...
</div>
<nav class="sidenav">
...
</nav>
</div>
</div>
Obviously, you can get rid of the parts that may not be relevant to your app like: alert-app-level, subnav etc ...
You can see this working in a quick demo I made with inspiration from Bob Ross. As you can see the content scroll underneath the application header.
if someone has also either very this problem, or another problem where some css does not work within Angular:
Since we mostly structure our UI code in multiple components in Angular, and since each component puts its own host-tag in the generated DOM between the actual html tags, the clarity library has some problems with it.
So as a workaround, if you still want to be able to keep your current htmls as they are, you can define this css in each your component's css file:
:host { display: contents; }
This causes the component's box not to render; means the host tags are still visible in DOM, but they will not have any effect regarding CSS. And any clarity CSS will work again.
Given some very basic html using flexbox, I can achive a screen with a header, footer and a content area that fills all the space in between:
<html>
<body style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;flex-direction:row">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row">Footer</div>
</body>
</html>
Header displays at top, footer at the very bottom.
+++++++++++++++++++++
+ Header
+ Content Area
+
+
+
+
+ Footer
+++++++++++++++++++++++++
However, if I try to achieve the same thing within Aurelia (using the webpack starter kit) the grow seems to be ignored on both the body and the content elements.
index.ejs -- comes with starter kit I added styling to original file
<body aurelia-app="main" style="display:flex;flex-direction:column;flex-grow:1">
app.html -- changes to original starter kit file
<template>
<div style="display:flex;flex-direction:row;">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row;">Footer</div>
</template>
I also tried adding flex to <template style="display:flex;flex-direction:column;flex-grow:1">
Everything looks good when you inspect the page -- in fact, looks almost exactly like the basic html example. However, the body and the div containing the Content Area do not grow to fill the height of the page.
I tried to get an example working in Plnkr but it actually has the same problem as Aurelia. I noticed that it is using shadow element just like Aurelia does -- I'm guessing that may have something to do with it?
For it to work with Aurelia (or alone), you should layout the markup like this
<body aurelia-app="main" style="height:100vh;margin:0;display:flex;flex-direction:column;">
<my-template style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;">Header</div>
<div style="display:flex;flex-grow:1">Content Area</div>
<div style="display:flex;">Footer</div>
</my-template>
</body>
where the <template>, if it gets rendered, needs to be <my-template> for it to work, as the <template> tag has a special meaning and won't render visually, see MDN; https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template.
Then the body (or any main element) needs a height, and here I used height:100vh.
Also do note, the flex-grow you had on the <body> won't apply if not its parent, the <html> also has display: flex
Scenario
Suppose I have a web service capable of fetching a webpage and its static assets (e.g. using PhantomJS). I want to be able to serve the static DOM sub-structure (e.g. everything under the #content div) along with its styling to a new site that shows the extracted webpage on the left side along with the amazing results of my super-amazing awesome machine-learning algorithm for extracting information from webpages on the other side.
Question
Supposing I can send down the HTML sub-structure, CSS, and other asset files down from the server, how do I go about injecting the HTML substructure into a div on my page while scoping the styling?
<!-- partially modified content pulled from another site -->
<div id="content">
<!-- I might pull stylesheets from head of source site -->
<!-- and inject them in content? Or should I just keep -->
<!-- track of styles separately and manually inject them? -->
<link rel="stylesheet" type="text/css" href="theme.css">
<img src="new/path/to/static/resource/that/i/saved"/>
</div>
<!-- my own web page with stuff etc -->
<div id="left">
<!-- INSERT CONTENT DIV AND OTHER ASSETS HERE -->
</div>
<div id="right">
<!-- here I have Vue components and other page interaction stuff -->
</div>
Currently I'm using VueJS for my webpage. I know I can do style scoping using Vue components -- maybe there is a way to leverage that? But I really want to know how to solve this problem in a general, framework-agnostic way. I'm too paralyzed by all these things I think could go wrong to even start...
I have two views in a Drupal page with the following structure:
<div>
<div>Some content</div>
<div> View 1 </div>
<div> View 2 </div>
</div>
Now I want a wrapper div covering the two views:
<div>
<div>Some content</div>
<div class="wrapper">
<div> View 1 </div>
<div> View 2 </div>
</div>
</div>
What is the best and easiest way to do this?
A cleaner way would be to use the views_embed_view function to get the output from the two views, which you then wrap in a div.
Where to put this code and how to do it, would depend on how you are doing things now. You could create a block for it and gain the flexibility of blocks.
You'll want to create a custom .tpl file for this. It would be something like, but not exactly:
views-view-viewname.tpl.php
To find the file name, edit the views then look under Basic Settings > Theme.
You can also use Views attachments (Google around to figure out how to make them). So make View 1 a normal view and attach View 2 to appear after View 1. You will get a wrapper div around both the views.