I'm pulling my hair here. Trying to come up with a simple responsive layout where two fluid boxes are aligned next to each other. The main box must always be centered in the browser window, while the other should be aligned beside it in its top right corner. See example image below -
Tried different approaches involving negative percentages and three-column faux layouts but it just doesn't work.
Demo: http://dabblet.com/gist/7201560
Markup:
<div class='container'>
<div class='main-col'></div>
<div class='right-col'></div>
</div>
CSS:
.container {
text-align: center;
}
.main-col, .right-col {
display: inline-block;
vertical-align: top;
text-align: left;
margin-right: -4px; /* css-tricks.com/fighting-the-space-between-inline-block-elements/ */
}
.main-col {
width: 50%;
margin-left: 20%; /* equal to .right-col's width */
}
.right-col {
width: 20%;
}
What's happening here:
The centered main column and right column have display: inline-block, and they're centered in the viewport by giving their container text-align: center. They're still not centered the way you want though. Since they're sibling elements you can use margin to push the main column to the left with a value equal to right-column's width, essentially centering itself.
Hi you can check my try in this link http://jsfiddle.net/WHq8U/17/.
I had to use a little jquery to calculate the sidebar absolute position. Let me know your opinion about this.
Related
I am trying to make simple demo of grid view .In which I have header of title (having gray background) actually I need to reduce the height of title or headers of table which have gray background .can we add alternate color of rows ? please see the given image .It header or tittle is too small as compared to my plunker .Secondly there is alternate color in row .can we add that in my plunker .
http://plnkr.co/edit/7bSnk0fU0NBOF1GIwHSK?p=preview
.search.list-inset, .search.list-inset .item:first-child {
border-radius: 50px;
}
.search .item-input .icon {
font-size: 200%;
}
.gray-20 {
background-color: #eee;
}
#media (min-width: 600px) {
.search {
width: 50%;
margin-left:auto;
margin-right: auto;
}
}
.mrginrightleft{
margin-left:5%;
margin-right:15%;
}
.brd{
border: 1px solid grey;
}
here is my code![enter image description here][1]
Updated Plunker
How to style striped rows
There are two ways to do this. One is pure CSS using the :nth-child(even) or (odd) pseudo classes. You can add a class to your row and just use style it how you want, such as:
my-class:nth-child(even) .col {
background-color: blue;
}
But I did it differently to teach you something about ng-repeat. Yes, it's for a loop, but it has a bunch of special properties that it exposes for you. Two in particular are $odd and $even. As you might expect, $odd returns true if it is an odd iteration and $even is true when the index is an even number.
So, you can use these with ng-class as part of your expression. Here, I'm adding a class of odd-row:
<div class="row" ng-repeat="column in displayData | orderBy: sortval:reverse | filter: query" ng-class="{'odd-row':$odd}">
Then to make the styles, I added the following rule. I applied the background-color to the .col children so that the background would be contained within the borders that are applied on the .col elements.
.odd-row .col {
background-color: #eee;
}
EDIT:
Actually, you are correct, ng-style would be a third-way, but it doesn't apply a class, it applies inline styles. Therefore, you need to pass it an object with you styles, so for example (simplified):
ng-style="{'color': 'red'}"
Material angular lays out radio boxes like this:
o Apple
o Banana
I want this in reverse
Apple o
Banana o
The md-radio-button has two compenents,
div class="md-container",
and
div class="md-label".
The container holds the button, and the label holds the label.
I can't seem to swap the positions of these divs. When I try to float md-container right, it goes outside of the md-radio-button.
How can I swap the two locations, either using float on the sub-components without breaking outside of the parent radio button, or perhaps some other way?
Thank you
You can do this
<md-content>
<span layout="row" layout-align="center center">
<span>Apple</span>
<md-radio-button value="1" aria-label="Apple"> </md-radio-button>
</span>
</md-content>
EDIT:
Add this to your css:
md-radio-button {
width: 100px;
}
md-radio-button .md-label {
width: 80%;
margin-left: 0;
word-wrap: break-word;
}
md-radio-button .md-container {
width: 20%;
left: 100%;
}
Here you can set a width for the md-radio-button component. This lets us align all the radio-buttons no matter the length of the label.
If the labels are really long, they will wrap instead of overlap or pushing the radio-button.
First answer:
Add this to your css:
md-radio-button .md-label {
margin-left: 0;
}
md-radio-button .md-container {
left: 60px;
}
Or you can do this:
md-radio-button .md-container {
position: relative;
transform: translateY(10%);
}
md-radio-button .md-label {
float: left;
left: 0;
margin-left: 0;
margin-right: 10px;
min-width: 60px;
}
You will need to adjust the left positioning of the .md-container or min-width of .md-label though based on the longest label. Or you could use the last solution and just not care about min-width and aligning the radio-buttons.
Difference between these two solutions is that in the second one, the labels will never overlap the radiobuttons. At worst, if the label is really long, it will misalign the radiobuttons. The first solution doesn't care about the length of the labels.
<md-radio-button value="1" labelPosition="before" aria-label="Apple"> </md-radio-button>
Is there any suggestion how do you work with position:absolute with responsive design?
I have a design which is 1000px width, and left from that container div(1000px) I have image, positioned as position: absolute.
Problem is, when I decrease width of browser I get horizontal scroll.
What is the proper way with positioning absolute divs with responsive design?
Edit: This is an example I am talking about http://jsfiddle.net/FeAUr/ . For purpose of example I set container width to 100px, instead of 1000px.
Point is, that I get horizontal scroll bar when I decrease width of my browser because of that "absolute" element with picture. How can I do it in proper way, that I wont get horizontal scroll bar?
<div class="bggrey">
<div class="absolute-left"><img src="http://placehold.it/200x200" /></div>
<div class="row">content</div>
</div>
.bggrey{
width: 100%;
background: #999;
height:500px;
}
.row{
width:100px;
height:500px;
background: #fff;
margin: auto;
}
.absolute-left{
position:absolute;
left:50%;
margin-left:-300px;
width:200px;
height:100px;
}
I accomplished this with making another div for background and putting image as background-image. Using zurb fundation for responsive image helped too.
I have a site where I have an element with padding. I want the images to be the full width of the container regardless of padding, so I have added a negative margin equal to the padding to make it stretch right to the edge. The problem arises when I use responsive images. They ignore the negative margin and squish down to the container size plus padding.
Example:
<article style="padding:20px">
<img style="margin:0 -20px;">
</article>
In a non-responsive world this works fine. How would I achieve this with responsive images. I realize I could close and re-open the article tag, but this will cause a bunch of other issue in my real code, so I'm hoping for an alternative.
Most likely the only way is to wrap images into a div, e.g.
<article>
<p>...</p>
<div class="img-wrapper">
<img src="..." />
</div>
<p>...</p>
</article>
with css
article {
padding: 20px;
}
.img-wrapper {
margin: 0 -20px; /* minus left/right padding of article */
text-align: center; /* center small images */
line-height: 0; /* remove possible gap below image */
}
.img-wrapper > img {
max-width: 100%; /* max-width now is relative to .img-wrapper */
height: auto; /* to keep aspect ratio */
}
We have a solution utilizing JavaScript, but I'm also curious if there is a way to do this with pure CSS?
The Situation
I'm relatively new to responsive design, and in the past have stuck with positioning, etc to achieve my layouts. I'm attempting to create a simple responsive header that resizes in a specific way.
My Dilemma
The header is a 29px high bar at the top of the page, with 29x29 buttons at either end. In the middle, bordering the button on the right, is a div (for page titles) that I want to have a min width of 300, but I also want it to expand with the browser width.
Here is the catch: I want this title div to pull away from the left button, leaving a gap of a max-width of 200px. Once the max-width of the gap is reached, I would like the title div to start expanding, staying pressed up against the right button. See as follows.
note: I've created a jsfiddle here for experimenting
I've modified your JSFiddle and added a bit of JavaScript to get the effect I think you're looking for. There are also comments to walk you through exactly what the JS code is trying to accomplish.
Essentially, I'm binding a handler to the window.resize event, calculating the available space in the header, and adding or subtracting from the title container to maintain its width.
Okay well here is what I have so far. WILL EDIT in the morning (kind of tired)
I feel this is definitely possible but it does require javascript. The fact that you want there to be a 200px space available requires javascript or some sort of programming to tell the styling to do that.
<!DOCTYPE html>
<html>
<style>
html, body { height: 100%; }
#container { margin-top: 29px; }
header { height:29px; margin: 0 49px; background-color:#999999; }
#div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
#div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
#div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
#div4 { height: 100%; background-color: yellow; display: inline-block; float: right; }
</style>
<body>
<div id="container">
<header>
<div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div>
</header>
</div>
</body>
<script>
if (parseInt(document.getElementById("div2").clientWidth) >= 200) {
document.getElementById("div2").style.width = "200px";
}
</script>
</html>
So the way I went about it is rather than having 3 divs, I made 4 -- the original 3 you had, but then the white space you want to consider as, well open space, I made a div for that as well. I also have javascript so that when the window scales past a width of 200px, it will lock it at that width. Unfortunately, I'm not super polished with my CSS yet so I'm still trying to figure a way to get that working. If anyone wants to edit my answer, please feel free.
Another thing to point out is that while the javascript does working for if the nav is growing, it doesn't for shrinking. I didn't implement a way for it to be able to shrink if say the user decided to shrink his window size because I have it set to lock the width at 200px (I guess a way to work around that would be with an } else { clientWidth = "100%"? Not sure. Hope this gets you on the right track though.