I am trying to adapt my Blockly workspace inside a div. I want that if the page makes smaller, the div and the Blockly workspace inside of it would be smaller also.
I know that there is a way that Google provides in its documentation but I think it is a bit "dirty" and you have to use a lot of code to resize it.
Looking at the debugger of Google Chrome I saw that I can set a max-height to the svg object but I do not know how to change that height when you inject the workspace:
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
Anyway, it will not solve my problem at all (just avoid that the workspace would be bigger than the div before resizing the page).
I also tried changing my blocklyDiv in which I inject the Blockly workspace to display: flex; but it does not change anything.
Is there a better approach than Google's example to resize the Blockly workspace?
Thanks in advance!
I used CSS Only to get the same behavior...
Just create a container for the blockly editor with any size you want and position relative, then put a blockly editor inside with position absolute.
HTML Code:
<section id="blocklyContainer">
<div id="blocklyDiv"></div>
</section>
CSS code:
#blocklyContainer {
position: relative;
width: 100%;
height: 100vh;
}
#blocklyDiv {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Here you have a CodePen to see: blockly resize
As I said in above comment, I allow width resize while fixing the height in the blockly div.
<div id="blocklyDiv" style="height: 800px; width: 100%;"></div>
Here you have the JSFiddle to play with:
blockly workspace resizing.
I solved this problem by using Blockly.svgResize api, note that if the size changes with transition, you have to set a timeout function and call the api in the callback in timeout, the delay is the transition time.
Related
Im trying to accomplish this:
http://codepen.io/Mest/pen/oKBIu?editors=110
.child-div {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
but instead of a "child-div" i want to target an img-class, like this:
http://codepen.io/dantveita/pen/ZGdKmd
.parent-div img {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
When i do this, im getting a horizontal scrollbar, and im not sure why. Could anyone explain this to me. And if possible, provide a solution?
Thanks
Since you are using position: relative, moving the image to the left doesn't actually take it outside of the document flow, so, according to the browser, it still thinks the image is sticking out.
Because there are no containing elements, there's also no need to use viewport-width over a percentage. For some reason, using viewport-width instead of a percentage adds a little extra space on the right, underneath the scrollbar, even when the image is absolutely positioned.
However, this works:
.parent-div img {
position: absolute;
left: 0;
width: 100%;
}
You may also want to remove the width="1400px" from your image tag, as it isn't necessary and may cause inheritance issues later on.
Im going to go with
.parent-div img {
display:block;
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
on the img-class for now, while hiding overflow-x, until something comes up that makes hiding the scrollbar prevent users from viewing content.
The reason for using this method, and not closing the "previous" container (which would be the obvious choice) is that i want a quick solution for a wordpress blogtemplate, where all images given a specific img-class will stretch full width, when media is inserted from post-editor.
Heres an example of the effect im looking for (theverge.com is obviously closing containers):
http://www.theverge.com/2015/8/4/9090897/mlb-bam-live-streaming-internet-tv-nhl-hbo-now-espn
I hit a peculiar problem today which I haven't encountered or noticed before. While setting up a map in Here Maps 3.0, I noticed that if the browser window is "small", less than a full-screen one, during loading the map, also the map will stay small even if the browser window will be resized to a full-screen one.
How could I update the Here Maps map size to occupy as much space as allotted?
My arrangement is as follows and I wonder if the reason for this could be the relative divs. The reason I have them is that I'm experimenting with designs that have headers, footers, other text with and without scrolls bars (and it looks like scrolling the map gets a bit jittery if there's a scrollbar present on the page).
<style type="text/css">
#mapContainer {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
background: grey;
}
#main {
position: relative;
width: 100%;
height: 100%;
}
html, body {
overflow-y: hidden;
}
</style>
<div id="main">
<div id="mapContainer"></div>
</div>
try this after the map object initialization:
window.addEventListener('resize', function () {
map.getViewPort().resize();
});
That should solve the problem.
The window resize event mentioned by support seems to be the main approach. However, in a templated page the window resize event sometimes occurs too soon and the resize() call then doesn't have the correct sizing yet - at that point you may need to find an 'AfterRender' event for the template library, or failing that set a timeout from the resize event to give the element resizing a chance to finish.
http://www.shaunhillphotography.co.uk/
I have an image scroller on my front page and I want it to span the width of the white space. I had it working earlier but accidentally removed the code when I was tweaking the customer CSS.
It looks like it relates to:
#riva-slider{
}
I don't know what I need to put in to get the positioning correct.
Any help would be gratefully appreciated.
You can try increasing the width of the shell and using margin-left to push it to the edge of whitespace.
#riva-slider-1-shell {
width: 1000px;
margin-left: -25px;
}
Try to add in your CSS file:
#riva-slider-1-shell {
overflow: hidden;
}
I'm trying to set up a responsive header that takes an image and resizes it to the browser – easy enough. What I can't manage to achieve is centring the image vertically within it's container (in this case an a element)
See example:
http://jsfiddle.net/jwoodcreative/tUW3k/
I've tried a few css tricks that havent worked and some jQuery. Either type of solution would suit if anyone knows of one.
You can always use the top:50%, bottom: 50% trick like here: jsfiddle v13
.outerElement {
position: relative;
height: XXpx;
top: 50%;
}
.innerElement {
position: absolute;
bottom: 50%;
}
This works, because the height of the innerElement is not the same as the one of the outer Element, so you can center your element (if the heights were identical, you'd just position it to pos:0 again)
Like this? I've changed the image to be a background-image, which can be centered very easily in CSS. To make sure the link is shown, I have added a non-breaking space ( ). I think this is what you want, right?
You can change the appearance of the image more by looking here, at the documentation of the background property.
I have the following CSS:
#middle {
float: right;
width: 590px;
height: auto !important;
min-height: 100%;
height: 100%;
}
My goal is to get the #middle div to extend all the way to the bottom. This code works perfectly in FF but does not in WebKit browsers. I've figured out that this is due to the float: right property, without floating, this issue doesn't persist
In WebKit browsers, it looks like min-height is being deduced and permanently set on the #middle div. This can be viewed by loading the page with the window contracted and then expanding the window to a larger size.
Here is a demo site of the issue: http://staging.similarblue.com/about/beliefs/
I realize I could use some JS to handle this (on window resize) but I was wondering if there's a pure CSS alternative.
Here is a screenshot of the issue: http://i56.tinypic.com/s49e37.jpg
Thanks!
Two lines up in your style.css file there's a height:auto!important declaration, which is overriding your height:100% declaration. Without that line, your site looks fine!
What you may be looking for is this. It's served me well in the past, hopefully it helps you!
What you could do is make the background div:
position: fixed;
top: 0;
bottom: 0;
And then put the content in a separate div on top of the fixed background. Here's an example: Demo
EDIT: accommodated scroll.