I have one header, one sidenav and one footer component as a shared module for my website.
I am trying to create a form to search product inside sidenav content and for that I have created a layout module which look like below.
default.html
<app-header (toggleSideBarForMe)="sideBarToggler()"></app-header>
<mat-drawer-container>
<mat-drawer mode="side" [opened]="sideBarOpen">
<app-sidebar></app-sidebar>
</mat-drawer>
<mat-drawer-content>
<router-outlet></router-outlet>
</mat-drawer-content>
</mat-drawer-container>
<app-footer></app-footer>
default.scss
:host {
display: flex;
flex-direction: column;
height: 100%;
}
mat-drawer {
width: 350px;
}
mat-drawer-container {
height: 100%;
}
mat-drawer-content {
padding: 20px;
}
Everything is working fine but when I scroll down my search form page, footer overlaps my buttons like below.
Can somebody tell me where I am doing wrong? Any kind of help would be appreciated.
PS: I am not good in CSS so kind of hard to understand. I am also searching for solution on google meanwhile.
If i understand correctly, the two buttons (red and blue) are on your search form page and it is scrolable.
Try to apply padding-bottom:<the height of footer>px on the container of search page.
Related
I'm working on a web-app where the layout is the next :
A left-side navigation menu
A right-side body for content
My problem is that even though both sides height: 100% when content is added to the right-side, the left one doesn't expand !
I illustrated my scenario with this photo to explain more what's happening.
[UPDATE]
Here is the code snippet that I'm using for building this layout.
PS : it's an Angular app so I'm using <router-outlet> where I display the content's components:
app.component.html
<div class="dp-flex-display dp-flex-row dp-full-width-height">
<aside>
<dev-portal-side-navigation></dev-portal-side-navigation>
</aside>
<aside class="dp-full-width">
<router-outlet></router-outlet>
</aside>
</div>
app.component.scss
.dp-flex-display {
display: flex;
}
.dp-flex-row {
flex-direction: row;
}
.dp-full-width-height {
min-width: 100%!important;
min-height: 100%!important;
}
.dp-full-width {
width: 100%;
}
In my app.component.html, I placed a mat-toolbar above a router-outlet like so:
<mat-toolbar color="primary">
<span>Tattoo Share!</span>
</mat-toolbar>
<router-outlet></router-outlet>
The problem is the router-outlet content is overlaid on top of the toolbar. This content should be beneath the toolbar. How should I correct this? I tried placing things inside block elements such as div to no avail. There is also this CSS on mat-toolbar:
mat-toolbar { position: fixed }
You should use CSS in the styles.css to put a margin-bottom equals to the height of the toolbar in itself. Also use an ID so it won’t apply to other toolbars
mat-toolbar#over-router {
margin-bottom: 40px; // check the actual height in the browser
}
You can use flex layout.
<div class="home-main">
<app-toolbar></app-toolbar>
<div class="home-container">
<router-outlet></router-outlet>
</div>
</div>
.home-main {
height: 100%;
display: flex;
flex-direction: column;
}
Got it to work using some CSS on my toolbar:
mat-toolbar {
position: fixed;
top: 0;
z-index: 1;
}
I am newbie about css and html design. I use flex in my bootstrap design.
I set the flex to sort the components from left to right direction.
As on the this site.
I want to shrink the slider to the right and place another component on the left side. I tryed to removing this line over #GrandCarousel.
element.style {
/* left: -396.5px; */
}
how can I make this feature
Create two div inside #GrandCarousel div. Let's call them left-section and right-section. Give them width: 50%; Put all the current contents of #GrandCarousel div to the right-section. After this you might face issues in image alignment inside slider. You will have to adjust them according to how you need them to appear. Refer below HTML, CSS code to understand better.
HTML
<div id="GrandCarousel" class="banner-container">
<div class="left-section">
// Left section contents
</div>
<div class="right=section">
// Move GrandCarousel contents to here
</div>
</div>
CSS
.banner-container {
display: flex;
}
.left-section,
.right-section {
width: 50vw;
}
.right-section {
position: relative; // To contain all carousel contents inside right-section
}
I am using the Ionic-Header bar for my needs. I adjusted the styling of the bar as follows:
.bar.bar-positive {
background: #00D7FF;
border: none !important;
}
I have now an image in my content which can sometimes becomes very large and high, resulting that it overlaps my Ionic-Header bar. The styling of the image is as follows:
<img ng-src="{{imageDataViewer.currentCID}}" ng-show="currentCID" class="image-viewer">
.image-viewer {
width: 100vw;
max-width: initial;
max-height: auto;
}
What is the way to deal with this? I am trying to fill the content with an image.
http://ionicframework.com/docs/api/directive/ionHeaderBar/
You con define your ion-content like that <ion-content class="has-header">
The has-header class is a standard ionic class
Your image shall be into the DOM then and will not overlay the headeR.
Fix the max-width and max-heightto a certain value in the image-viewer class
Okay, so i need a slider which is in a normal page to span across the whole screen.
The wrapper and all other elements is 960px max-width so thats how far the slider goes.
If i change these, the whole site will become messed up.
Im using Wordpress 3.5 with Twentytwelve theme as parent.
SLIDER: http://rocketplugins.com/wordpress-slider-plugin/
This is the only code i use in the post. So i guess i need to make the post wider?
[slider id='32' name='']
Not too sure about the product that your link explains but you will need to edit your page template.
There will be a content div (the one with max-width set). your new div, the one for the new slider, needs to be above it. I made a page layout fiddle just for you.
HTML
<div class="newdiv">Slider here</div>
<div class="content">
<p>Your WordPress post stuff here</p>
</div>
CSS
.content{max-width:960px; height: 800px; background: #D3D3D3; margin: 0 auto;}
.newdiv{width:100%; height:200px; background:#BADA55;}
Solved by
<div id="slider">[slider id='32' name='']</div>
and
#slider {
position: absolute;
left: 0;
right: 0;
height: 563px;
display: block;
}
Its not the best solution. But it works!