I've just got started with Material Design Lite. I want to change the width of the drawer.
What I have tried is something along these lines:
.mdl-layout__drawer {
width: 25%;
}
This results in the drawer overlapping the content area.
How do I correct this issue?
The drawer is an absolute component that rest in it's parent container a defined left position. When you change it's width, you'll need to alter it's position too.
Here's the css only solution for a width of 500px -
.mdl-layout__drawer {
width: 500px;
left: -250px;
}
.mdl-layout__drawer.is-visible {
left: 0;
}
Here's a codepen example -http://codepen.io/mdlhut/pen/pJmjBe
Related
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
I'm writing an app with Angular 8 and NativeScript 6.4.1.
I want to create a perfectly square button. I'm not able to hard-code the height and width.
e.g. height: 20px width: 20px is not good for me because my app will run on different devices with different screen sizes.
I have tried these suggestions:
https://spin.atomicobject.com/2015/07/14/css-responsive-square/
https://dev.to/tchaflich/a-width-responsive-perfect-square-in-pure-css-3dao
It doesn't seem to work for me.
Here is my playground:
https://play.nativescript.org/?template=play-ng&id=j8Gsd1&v=3
How can I make perfectly square buttons?
code snippet:
.sqaure-button {
height: 40%;
width: 40%;
}
.sqaure-button:after {
content: "";
display: block;
padding-bottom: 100%;
}
<Button class="sqaure-button" backgroundColor="pink"></Button>
This image is the desired result in terms of the square sizes and the device size:
.square-button {
width: 40%;
height: 40%;
}
This actually should work by chance, I think the probability of something like this to give a square is very low that it works only when the parent is a square. You're saying take 40% of the height of the parent, say it's 1000px and take 40% of the width of the parent say it's 2000px, Now you see why it isn't a square?
We need to take a better reference than the width/height of the parent as those won't be the same, Dynamically using js or whatever, set the width/height to 50% of the parent's height. It should give a square, Now edit it to suit your needs, Perhaps set one (width or height) from the parent and set the other as the one you've already set.
I tried this again with nothing else in my view layer; just the button.
I got a perfectly square button using 'dp' units.
.button-square {
height: 90dp;
width: 90dp;
}
<ActionBar title="Home">
</ActionBar>
<Button class="button-square" backgroundColor="pink"></Button>
Here is my playground: https://play.nativescript.org/?template=play-ng&id=j8Gsd1&v=6
I tried it with percentages and it doesn't work:
.button-square {
height: 40%;
width: 40%;
}
Design question here. How can I make the #main-wrapper slide over the #single-carousel on the following page: http://duijnisveld.wpengine.com/
Right now it moves up when scrolling, I need the carousel to stay put and make the main wrapper slide over it when scrolling down.
giving .header-foto-wrapper position: fixed and #main-wrapper position: relative gives unexpected behaviour for me, I'm clearly missing something important.
*note, in the url, the .header-foto-wrapper does not have the position fixed as it breaks the layout and it's a live site for the client to see.
Thanks!
You'll need to apply width. Things go a little wonky when a container calculates width once you pull it out of the content flow. A width:100% will fill the page width. You'll also want to move the content area down and apply a background color.
.header-foto-wrapper {
position: fixed;
width: 100%;
}
#main-wrapper {
position: relative;
top: 100%;
background: #fff;
}
By setting the position as absolute.
.wrapper {
position: absolute;
left: 100px;
top: 150px;
}
http://www.w3schools.com/cssref/pr_class_position.asp
The panel height is fixed at 300px, the header and content might change but the footer should stay fixed at the buttom.
What is the best way to achieve this ?
Setting
.panel {
height : 250px;
}
.panel .panel-footer {
position : absolute;
bottom : 0;
}
Cause the footer to slightly slide outside the border of the panel and to lose width.
I'm trying to find a solution with as little fixed sizing as possible.
Bootply example here
Thanks.
I think this solution may help you
http://www.bootply.com/giovapanasiti/126477
Good day!
the panel slides out because it's wrapper has margin-bottom wich bottom: 0 does not account for.
A simple solution wold be to apply this css:
.panel {
height : 250px;
margin-bottom:0;
position: relative;
}
.panel .panel-footer {
position : absolute;
bottom : 0;
margin-bottom:1px;
width : 100%;
}
http://www.bootply.com/126692
I have a sidebar which is fixed to the left edge of the window and has some scrolling content aligned at the bottom of the window. Normally, I could set the scrolling content's container top property to the height of the content above it and everything would look ok.
Here's an example of what I'm talking about. And a more concrete example
#sidebar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
/* and inside sidebar */
#header {
/* my question is, how do I achieve this effect when this height is 'auto' */
height: 100px;
}
#scrollable-content {
top: 100px;
overflow-y: scroll;
}
When the content above the scrolling content does not have a fixed height, can I achieve the same effect? Do I need to introduce JavaScript? How might I fix this fiddle so that I can always see the bottom of the scrolling content?
You can add a few lines of javascript (using jQuery) to find the height of the scrollable area:
// find the scrollable height
var scroll_height = $(window).height() - $('#header').height();
// set the height of the scrollable div
$('#scrollable-container').css('height', scroll_height + 'px');
Then do the same within the click function after the hide/show so that the new header height is used
http://jsfiddle.net/94E4Z/2/