For some reason once you expand the window the chart doesn't resize down properly. You should still be able to see the red spacer.
I made an example here: https://jsfiddle.net/bryaan/pjyzxbdu/10/
<div class="table-row">
<div class="table-cell">
<div id="container"></div>
</div>
<div class="table-cell">
<div class="spacer"></div>
</div>
</div>
.table-row {
display: flex;
margin 10px;
}
.table-cell {
width: 100%;
height: 100%;
min-height: 100px;
}
.spacer {
width: 100%;
height: 100px;
background-color: red;
}
If you want to achieve two equal boxes sets display:flex to parent and add children width: 50%.
.flex {
display: flex;
}
#container {
width: 50%;
}
.spacer {
width: 50%;
height: 500px;
background-color: red;
}
Demo: https://jsfiddle.net/BlackLabel/46o7venk/
Related
I'm having some problem with display: flex in both Safari and iOS Safari.
Safari has alignment issues and iOS Safari has both alignment and size issues. Is this expected or a valid bug in Safari?
Edit: Also, height in percentage on the child SVG inside the Button does not work either. This works in all other browsers.
I mane another more advanced example with SVG elements, and I added an anchor to compare to the button. More advanced example here
My simple example
HTML:
<div class="flex">
<div class="col col-1">
<button class="sub-col">
<span class="span"></span>
</button>
<div class="sub-col">2</div>
<div class="sub-col">3</div>
</div>
<div class="col col-2"></div>
<div class="col col-3"></div>
</div>
CSS:
.flex {
display: flex;
flex-direction: column;
height: 80vh;
background: #666666;
position: fixed;
width: 100%;
}
.col {
display: inherit;
flex: 1 1 auto;
background: #ccffcc;
}
.col-1 {
flex: 0 0 10vh;
background: #ffcccc;
}
.col-3 {
flex: 0 0 10vh;
background: #ccccff;
}
.sub-col {
display: inherit;
flex: 0 0 25%;
justify-content: center;
align-items: center;
}
.span {
width: 10px;
height: 10px;
background: #ffaaaa;
}
Screenshots:
This is what it should look like, and does in Chrome, FF and Edge (Haven't tested IE)
This is what it looks like in Safari
And this is iOS Safari
You can't set display flex to button and fieldset elements. chk below link. Wrap your element with div or span tags
https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
The button element, and a couple other elements for that matter, cannot be flex containers in some browsers. Safari is one of them.
You can try a simple solution though, if you like. The idea is, you wrap your .span inside .span-wrapper. Then you let .span-wrapper be your flex container.
Like that:
HTML:
<div class="flex">
<div class="col col-1">
<button class="sub-col">
<span class="span-wrapper">
<span class="span"></span>
</span>
</button>
<div class="sub-col">2</div>
<div class="sub-col">3</div>
</div>
<div class="col col-2"></div>
<div class="col col-3"></div>
</div>
CSS:
.flex {
display: flex;
flex-direction: column;
height: 80vh;
background: #666666;
position: fixed;
width: 100%;
}
.col {
display: inherit;
flex: 1 1 auto;
background: #ccffcc;
}
.col-1 {
flex: 0 0 10vh;
background: #ffcccc;
}
.col-3 {
flex: 0 0 10vh;
background: #ccccff;
}
.sub-col {
display: inherit;
flex: 0 0 25%;
justify-content: center;
align-items: center;
}
.span {
width: 10px;
height: 10px;
background: #ffaaaa;
}
.span-wrapper {
display: flex;
flex-basis: 100%;
justify-content: center;
align-items: center;
}
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.
So I try to make my styles dependent from conditions but it mess with almost everthing.
So here is the current state:
<style>
#bodyContainer {
width: 1024px;
margin: 0 auto 0 auto;
background: lightgreen;
}
#navbar {
width: 1024px;
margin: 0 auto 0 auto;
}
#layoutContent {
width: #if (!IsSectionDefined("menu"))
{
#:1024
}
else
{
#:724
}
px;
padding-top: 70px;
background: lightblue;
}
#if (IsSectionDefined("menu"))
{
#:#menu {
#: padding-top: 70px;
#: float:left;
#: background:lightgray;
#: width: 300px;
#:}
}
</style>
It's working (the code, not the layout itself:) ) but:
- the highlight not working in menu section
- the intellisense/highlight not working in the rest of the style tag
- the style inside the if statement looks like a mess
- the generated text looks like a mess:
#layoutContent {
width: 724
px;
padding-top: 70px;
background: lightblue;
}
#menu {
padding-top: 70px;
float:left;
background:lightgray;
width: 300px;
}
I really appritiate any idea.
CSS doesn't work like that, and you shouldn't attempt to mix Razor with CSS.
You should have 2 styles and then based upon the condition apply the class to the HTML elements.
For example, have a separate file for CSS:
#menu724 {
padding-top: 70px;
float:left;
background:lightgray;
width: 724px;
}
#menu1024 {
padding-top: 70px;
float:left;
background:lightgray;
width: 724px;
}
Then in your view you could do:
#if (MenuSectionDefined) {
<div id="menu1024">
Content
</div>
} else {
// display the appropriate elements without the `menu` CSS style
<div id="menu724">
Content
</div>
}
Ok. I make a final solution use the advices I got.
Body part:
<div id="bodyContainer">
<div id="navbar" class="navbar navbar-default navbar-fixed-top">
</div>
#if (IsSectionDefined("menu"))
{
<div class="menu">
#RenderSection("menu")
</div>
}
<div class="container layoutContent #(IsSectionDefined("menu") ? "layoutContent724" : "layoutContent724")">
#RenderBody()
</div>
</div>
Style part:
.layoutContent {
padding-top: 70px;
background: lightblue;
}
.layoutContent724
{
width: 724px;
}
.layoutContent1024
{
width: 1024px;
}
.menu {
padding-top: 70px;
float: left;
background: lightgray;
width: 300px;
}
I let the question in place in case somebody run in the same situtation.
The final answer to the question I think is "No way!". This approach is totally wrong.
Heading
I need to align tags beside the price in featured products (the tags in the example feature the text "Aussie Made").
I need to vertically align the "Aussie Made" images beside the price (bottom align). The price can dynamically change in width and height. Can someone give me some ideas on how to make the "Aussie made" image/icon float on the right and still be on the bottom of the div aligned?
I tried to put
position:absolute;
bottom:0px on the div containing the Aussie Made icon. However it didn't work. Can someone please help me on this?
Did you try using position RELATIVE?
As in relative to the PARENT container?
This should give you an ideia:
CSS
.container{position:relative; height:200px; width: 200px; outline: 1px solid #000; }
.image { position: absolute; bottom:0px; right:0px; width: 10px; height: 10px; outline: 1px solid #000; }
HTML
<div class="container"><div class="image"></div></div>
I beg your pardon, your quite right, its ABSOLUTE not RELATIVE...
Although Absolute position actually makes the contents relative to the parent.
See the photo below.
and the code...
<style type="text/css">
.Main
{
position: absolute;
left: 400px;
top: 200px;
width: 469px;
height: 280px;
}
.Photo
{
width: 469px;
height: 280px;
z-index: 1;
}
.Caption
{
position: absolute;
left: 0px;
top: 250px;
width: 461px;
height:32px;
padding-left: 8px;
background-color: #FF0000;
color: #FFFFFF;
font-family: tahoma;
font-size: 20pt;
text-align: left;
vertical-align: middle;
z-index: 2;
}
.Price
{
position: absolute;
left: 330px;
top: 215px;
width: 122px;
height: 40px;
text-align: center;
vertical-align: middle;
z-index: 3;
color: #CC3300;
font-size: 20pt;
background-color: #FFFF00;
}
.MiniText
{
top: 4px;
color: #111111;
font-size: 8pt;
font-weight: bold;
font-family: Tahoma;
}
</style>
<div style="left: 0px; top: 0px; height: 800px;">
<div class="Main">
<img class="Photo" alt="" src="http://202.92.83.79/medias/sys_master/images/8796157247518/Package-img1.jpg" />
<div class="Price" style="z-index: 4">
<div class="MiniText">First of it's kind!</div>
£100.97p
</div>
<div class="Caption" style="z-index: 3">Sooper Dooper Wotsit Thingy</div>
</div>
</div>
I have a twitter feed on my website and i'm trying to put it in a box that has a top, a middle section that repeats as needed to accommodate text and a bottom image as well as an image below the bottom. the problem is that originally the feed was in a box that didn't repeat or anything the feed was just on top of the box, but now i can't get the box set up right or the feed to do it's thing. here is my code:
#twitter_update_list {
overflow: hidden;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 20px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#twitter_update_list li {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
list-style: none;
}
#twitter_update_list li a {
color:#f7f6e7;
text-decoration: none;
}
#twitter_update_list li a:hover {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #f7f6e7;
}
.twitter_top {
position:absolute;
left:632px;
top: 39px;
width: 333px;
height: 27px;
background:url(twittertop.png);
}
.twitter_mid {
width: 333px;
background:url(twittermiddle.png);
background-repeat:repeat-y;
padding: 0 15px;
}
.twitter_bot {
width: 333px;
height: 27px;
background:url(twitterbottom.png);
background-repeat:no-repeat;
margin-bottom: 0px;
}
.twitter_whale {
width: 140px;
height: 67px;
left: 900px;
background-image: url(Layer-6.png) no-repeat;
position: absolute;
left: 9px;
top: 9px;
line-height: 13px;
}
<div class="twitter_top"></div>
<div class="twitter_mid">
<ul id="twitter_update_list"></ul>
</div>
<div class="twitter_bot"></div>
<div class="twitter_whale">
<div id="twitter_div"><ul id="twitter_update_list"><li></li></ul></div>
(update list i'm not putting in here because it's just the js)
</div>
<div id="twitter_box">
<div id="twitter_top">
</div>
<div id="twitter_middle">
</div>
<div id="twitter_bottom">
</div>
</div>
I would think it would make more sense to contain them all in one div, from here you can set your styles, since you want the middle part to expand leave the height dynamic.