I'm not sure if this is some css issue I've never run into before, or it's an issue with using the new claro theme in dojo 1.5. But right now, what CSS says is 100% sizing doesn't include the borders of my BorderContainer:
css:
html,body, .dijitBorderContainer {
width: 100%;
height: 100%;
}
h1 {
margin-top: 0em;
}
#sidebar {
width: 300px;
}
and html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>stuff</title>
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/resources/dojo.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dijit/themes/claro/claro.css";
#import "css/application.css";
</style>
<script type="text/javascript">
var djConfig = {
isDebug: false,
parseOnLoad: true,
baseUrl: './',
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require('dijit.layout.BorderContainer');
</script>
</head>
<body class="claro">
<div dojoType="dijit.layout.BorderContainer" liveSplitters="true"></div>
</body>
And with this setup, the bordercontainer is just slightly too large for the window and brings up the scroll bars. All that doesn't fit is the border. Any ideas?
I don't know anything about Dojo but what you are experiencing sounds like standard CSS behaviour. CSS width refers to the width of the element's content only, excluding margin, padding and border. Have a look at this page on the CSS box model.
Related
I'm inspecting https://ionicframework.com/docs/api/alert alert..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core/css/ionic.bundle.css"/>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
<script type="module">
import { alertController } from 'https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/index.esm.js';
window.alertController = alertController;
</script>
</head>
<body>
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>Alert</ion-title>
</ion-toolbar>
</ion-header>,
<ion-content fullscreen class="ion-padding">
<ion-alert-controller></ion-alert-controller>
<ion-button expand="block">Show Alert</ion-button>
</ion-content>
</ion-app>
<script>
const button = document.querySelector('ion-button');
button.addEventListener('click', handleButtonClick);
async function handleButtonClick() {
const alert = await alertController.create({
header: 'Use this lightsaber?',
message: 'Do you agree to use this lightsaber to do good across the galaxy?',
buttons: ['Disagree', 'Agree']
});
await alert.present();
}
</script>
</body>
</html>
There is an element there with .alert-wrapper class on it.
if you'll look at the applied CSS, it will show you opacity: 0, but the computed shows opacity: 1
I tried removing all the CSS Files from the page, all the javascript, all the other elements
I tried to move this element to the body (outside the iframe) and applying the opacity: 0 in the styles, nothing helps, the computed stays opacity: 1..
How is this possible?
They are using the Web Animations API.
elem.animate([{ opacity: "1" }],{duration: 1, iterations: 1, fill: "forwards"});
#elem {
opacity: 0;
}
<div id="elem">Hello</div>
I think you already know this but have you tried using - !important
The initial value of opacity is - 1.0
Inherited - no
Computed value -> the specified value, clipped in the range [0,1]
source - MDN
I'm working on my first CSS design and I'm having an issue where the background for the header extends past the right of the header.
MWE:
header{
background-color: #FF0000;
padding: 20px;
}
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="ArtStoreInitial.css"/>
<link href="https://fonts.googleapis.com/css?family=Six+Caps"
rel="stylesheet">
<meta charset="utf-8">
<title>Hypothetical Art Store</title>
</head>
<body>
<header>
<h1>Hypothetical Art Store</h1>
<h2>Super cool tagline will go here</h2>
</header>
If I use display: inline;, it breaks the header completely.
Is there a way to wrap it, give it a margin and give it padding all at the same time? Do I have to hard-code the size? That doesn't seem right.
edit:
box-sizing set to border-box or content-box does nothing
Set the display property to inline-block
header {
background-color: #FF0000;
padding: 20px;
display: inline-block;
}
<header>
<h1>Hypothetical Art Store</h1>
<h2>Super cool tagline will go here</h2>
</header>
I'm using grunticon to add svg's.
Everything working but I'm struggling to style the svg's with css.
I simple want to chnage the fill color of the svg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
.icon-heart{
background: red;
}
.icon-heart{
fill: red;
}
</style>
<title>Title of the document</title>
<script>
/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
grunticon(["images/output/icons.data.svg.css", "images/output/icons.data.png.css", "images/output/icons.fallback.css"]);
</script>
<noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>
</head>
<body>
<div class="icon-heart-1" style="height: 50px; width: 50px;"></div>
<div class="icon-heart" style="height: 50px; width: 50px;"></div>
</body>
</html>
You need to ensure that the svg's you are using do not have the fill="{color}" or style="fill:{color}" hardcoded in them as these will override any css style you apply.
I think you will have to do this by manually updating the svg unless there is a grunt way to do it.
To change the style attributes via css, you need to embed the svg into the dom. Grunticon (above v2.0) offers a easy way to do this.
You need to enable the enhanceSVG option in your gruntfile and then you can use the data-grunticon-embed attribute on your div to embed it.
Look at their documentation for more information
https://github.com/filamentgroup/grunticon#version-20-is-out---heres-whats-new
How can I make a scrollbar for my page that appears when I place my cursor at the corner ?
I found out a way to make the scrollbar appear and disappear on hover by using the following:
div { overflow:hidden;height:whatever px; }
div:hover { overflow-y:scroll; }
But that only applies to div tags. I want the scroll-bar to appear only when I take my cursor at the right edge of the page. I tried using body instead of div but then it disturbs all the pages even to those which have less contents.
Please suggest me a way to do so.
what i have understood is that you want something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Liveweave</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.right').hover(function(){
$('.box').css('overflow-y','scroll');
},function(){
$('.box').css('overflow','hidden');
});
});
</script>
<style type="text/css">
.box
{
overflow:hidden;
width: 100px;
height: 100px;
background-color: yellow;
overflow: hidden;
}
.box:hover
{
/*overflow-y:scroll;*/
}
.body{width:100%}
.right{float:right;min-height:50px;position:absolute;right:0}
</style>
</head>
<body>
<div class="body">
<div class="right">
right edge
</div>
<div class="box">asdfsadfsdafsdafsdaf,
sdfsdfsdfsdfsdfsd
sadfsd
sdf
sadf
sdf
dsf
sdfdsfsdfsdfsdfsdfsdaf
sdffsdf</div>
</body>
</html>
I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).
I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.
Here's what it looks like right now: (it's just a test page for the layout)
Here is the code for it:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Baileysaurus -- Dinosaurs && Logic in your face!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<LINK href="header.css" rel="stylesheet" type="text/css">
<LINK href="forum.css" rel="stylesheet" type="text/css">
<!-- jQuery (Bootstrap requires jQuery!) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap -->
<LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- A file of PHP utility functions -->
<?php
include 'functions.php';
?>
</head>
<body>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<div id='background' class='row-fluid'>
<div class='span12'>
<div id='site-column' class='row-fluid span10 offset1 column-wrap'>
<img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />
<hr>
<p>
Put a blog here!
</p>
</div> <!-- END of outermost span12 div -->
</div> <!-- END - "site-column" div -->
</div> <!-- END - "background" div -->
</body>
</html>
CSS
html, body
{
height: 100%;
margin: 0;
}
#background
{
position: absolute;
top:0;
bottom: 0;
min-height: 100%;
min-width: 100%;
background-color: Gainsboro;
}
#site-column
{
top: 0;
bottom: 0;
min-height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background-color: white;
}
.column-wrap
{
overflow: hidden;
}
I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long.
Anyone have any ideas on what I'm missing?
You should also be able to add the following CSS:
.span12 {
height:100%;
}
Try to make your outer <div> to extend to the bottom of the page.
So try this in the css:
.row-fluid
{
position:absolute;
bottom:0;
}
And I'm not sure but you may have to move your
<script src="bootstrap/js/bootstrap.min.js"></script>
line to the <head> part of your page.