I would like to make a layout with a toolbar fixed on top, with two side-by-side content scrollable sections on the bottom.
I can correctly create this layout when the md-contents are only nested under one div.
Example (CodePen):
<body ng-app="app" layout="column">
<md-toolbar class="md-whiteframe-z4">Toolbar</md-toolbar>
<div layout="column" flex>
<md-content layout flex>
<md-content flex="50" layout="column">
<md-content flex="50" layout="column">
However, if I nested md-content under two or more divs this breaks the layout and causes the content to overflow out and causes the entire page to be scrollable.
Example (CodePen):
<body ng-app="app" layout="column">
<md-toolbar class="md-whiteframe-z4">Toolbar</md-toolbar>
<div layout="column" flex>
<div layout="column" flex>
<md-content layout flex>
<md-content flex="50" layout="column">
<md-content flex="50" layout="column">
What's going on? How can I create a scrollable md-content when it is inside a nested layout?
This is a case of https://stackoverflow.com/a/29516060/2553215.
Just use md-content instead of div on the outer elements as well.
http://codepen.io/kuhnroyal/pen/EPQeZd
Related
I have a sidebar for searching, and main content to the right of the sidebar. I want the sidebar to remain approx the same width, while the main content can shrink horizontally when the browser window is shrinking horizontally. I am using the Bootstrap 4 grid system to accomplish this. In addition, I am using flex to enable row wrapping. The grid system responsive width works ok, up until the browser shrinks to approx "col-6" size, upon which any further shrinking DOES NOT yield row wrap. I want row wrap at the smallest width to accommodate small devices. How can I achieve this (code below)? I am very new at using bootstrap and flex in general. I am a backend developer dipping my toes into responsive web design. Please advise.
Also, please note that this is not about a "fixed sidebar", at least not yet, as that is instead a sidebar that is fixed during scrolling vertically. I am interested in horizontal responsiveness.
<div class="container">
<div class="d-flex flex-row flex-wrap">
<div id="search" class=" col-6 col-sm-5 col-md-4 col-lg-3 col-xl-3">
<h4 id="searchTitle">Search Criteria</h4>
<div id="searchCriteria">
a form goes here ...
</div>
</div>
<div id="searchResultsColumn" class="col-6 col-sm-7 col-md-8 col-lg-9 col-xl-9">
<h4 id="resultTitle">Search Results</h4>
<div id="searchResultsRows">
search results go here ...
</div>
</div>
</div>
I assume col-6 in a 12 grid system will yield 50% width. If you want the rows to wrap at a certain viewport why are you dividing the two elements into 12 evenly? At your desired break point give both a width of 100%, or whatever the appropriate bootstrap values are e.g.
<div id="search" class="col-12">
...
</div>
<div id="searchResultsColumn" class="col-12">
...
</div>
In a bootstrap website like www.teachyourselfpython.com, the welcome and the resources section (if you scroll down) are WHITE. That is, the background colour is white.
I have tried various things and it is not obvious to me where to put the code or what to put, to change that white background for each section (but not affecting the rest) to a light grey.
For example the 'Our resources' section on the page is BLACK, but I cannot see the code that turns it black.
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<p></br></br></br></p>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Resources</h2>
<h3 class="section-subheading text-muted">A Better way to learn Python.<h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Unlike other books, websites and resources on Python, our customisable and hugely comprehensive, not to mention pedagogically tested power points, can be used by both teachers (to teach) and students for independent learning.</p>
<p>On subscribing to a series, interactivity and embedded videos can be accessed, together with all the python task and challenge solution files.</p>
<p></br></br></br></p>
Sign Up Today!
</div>
<div class="col-md-6" style="text-align:center;">
<div class="jetpack-video-wrapper"><iframe src='https://www.slideshare.net/slideshow/embed_code/64063652' width='80%' height='288' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div>
</div>
</div>
<div class = "row">
<p></br></p>
</div>
</div>
</section>
Can anyone suggest the best method to make a very simple tweak (simply to the main index page) to turn the white parts of the background light GREY
Source code: www.teachyourselfpython.com can be used for demo (in terms of where to insert what)
I have tried adding this under each section
<!-- About Section -->
<section id="about">
<div class="container" style="background-color: #ce0818;opacity:0.8;">
but this turns the block 'red' (or whatever colour) and not the entire WIDTH of the website, this being the problem.
In context of our resources - you should put that background css to the section div not in container div
<section id= 'about' style="background:black;padding: 60px 0;
text-align: center;">
and to change the background to light grey write it in tag like
<body style="background:#cccccc !important;">
This is inline method which is not preferred much . You can use external css and write your css there and include that file in page
To use an external style sheet, add a link to it in the section of the HTML page:
example:
<link rel="stylesheet" href="styles.css">
and write
body{
background:#cccccc;
}
#about{
background: #24242a;
padding: 60px 0;
text-align: center;
}
or can include that css code in that page inside head tag example:
<head>
<style>
//write your style code here
</style>
</head>
teachyourself have that css written in css/main.css file
I need to create footer which will be just like small orange bar, and I need to make it responsive, I mean when I resized my window everything should be ok. How can I do that?
<footer id="footer" role="contentinfo">
<p class="powered-by">
#language ("powered-by German")
</p>
</footer>
This is my <footer> tag in portal_normal.vm
To make your footer responsive, you can use Liferay supported Twitter Bootstrap classes, aided by your own custom styles controlled through media queries in custom.css of theme:
Example:
<div id="footer" class="row-fluid">
<div class="span12 text-center">
<p class="powered-by">
#language ("powered-by German")
</p>
</div>
</div>
Liferay Reference
In my custom.css I write this:
#footer {
text-align: center;
background: #ffa500
}
and get orange centered footer.
Using angular material I'm trying to have a basic layout with a column containing two divs each taking 50% of the height.
When the divs are empty this is working fine but when they have unequal content the 50% flex is ignored and the div with more content takes up more of the height.
I have a codepen demonstrating the problem.
Here's my code:
<div ng-cloak ng-app="MyApp">
<md-content>
<div layout="row" class="outer-row">
<div flex="50" layout="column">
<h3>Both divs are 50% height</h3>
<div flex="50" class="inner-column">
</div>
<div flex="50" class="inner-column">
</div>
</div>
<div flex="50" layout="column">
<h3>Both divs are 50% height but 2nd grows because it has more content</h3>
<div flex="50" class="inner-column" layout="column">
<p>A little content</p>
<p>A little content</p>
<p>A little content</p>
</div>
<div flex="50" class="inner-column" layout="column">
<p>A lot of content</p>
<p>A lot of content</p>
<p>A lot of content</p>
<p>A lot of content</p>
<p>A lot of content</p>
<p>A lot of content</p>
<p>A lot of content</p>
<p>A lot of content</p>
<p>A lot of content</p>
<p>A lot of content</p>
</div>
</div>
</div>
</md-content>
</div>
What is going on and how can I fix this?
Update: This seems to be only happening in Chrome. Why?
The layout-column has max-height: 100% not height. So you need set the height of this(I don't know why it works without content).
You can fix this by insert height for this div. Try this:
<div flex="50" layout="column" style="height: 100%">
Hope this help.
I would like to get bootstrap to show something like the attached image, meaning a div wrapper with blue background-color some padding and 3 images inside (I use this horrible colors just for the sake of clarity).
It should be pretty straight forward but, honestly, I couldn't get it. If I try something like :
<div class="span9">
<div class="row">
<div class="span9" style="background-color:blue;">
<img class="span3" src="..."></img>
<img class="span3" src="..."></img>
<img class="span3" src="..."></img>
</div>
</div>
</div>
Inside my container class, the tird image does not fit in the wrapper and goes below the other two, as it appears in this image:
Anyone would give me a hand, please?
Try this:
<div class="span9" style="background-color:blue;">
<div class="row">
<div class="span3">
<img class="span3" src="..." />
</div>
<div class="span3">
<img class="span3" src="..." />
</div>
<div class="span3">
<img class="span3" src="..." />
</div>
</div>
</div>
Possible solution is clearing floats? Quite a bit has been written lately on this but here is one article as a start. Clearing Floats
From a design and requirements point of view, you might consider something like create divs, then fill them with png images that are extra large then add a transparency to the borders so that have a clear background to appear as if they were bordered as such or show your background color.
The trick I believe for you is to use transparent .png's would do the trick, and or adding the desired look to your images.