I'm having problem with showing full map inside layout created using materialized framework.
I'm having issues with footer area where I can't figure out how to remove white space in footer area. It looks something like this on wider screen.
On smaller screen it looks like this.
I tried with this:
.map {
height: 100%;
width:100%;
}
but without any luck.
Also, I'm wondering how to prioritize navbar and put it above map.
Here is jsfiddle with described problem. zhank you
.map {
position:absolute;
margin-top:100px;
height: calc(100vh-100px);
width:100vw;
}
Try this css, I guess it will make your work easy.
A bit late answer but here it goes:
I simply added flex 1 0 auto in for header, main and footer section
header, main, footer {
padding-left: 300px;
flex: 1 0 auto;
}
and for body section I added display: flex; attribute
Like this:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
Now map is scaling properly inside defined layout.
Related
So, I'm creating a basic nav-bar with a that is a logo and a with lists in it. However, my logo image is disproportionally huge compared to the site. So I tried resizing it
#logo {
width: 13.3rem;
height: auto;
}
which worked up until I added
#logo {
width: 13.3rem;
height: auto;
flex: 2;
}
flex works regularly, but my image is now blown out of proportion, seemingly negating the width and height that I set.
I'm new to programming, so if anyone could help me out/explain flex more to me, that would be much appreciated.
Also, this is the video that I am following, but instead of using a as the logo, I'm using an actual image. The problem occurs when he adds the flex value at 21:15.
just add height to your logo
#logo {
width: 13.3rem;
height: ?;
}
After creating some basic messy sites I motivated myself to do something better and responsive. And I've got a problem.
The problem is when my site has more height than 100vh and I need to scroll it down, then appeares horizontal scroll.
I tried changing units on containers, removing left/right paddings, margins in some places added margin:0; padding:0; in my 'reset.css' file and still I have no idea what can I do to fix it.
I know that I can use overflow but I read that actually it's not fixing but hacking and I want to know why this happens.
My site looks kinda like this. Not exacly but kinda, and as you see there is little space to slide horizontaly.
Sample code :
.container{
display: flex;
flex-direction: column;
width:100vw;
https://codepen.io/anon/pen/zXLMPX
Also I'll be happy if u give me some advices/tips what I can do better in future, thank you!
The problem is coming from the fact that you haven't normalized your HTML yet. HTML naturally has some padding and margin. You should almost always remove this with the universal selector at the beginning of a project. You can also remove it from the html or body tags directly.
Here is a snippet without removing the default margin/padding:
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
background-color: orange;
}
<div class="container"></div>
Here is a snippet removing the margin/padding using the universal selector:
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
background-color: orange;
}
<div class="container"></div>
If you remove the margin on your body tag it should remove the horizontal scroll:
body {
margin: 0;
}
Alternatively you can use overflow-x: hidden to always hide the horizontal scroll.
On your container use
.container { width: 100%; }
the issue might also be with how codepen displays your page.
If you want to disable horizontal scroll entirely you can always do this
body { overflow-x: hidden; }
I currently have a simple header, main, footer structure in my angular project and would like to make the main-component a flex-box in order to arrange all given components horizontally with equal width. Additionally I want to change the flex-direction, when the screen width is lower than 700px to column.
Since I already achieved this with pure HTML + CSS (see jsfiddle: http://jsfiddle.net/aJPw7/443/) I have the feeling that this has something to do with angular parent components.
Expected behaviour: The two <app-content-section> elements each take 50% width of the <app-main-component> and 100% height. When I change the flex-direction to column they should have 100% width and 50% height:
Currrent behaviour: The <app-content-section> elements align when I use "justify-content" but are not influenced by any hight or width attributes.
Style.css
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
app-root HTML:
<app-main-component>
<app-content-section></app-content-section>
<app-content-section></app-content-section>
</app-main-component>
app-main-component HTML:
<div class="main-component">
<ng-content></ng-content>
</div>
app-main-component CSS:
.main-component {
display: flex;
flex-direction: row;
height: 100%;
}
#media screen and (max-width: 700px) {
.main-component {
flex-direction: column;
}
}
app-content-section HTML:
<div class="content-section">
<a>Test</a>
</div>
app-content-section CSS:
.content-section {
width: 100%;
height: 100%;
}
Edit1: I also tried :host{ } but still no luck.
Edit2: I created another jsfiddle where I achieved the correct width, by styling the host-element and adding flex: 1, but elements still won´t use the whole height. https://jsfiddle.net/1c15q243/19/
So the correct answer is adding a :host{ flex: 1; } in the "app-content-section CSS" in order to give its hosting-component <app-content-section> the correct flex-sizing.
I figured it out in the fiddle of my second edit, but #karthikaruna pointed out that I forgot to add HTML- tag in the stylig file.
Set 100% height to html. Here is the updated fiddle.
Like the title says, I would like to implement a Trello-clone as an exercise in using Bootstrap. I want to have the top menu remain constant, where as the boards (columns) scroll along the X-axis.
I have tried using something like this, where the container has all within it.
body{
overflow: hidden;
}
#board-container{
width: 100rem; // Wider than the viewport
overflow-x: scroll;
}
.board{
width: 40rem;
float: left;
}
But this isn't working.
How can I go about doing something like this? Can I do it with just HTML, and preferably with Bootstrap?
I'm building a site with a 1700px wide JS slideshow at the top. When I publish the page, I get horizontal scrollbars since my monitor is on a 1024px resolution. How do I get the site to be centered in the browser with no horizontal scrollbars - and whatever is superfluous on either side simply isn't visible to the user?
Help GREATLY appreciated, thanks!!!
Simple solution:
body { overflow-x: hidden; }
But this will also stop people scrolling if their monitor is smaller than the main width of your site.
The real solution is to simply not have it be 1700px wide all the time. Something like the following may help, but it depends on your HTML and how your slideshow is implemented.
#slideshow { width: 100%; max-width: 1700px; }
I haven't tested this, but you may be able to get away with putting the above CSS on a container element, something like this:
#slideshow-container { width: 100%; max-width: 1700px; }
#slideshow { width: 1700px; margin: 0 auto; }
You can do this pretty easily. jsFiddle example.
As you know the size of the div, use that:
div.slideshow {
position:absolute;
padding-left:50%;
margin-left:-850px; /* 1700/2 */
}