The content of my scrolling container stops scrolling when it is, for instance, viewed on an iPad. How can I keep the children from collapsing into themselves and make the scroll?
I don't know if it's specifically a material issue, or if it's the way flex works on different browsers, but I'm seeing this:
This is a cleaned up version of the HTML output:
<md-content class="layout-column flex">
<div class="layout-column">
<div class="layout-padding layout-column">
<div class="layout-column" ng-repeat="item in items track by $index">
<div class="layout-margin layout-row">
<!--more stuff inside with various layout rules-->
</div>
<div class="layout-column">
<!--more stuff inside with various layout rules-->
</div>
</div>
</div>
</div>
</md-content>
This happens in some browsers with nested scrolling/flex elements, such as nested md-content elementes
Related
I have a row class inside a col class using bootstrap 4 which looks perfect on desktop, but for mobile I want to force the row to be below it's parent row when the page is viewed on mobile. So technically I want to 'break out' of it's parent without changing the height of the parent. Here's an example of what I have currently on desktop:
And what I'm trying to achieve on mobile:
My code is just basic bootstrap with no additional CSS changes:
<div id="jumbo" class="row">
<div id="info" class="col-xl-6 col h-100">
<div class="row">
<div id="info-text" class="col offset-md-2">
<p class="display-4">Estate planning made easy</p>
<p>
Let’s get a clear plan in place for your money,<br>
property and other assets here and now.<br>
It’s never too early to protect what’s important<br>
to you and your family.
</p>
<p class="museo-sans-900">Get your free personalised report in just 20 minutes</p>
<button class="btn btn-brand-secondary">Start Now</button>
</div>
</div>
</div>
</div>
You can make two versions of the section. One like the first one and one like the second. Then put id=#desktop for the first and id=#mobile for the second . Then be sure to mark #desktop{display:none} for #media only screen and (max-width: (insert width of mobiles)), and #mobile{display: none} for min-width: (insert width of mobiles) . It s a long way, but if you don t find another easier way you can try this.
I am editing a site to be 3 columns.
Here is example page, currently 2 columns:
https://courses.guitar-dreams.com/lessons/an-introduction-to-triads-and-their-inversions/
So what we have is a header, sidebar, content area, and footer. Seems pretty straightforward. But as I look at the HTML, the structure is so odd. Here is how this page is arranged:
<body>
<div class="learndash-wrapper">
<div class="ld-focus">
<!-- notice how it is starting out with sidebar even though we have 2 headers on top of each other... -->
<div class="ld-focus-sidebar">
<div class="ld-focus-sidebar-wrapper">
<div class="ld-course-navigation">
Here is sidebar navigation content
</div> <!--/.ld-course-navigation-->
</div> <!--/.ld-focus-sidebar-wrapper-->
</div> <!--/.ld-focus-sidebar-->
<!-- ok now the main content -->
<div class="ld-focus-main">
<!-- oh but wait, let's add header first! And namely the 2nd header! -->
<div class="ld-focus-header">
Here is the 2nd header
</div> <!--/.ld-focus-header-->
<!-- ok now that we added 2nd header, let's add main content! -->
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
</div> <!--/.ld-focus-main-->
</div> <!--/.ld-focus-->
<!--/.ld-learndash-wrapper-->
<!-- Oh wait, now that we are at end, let's add that first header now! -->
<div id="wpadminbar" class="">
The topmost header
</div>
</body>
You see what I mean? I am not a web design expert, but I tend to believe that layout of pages generally should follow similar principles to the document publishing world. That is, if your page starts with header, probably good idea for that to be the first design element that you add, and not the last, and moreover, that the design element, if possible, should be placed in the design environment in a way that has physical correspondence to the rendered document.
I am trying to add a right sidebar to make it a 3 column layout. I tried adding a wrapper div to <div class="ld-focus-main"> with display: flex and followed some of the approaches here:
http://geniuscarrier.com/2-columns-layout-with-flexbox/
<div class="ld-focus-main">
<div class="ld-focus-header">
</div> <!--/.ld-focus-header-->
<div class="mywrapper">
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
<div class="mysidebar">My sidebar</div>
</div>
</div> <!--/.ld-focus-main-->
Here I used (as inline styles)
.mywrapper {
display: flex;
align-items: center;
}
.ld-focus-content {
flex-grow:1
}
I didn't use properties on the right sidebar since in the example in the link above it suggested that if all is well with wrapper and left then right part will follow suit.
But above doesn't produce desired result. At bottom of page linked above you see my added divs and "My Sidebar". I think part of the problem is that the theme template uses such bizarre placement of divs and properties such that when I try to add that right column the underlying structure is not making it work as expected. Sort of like 2nd, 3rd order effects... as well as a Jenga game within a Jenga game.
I was thinking about just redoing the entire template, but at this point I would prefer to just add a sticky right sidebar without a ton of rework. That said, to me it seems the proper way to do such a layout, syntactically would be
<div class="mainwrapper">
<div class = "firstheader"></div>
<div class = "secondheader"></div>
<div class = "outercontentwrapper"></div>
<div class = "leftnavigation"></div>
<div class = "contentwrapper">
<div class = "maincontent"></div>
<div class = "rightsidebar"></div>
</div>
</div>
<div class = "footer"></div>
</div>
Just not sure all the specific properties such that the page would behave as is now, plus add a right sidebar.
So with all that, how would you go about adding that right column?
Thanks!
Brian
I have a number of controls declared like this.
<div class="row">
<div class="col-sm-12">
<div>Caption</div>
<input type="text" class="form-control">
</div>
</div>
Trying to refactor my code, I introduced a component to encapsulate this particular behavior.
<div class="row">
<app-textbox [caption]="'Caption'"></app-textbox>
</div>
The markup for the component is just a copy of the original code.
<div class="col-sm-12">
<!-- <div style="width:100%;"> -->
<!-- <div class=""> -->
<div>{{data?.caption}}</div>
<input type="text" class="form-control">
</div>
The problem arising is with the class row seems not to propagate to the component. It spreads to the full width (as it's set to 12 but it's not the width of the component holding the class row - it's smaller). Analyzing the markup in the console of the browser, I can see that the only difference is that there's a tag for the custom control injected in the structure like this:
div class="row"
-- app-textbox
-- -- div class="col-sm-12"
-- -- input
while the "old-style" generates this:
div class="row"
-- div class="col-sm-12"
-- input
One way to handle it is to set the columns on the component in the main page like this.
<div class="row">
<app-textbox [caption]="'Caption'" class="col-sm-12"></app-input-text>
</div>
There are, however, two issues that bother me with it making me feel reluctant to this approach. First one is that the component still gets a (very tiny) extra margin of 15px on each side relative to the enclosing component (all the item have it but the custom app-textbox gets it twice, probably due to encapsulation). The other issue is that this kind of defeats the purpose of the encapsulation.
I've tried spreading the width of the components and setting different styles/classes to the input boxes etc. After a few hours, I realize that I'm at a loss.
Is it possible to make the injected tag app-textbox spread fully in its parent?
I had the same issue. Here is the way I solved it.
Original app.component.html:
<div class="container-fluid">
<div class="row">
<app-one></app-one>
<app-two></app-two>
</div>
</div>
Original one.component.html:
<div class="col-9">
<p>One</p>
</div>
Original two.component.html:
<div class="col-3">
<p>Two</p>
</div>
I moved 'col' divs from one and two components to the app component:
New app.component.html:
<div class="container-fluid">
<div class="row">
<div class="col-9">
<app-one></app-one>
</div>
<div class="col-3">
<app-two></app-two>
</div>
</div>
</div>
New one.component.html:
<p>One</p>
New two.component.html:
<p>Two</p>
For css to be visible in all your components, add it directly to the index.html file, or to app.component.css.
For example on the index.html as the last head element include:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
That URL was taken from : https://getbootstrap.com/docs/3.3/getting-started/
(I'm assuming that your Angular2 project was generated with angular-cli and the files follow the standard names)
About the extra margin, try checking app.component.html. Maybe there's a container div around it. Also check index.html itself
Recently tried to migrate a Polymer1 app to Polymer2 but I am really having a hard time to get stuff working. Here are some things I noticed when trying:
Do I really have to hand pick every paper/iron element for polymer2? I used to just install paper-elements and the like, this was a convenient way to simply get all components in a category, is there a similar way to get all paper-elements for polymer 2?
The Api for paper-toolbar specifies a justify property that would center the content, but this does not seem to work in the case below:
```
<paper-toolbar class="tall" justify="center" bottom-justify="center">
<div slot="top" class="title">Top Title</div>
<div slot="middle" class="title">Middle Title</div>
<div slot="bottom" class="title">Bottom Title</div>
</paper-toolbar>
```
The fullbleed class on the body does not work anymore. I've included the iron-layout-classes and iron-layout files, but these do not have any effect :(
Am I missing something?
Yes you have to pick every paper/iron elements.
Elements have dependencies and you just need to install few of them to have a whole lot of polymer elements, I don't see the advantage of downloading a pack of elements when you will just not use them all anyways.
And the reason why middleJustify or bottomJustify are not working in your case is because you are using a class="title". the toolbar will turn the slot title into a flex element, that means the element will stretch as far as possible to the right in the available space of its container. Because the title is taking all the available space justifying it to center will just fail (trying to center something that's all-contained in its container and it won't move).
If you want to justify to the center, try that :
<paper-toolbar class="tall" bottom-justify="center">
<div slot="top" class="title">Top Title</div>
<div slot="middle" class="title">Middle Title</div>
<div slot="bottom">Bottom Title</div> <!-- remove the class title, not recommended for a title -->
</paper-toolbar>
or
<paper-toolbar class="tall" justify="center" bottom-justify="center">
<div slot="top" class="title">Top Title</div>
<div slot="middle" class="title">Middle Title</div>
<div slot="bottom" class="title" style="text-align:center;">Bottom Title</div>
</paper-toolbar>
I have a template that gets all of the information generated from an external program. I am attempting to make this template a bit more modern and less 1992.
The page used to work with a table. It didn't look very nice so I am attempting to remove the table and just have everything on the screen fluid.
For the containers of the text I have used the bootstrap well class. The problem is that if one well is a bit longer then the other, it looks very odd. I need both of the <div class="well"> to be the height if the tallest one.
I have tried to do this with a lot of different CSS. I really don't want to have to go back to a table.
The code is below.
<div class="col-md-12">
<div class="col-md-6">
<div class="well">
<h3>Heading</h3>
Info
<br>
<br>
</div>
</div>
<div class="col-md-6">
<div class="well">
<h3>Heading</h3>
Info
<br>
<br>
</div>
</div>
</div>
Any help is appreciated.
so what you want is that the div's height must equal to the div that has a lot of data...
try using jquery.
var maxHeight = Math.max.apply(null, $(".well").map(function ()
{
return $(this).outerHeight();
}).get());
$('.well').height(maxHeight);
check this out:
https://jsfiddle.net/x3ehq57g/2/