i have for example five divs, that has float:left and they are wrapped inside div, that has display:inline-block and width:auto. So result is one row with 5 divs and that row has width = sum of childs, because width:auto on div, that has display:inline-block results in width to fit content.
Then i have all wrapped inside div, that has width = width of one of that 5 divs and overflow:hidden, so only one of that 5 divs is visible.
But problem is, that 5 divs is not now in row, but is in column, because their parent is wrapped inside div with width = width of one of that 5 divs.
I need animate margin-left on first of that 5 divs, so the next div becomes visible. But when that divs are in column and not in row, the look and feel while animating is not what i want.
So how make something like this:
------1-------
| -----------|---------2----------
| | ----3--- | -----3-- --3----- |
| | | | | | | | | |
| | | | | | | | | |
| | -------- | -------- -------- |
| | | |
| -----------|--------------------
--------------
Only 1 must be visible.
1 has width = width of 3 and overflow: hidden, so only first of 3 is visible.
2 has display:inline-block and width:auto, so its width fit content.
3 has float left or display:inline-block.
Problem is when i wrap 2 into 1, then width of 2 is not to fit conent, but is width of 1 and becomes column and not row.
<div-1 style="overflow:hidden;width:64px;height:64px">
<div-2 style="display:inline-block;width:auto">
<div-3 style="width:64px;height:64px;float:left"></div>
<div-3 style="width:64px;height:64px;float:left"></div>
<div-3 style="width:64px;height:64px;float:left"></div>
</div>
</div>
Div-2 is row, but when i wrap it inside div-1, it becomes column and that is what is unexpected.
Sorry for my english.
First you should add clearfix to the div2 if you are floating its contents.
You could calculate the width with
var width = $('.div2').innerHeight();
$('.div2').css('width', width);
Here an example, set the .div1 { overflow: visible} to see the result:
http://jsfiddle.net/karameloso/Apz7B/
Have a look at the carouFredSel jQuery plugin, it automatically resizes the slider on the fly to fit the new slide's content.
Related
I want to have a centralized grid cells with, for example, 6 columns in desktop. In docs, it says:
The grid is by default center aligned. You can add mdc-layout-grid--align-left or mdc-layout-grid--align-right modifier class to change this behavior.
Then I type:
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop">first</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop">second</div>
</div>
</div>
Expecting on Desktop:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|----|----|----|
| ~ | ~ | ~ | first | second | ~ | ~ | ~ |
Instead of what really outputs:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|----|----|----|
| first | second | ~ | ~ | ~ | ~ | ~ | ~ |
How to make cells stays centralized?
With CSS Grid, you can specify a grid cell's start position using grid-column-start property.
So, in your illustrated example, you want your first cell to be placed at the 4th column:
// MDC Web's default desktop breakpoint is 840px.
#media (min-width: 840px) {
.mdc-layout-grid__cell:first-child {
grid-column-start: 4;
}
}
If you have more than 2 cells in mdc-layout-grid__inner, you'll need to specify start position for every odd cell:
// Specify start position for odd cells.
// :nth-child(2n+1) is more flexible than :nth-child(odd)
// as you can use this pattern for 3, 4, etc. cells in a row (3n+1, 4n+1, etc.).
#media (min-width: 840px) {
.mdc-layout-grid__cell:nth-child(2n+1) {
grid-column-start: 4;
}
}
Additionally, you can specify grid alignment for the flexbox fallback:
#media (min-width: 840px) {
.mdc-layout-grid__inner {
justify-content: center;
}
}
You can view the demo on Codepen.
This can be accomplished by specifying the grid cell span for each type of device to be half the total for the particular device on each grid cell and by aligning the first cell to the right and the second to the left.
So for your specific case that would mean:
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid--align-right
mdc-layout-grid__cell--span-6-desktop
mdc-layout-grid__cell--span-4-tablet
mdc-layout-grid__cell--span-2-phone">first</div>
<div class="mdc-layout-grid__cell mdc-layout-grid--align-left
mdc-layout-grid__cell--span-6-desktop
mdc-layout-grid__cell--span-4-tablet
mdc-layout-grid__cell--span-2-phone">second</div>
</div>
</div>
The grid is center aligned, the grid cell spacing is not aligned to the center of the grid (which you seem to assume). Thus, if you give the grid a width of 50% relative to its container, and make your cells have a span-width of 6, that will give the desired effect on desktop. Alternatively, you could add an empty cell with a span width of 3 before your first cell. But that's a bit harder to tune for other screen sizes (on tablet and phone the grid uses 8 and 4 cell widths by default).
Since the column span is 8 on tablet and 4 on phone, and you did not specify how you want your cells played out on such devices
I have a situation like this:
+------------------------------------------------------------------------------+
| |
| +---------------------------------------------------+ |
| | | |
| <- fixed width -> | <- flexible width -> | |
| | | |
| +---------------------------------------------------+ |
| |
| <- flexible width -> |
| |
+------------------------------------------------------------------------------+
What this is supposed to represent is an outer DIV and its child (also a DIV) appearing in the browser. The outer div takes up, say, 90% of the viewable area (width: 90%). If the screen is resized it will resize. It's OK for it to have a minimum width.
The child div is meant to stay a fixed number of pixel from the left of the outer DIV (left: 200px).
I would like it to resize with its parent (i.e. childWidth = (parentWidth - 200) * .9).
Is it possible to do this with CSS / how?
Yes, just add right: 0px to the inner div in addition to left.
(also, try jsfiddle.net instead of ascii ;))
I am using Google Chrome's developer tools to inspect CSS styles. Sometimes I need to compare the styles of 2 elements on the page, or 2 elements on different pages.
Is there a tool or add-on that would allow me to easily compare? Right now I have to visually look, switching back and forth, comparing one thing at a time. I wish there was a tool that would highlight the differences in styles, source, ...
I am open to use another browser if such a tool exists.
This should help you compare computed style differences, for two elements, on the same page (I'm not sure about how to approach two elements on different pages):
function styleDifferences(a, b) {
var as = getComputedStyle(a, null);
var bs = getComputedStyle(b, null);
var r = [];
for (var i in as)
if (as[i] !== bs[i])
r.push(i + ' differs: ' + as[i] + ' | ' + bs[i]);
return r.join('\n');
}
Example:
>>> styleDifferences(document.body, document.querySelector('pre'));
backgroundColor differs: rgb(255, 255, 255) | rgb(238, 238, 238)
borderCollapse differs: separate | collapse
fontFamily differs: Arial,Liberation Sans,DejaVu Sans,sans-serif | Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif
fontSize differs: 12.8px | 13.7px
height differs: 1928.28px | auto
lineHeight differs: 12.8px | 17.8px
marginBottom differs: 0px | 10px
maxHeight differs: none | 600px
overflow differs: visible | auto
paddingTop differs: 0px | 5px
paddingRight differs: 0px | 5px
paddingBottom differs: 0px | 5px
paddingLeft differs: 0px | 5px
textAlign differs: center | left
whiteSpace differs: normal | pre
width differs: 1423px | auto
MozColumnGap differs: 12.8px | 13.7px
overflowX differs: visible | auto
overflowY differs: visible | auto
As the title suggests, is there any way to bottom-left align components?
An <HBox .../> nested in a <Canvas .../> doesn't work because the elements in the HBox are top-aligned instead of bottom aligned.
For example, I'd like my components to be aligned like this:
+-------------+ <-- container
| components |
| | V |
| V +--+ |
| +-+ | | |
| +-+ +--+ |
+-------------+
You just need to set the verticalAlign and horizontalAlign styles on the hbox ie:
<mx:Canvas>
<mx:HBox verticalAlign="bottom" horizontalAlign="left" left="0" bottom="0"> </mx:HBox>
</mx:Canvas>
Extend the HBox and/or Box to change the positioning. I suspect you'll probably have to override the updateDisplayList method to change the way components are positioned. Probably instead of setting the y value as "0" you'll want to set it to unscaledHeight-component.width.
I am new to CSS designing and not aware of most of the properties of CSS. I am creating a layout for a web page. I am using div in my layout.
My structure is somewhat like this
<div id="content1_bg">
<div>
<div class="content1_title_img_div"></div>
<div class="content1_title_txt_div"></div>
<div class="content1_dvider_div"></div>
<div class="content1_content_div"></div>
</div>
<div></div>
<div></div>
</div>
For this my CSS is
#content1_bg div{width:250px;height:220px;float:left;border:3px solid blue; margin:20px;}
.content1_title_img_div{width:50px;height:100px;}
.content1_title_txt_div{width:150px;height:100px;}
.content1_dvider_div{width:100%;height:10%;clear:both;}
.content1_content_div{width:100%;height:50%;clear:both;}
For this layout i was expecting my design to be like
----------------
|BOX1 BOX2 |
----------------
| BOX 3 |
----------------
| BOX 4 |
----------------
But on using my css layout is somewhat like this
--------------------
| | | | |
|BOX1| | BOX2| |
| | | | |
--------------------
| |
|BOX3|
| |
--------------------
| |
|BOX4|
| |
Basically i want my inner div's not to inherit the properties of outer div. How can i remove this inheritance relationship between parent div and child div
You have to override the properties in the child.
#content1_bg div
means that all the divs coming inside an element with id #content1_bg will have the said properties.
If you need to apply these properties only to a selected set of divs then you can assign a class to the selected divs and change your css definition as '#content1_bg div.some_class'.
Then assign the class some_class to the selected divs