I am designing a Google-AMP based webpage. There are some limitations of Google-AMP that css !important property can't be used.
In Google-AMP, a built-in style is using !important property as follows:
amp-sidebar {
max-width: 80vw!important;
}
In my scenario I need to update a style max-width to 100vw. How can I update the amp-sidebar to 100vw without using !important?
PS: JavaScript or Inline-CSS can't be used. I need to make changes using only CSS.
Here is the fiddle..
https://jsfiddle.net/mutafaf/cdb3dnqz/
The most precise selector will take the lead.
<div id="foo">
<div id="bar">
Hi
</div>
</div>
#bar {
background-color: green;
}
#foo #bar {
background-color: blue;
}
Here, you will have a blue background!
So maybe you can build a rule with #parent amp-sidebar
I used padding on both sides left and right. So the div took full screen.
amp-sidebar {
padding-left: 10vw;
padding-right: 10vw;
}
So width allowed was 80vw + padding(left & right) 20vw = 100vw.
That solved my problem.
Hope this helps you as well.
Related
Are there any hacks for max-width:-webkit-fit-content; for ie 8?
Trying to get a child div to not take up the whole width of the parent and this works well with ff, chrome and safari; hoping there's some hack to get it to work with ie 8 as well.
Fiddle showing the behavior: http://jsfiddle.net/XtZq9/
Code for the behavior I want in ie8:
#wrap {
background-color: aqua;
width:300px;
height: 50px;
padding-top: 1px;
}
.textbox {
background-color: yellow;
max-width: intrinsic;
max-width:-webkit-fit-content;
max-width: -moz-max-content;
margin-top: 2px;
}
<div id="wrap">
<div class="textbox">
Here is some text
</div>
<div class="textbox">
Here is other, longer, text
</div>
</div>
From demosthenes.info, I learned I can simply use
display: table;
instead of
width: fit-content;
Check the link however about problems with whitespaces. It does not apply to my case, and simply replacing width: fit-content with display: table solved my problem quite easily.
The closest I can think of is floating your elements. Not exactly alike, but probably sufficiently alike;) You need to set extra margin though, but this should be no problem with a conditional stylesheet.
.textbox {
background-color: yellow;
float:left;
clear:left;
}
Your modified fiddle
It might depends on the situation:
I had a block-level element with width: fit-content;. As this doesn't work on IE, the element was taking the full available width (as expected).
But I wanted it to just adjust its size to its content.
Finally, i fixed it with:
display: inline-flex;
Not yet; keep watching http://caniuse.com/#feat=intrinsic-width &
https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/suggestions/6263702-css-intrinsic-sizing
I'm new to CSS tables, it's my first time. So I discovered that when you set display:table to a div, you can forgot all margin and padding (and whatever) you're planning on it's future cause they are ignored. Nice. The only property I've found to make this job is border-spacing but it is a little limited comparing with margin and padding. It have only two ways of styling, horizontal and vertical. You can't set the value of the side you want like border-spacing-left or border-spacing: 0 1px 2px 3px.
In my case, I have a table with one row that lies on the top right corner of the screen. I want it attached on the very top and spaced horizontally, which caused me problems. The top is okay but the right detaches from the border when I use border-spacing: 10px 0.
Smart guys like me don't see this as a problem, cause we can set it margin-right negatively, making it be attached again on the right side of the browser. Wow, whata smart ass I am!
However, I saw an little damn scrollbar on the bottom of the screen like a roach under your cooker at the kitchen. I hate roac.. scrollbars specially horizontals, so I got my inseticide called overflow-x and kil.. set it to hidden. She run desperately and dissapeared, but I know that she's there, somewhere staring at me. And this is driving me crazy.
Seriously now. I think this isn't the right way to do that and I hope somebody can teach me how to do it.
This is my scenario on Fiddle
Thank you in advance(mainly for reading this crap).
There are a few ways of achieving what you're trying to achieve. Most commonly, using display: table, display: table-cell, etc isn't very high on the list.
So, here's how I would do it: http://jsfiddle.net/VKnQZ/1/
Do bear in mind that I don't know the full circumstance of what you're attempting so it may well be that I'm missing a (valid) reason that you're using table display properties in the first place.
You'll notice a few things here:
I've done away with your table display properties. I don't think you need them, and floats do the job just fine (just remember to clear them).
I've removed your display from the cell divs. As someone in the comments above pointed out, divs inherit display: block by default. The additional dimensions set their size as you already had it.
I'm using the + selector to put in the spacing between elements. In this instance div + div is essentially short-hand for 'every div which is beside another div' - so all of them aside from the first.
Hopefully that achieves what you're aiming for and does away with all the nasty hacky overflow/margins/etc.
Here's the code:
HTML (only change is to remove the row div):
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
CSS:
body {
padding: 0;
margin: 0;
}
#nav {
float: right;
}
#nav div {
float: left;
width: 120px;
height: 40px;
}
#nav div + div{
margin-left: 10px;
}
.red { background-color:#f00 }
.green { background-color:#0f0 }
.blue { background-color:#00f }
and can you tell me why are you trying to imitate table behavior when you have "table" tag? it could be styled pretty well also
what you are doing is sometimes called "divitis"
edit:
you can position table absolutely http://jsfiddle.net/n83kT/
Not too sure if this the right place to discuss float and display :)
But , flex is on his way, and display is already quiet efficient.
Display + direction and you could kick floats away.
border-spacing version : http://jsfiddle.net/GCyrillus/2EZ3F/
border-left version : http://jsfiddle.net/GCyrillus/2EZ3F/1/
<section>
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
</section>
section is to set direction .. or not
unset & reset direction to fake float ,
else use text-align if you dislike this method.
In CSSheet, notice inline-table instead of table so it reacts to text-align and or direction (not all pages are EN or FR :) )
body {
padding: 0;
margin: 0;
}
section {
direction:rtl; /* unset regular if you wish, else text-align will do for inline-boxes */
}
#nav {
direction:ltr;/* reset/set here if you want cells from left to right */
display:inline-table;
border-spacing: 10px 0 ;
}
#nav div {
/*direction:ltr; reset here if you want cells from right to left */
display: table-cell;
width: 120px;
height: 40px;
}
#nav div + div {
margin-left: 10px;
}
.red {
background-color:#f00
}
.green {
background-color:#0f0
}
.blue {
background-color:#00f
}
My 2 (late) cents for a different point of view :)
For completeness, I would like to offer the case for the often overlooked inline-block display type.
Similar to the use of floats, the HTML is as follows:
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
and the CSS:
#nav {
position:absolute;
top:0;
right:0;
}
#nav div {
width: 120px;
height: 40px;
display: inline-block;
vertical-align: bottom;
}
#nav div + div {
margin-left: 10px;
}
This inline-block approach behaves similarly to the floated-child-div's approach.
In this application, I can't think of a reason to use one over the other.
One minor consideration is that inline-block is not supported in some older browsers.
Otherwise, both approaches use the same mark-up and the CSS rules are similarly simple.
The choice may depend a lot on the content that you use in the #nav div elements.
Demo fiddle: http://jsfiddle.net/audetwebdesign/EVJPN/
I am using ng-view, to display view based on the routeProvider. In my application, ng-view added like this
<div ng-view style="height: 100%; background:#000000;"></div>.
In one of my views, there is a left navigation, which should displayed 100% in height in the browser. For some reason, left view navigation height is created only based upon the data. That is if data is more, height is incremented.
I am not sure, why height is not incremented even though I set hieght=100%, here is the code of Left navigation
<div class="options1">
<div class="options">
<a ng-repeat="name in list" >{{name.name}}</a>
</div>
</div >
.options {
background:#FFFFFF;
min-height: 190px;
width:10em;
height:100%;
border: 1px solid red;
color:#FFFFFF;
}
.options1 {
min-height:100%;
background:red;
width:15em;
}`
I got it working, it is an CSS issue.
I have added this into CSS,
html, body { height: 100%; width: 100%; margin: 0; }.
Here is the link for more details
Css height in percent not working
use Viewport Height, it's absolutely
style="height: 100vh;"
This isn't an angularJS issue, but most likely a CSS styling issue. If it is so, then you need to investigate it as such - there isn't much information to go on in your question, but a div stretches to 100% of it's parent, so you need to make sure that is happening. Also, positioning is very important.
If this is the case, there is no need to duplicate an answer - see if this other SO answer is of any help.
I think css:
.ng-scope{
height: 100% !important;
}
On my computer it works correctly,
for reference only
I just started using Twitter Bootstrap, and I have a question about how to best add a border to a parent element?
for instance, if I have
<div class="main-area span12">
<div class="row">
<div class="span9">
//Maybe some description text
</div>
<div class="span3">
//Maybe a button or something
</div>
</div>
</div>
If I apply a border like so:
.main-area {
border: 1px solid #ccc;
}
The grid system will break and kick span3 down to the next row because of the added width of the border......Is there a good way to be able to add things like borders or padding to the parent <div>s like this?
If you look at Twitter's own container-app.html demo on GitHub, you'll get some ideas on using borders with their grid.
For example, here's the extracted part of the building blocks to their 940-pixel wide 16-column grid system:
.row {
zoom: 1;
margin-left: -20px;
}
.row > [class*="span"] {
display: inline;
float: left;
margin-left: 20px;
}
.span4 {
width: 220px;
}
To allow for borders on specific elements, they added embedded CSS to the page that reduces matching classes by enough amount to account for the border(s).
For example, to allow for the left border on the sidebar, they added this CSS in the <head> after the the main <link href="../bootstrap.css" rel="stylesheet">.
.content .span4 {
margin-left: 0;
padding-left: 19px;
border-left: 1px solid #eee;
}
You'll see they've reduced padding-left by 1px to allow for the addition of the new left border. Since this rule appears later in the source order, it overrides any previous or external declarations.
I'd argue this isn't exactly the most robust or elegant approach, but it illustrates the most basic example.
Another solution I ran across tonight, which worked for my needs, was to add box-sizing attributes:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
These attributes force the border to be part of the box model's width and height and correct the issue as well.
According to caniuse.com ยป box-sizing, box-sizing is supported in IE8+.
If you're using LESS or Sass there is a Bootstrap mixin for this.
LESS:
.box-sizing(border-box);
Sass:
#include box-sizing(border-box);
I want to put padding on a css border. Pull it inside a div, away from the edge. Is this possible using css (css3 is fine, webkit).
Here is the design.
I did this by placing a div inside a div, then give a border to the inner div. I want to make the markup slim as posible so I want to use only one div if posible.
Thank you.
You should be able to do this with the CSS outline property:
<style>
.outer {
outline: 2px solid #CCC;
border: 1px solid #999;
background-color: #999;
}
</style>
<div class="outer">
example
</div>
Instead of borders, you may use outline property:
div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;
}
<div></div>
http://jsfiddle.net/H7KdA/
Padding around the border (which would separate it from the edge) is called the 'margin': for further details, see Box model.
Unfortunately, without adding another div, I don't think you can do this with just CSS.
The more complicated your design gets, the more likely you will need extraneous html tags.
Your other (also not great) option is an image background, or if it somehow makes you feel better, you can add elements client side with JQuery, thereby maintaining the "purity" of your server side files.
Best of luck.
You could do that by creating a inner div with the borders you want and a outer div with a display: table. Something like this:
<style>
.outer {
background: #ccc;
display: table;
width: 400px;
}
.inner {
border: 2px dashed #999;
height: 50px;
margin: 5px;
}
</style>
<div class="outer">
<div class="inner">
</div>
</div>
you can define a margin for the first child element based on the parent element selector. e.g.
.outer:first-child {
margin : 10px;
}
This way any element put inside the .outer will automatically have 10px margin.
If you want this to be applied to any direct child of the outer element use "> *" instead. e.g.
.outer > * {
margin : 10px;
}
No, that's not possible. Padding, margin and border are all parts of elements, you can't give a border padding or a margin a border.
Maybe if you post an example of what you're trying to do we can come up with alternate solutions?
-update-
Looking at your example I'm afraid it's still not possible, at least not with just one div. Im not a fan of divitis either, but the extra div probably is the best option in this case.