Resize VisNetwork along with section using flex

Resize VisNetwork along with section using flex - javascript

I've positioned Vis-network within flex sections.
You can see the full code here: https://codepen.io/MadBoyEvo/pen/XWdgzoB (try moving elements down)
The problem is whenever I try to resize the height of the section manually to '1000px' or whatever value the height of the diagram stays the same. When I push height directly to diagram sections resize properly. But this is problematic when I put something on the right side that expands the main section, and the diagram stays put with the default size. I tried to use autosize for vis.js but it doesn't seem to affect anything.
var options = {
"interaction": {
"hover": true
},
"autoResize": true
};
I tried height/width 100% and it seems it treats min-height as max-height as well.
.diagram {
min-height: 400px;
width: 100%;
height: 100%;
border: 0px solid unset;
}
.vis-network:focus {
outline: none;
}
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a> <a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
</div>
<div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
</div>
<div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
</div>
</div>
</div>
<div class="flexPanel overflowHidden defaultPanel">
<div></div>
</div>
</div>
</div>
</div>
I guess it could be related to position relative/absolute - but if i remove it diagram resize itself automatically slowly which looks very weird.
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
The end goal for me is to have a diagram resize automatically if something on the right side expands, and shrink if it's smaller (min 400px), unless I force the diagram to a static value. Also if I set sections/panels to something bigger I would like diagram to resize itself to match it.
Right now it seems I am fighting flex to position it properly.

On the path from the element with height:1000px to the element containing the diagram, there is a div element which does not propagate the height.
This can be fixed by setting display:flex on that element, see css class fix1 and its corresponding html element in the code below.
The other css class, fix2, shows how you can make the right panel autosize its width (based on the width of its content and a minimum width you choose, 600px in this example) a have the left panel take up the remaining space.
.fix1 {
display: flex;
flex-direction: column;
}
.fix2 {
flex-basis: auto !important;
min-width:600px;
}
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a> <a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
</div>
<div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="defaultSection overflowHidden fix1">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
</div>
<div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
</div>
</div>
</div>
<div class="flexPanel overflowHidden defaultPanel fix2">
<div></div>
</div>
</div>
</div>
</div>
You can see the full code here

Related

three col with equal height image and tagline not working

I have the following code with a screen attached.
As you can see there are 3-col with the image and title but they are not aligned either their padding is the same.
The overall section is on the left side and has a lot of space from the right.
Any idea how to make them equal in height and width?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" integrity="sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="section-top-homepage">
<!-- vission -->
<div class="col-md-4 col-sm-4">
<div class="whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="3afd4d82-63ca-4046-b77c-1d3815e959cf" src="/tilesw/sites/default/files/inline-images/vision.svg" />
<h3 class="top25">Vision</h3>
</div>
</div>
<!-- objectives -->
<div class="col-md-4 col-sm-4">
<div class="whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="6e0a289f-a866-4d46-81c8-6f2f6aceecd8" src="/tilesw/sites/default/files/inline-images/objectives.svg" />
<h3 class="top25">Objectives</h3>
</div>
</div>
<!-- mission -->
<div class="col-md-4 col-sm-4">
<div class=" whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="aeaa7c28-c987-4174-a2c2-5fa45de0ab83" src="/tilesw/sites/default/files/inline-images/mission.svg" />
<h3 class="top25">Mission</h3>
</div>
</div>
</div>

I use bootstrap, but the red section showing the three icons has the following code which i think affected the entire row content not be organized.
section#block-counterboxstyle3 {
display: block;
box-sizing: border-box;
height: 300px;
background-color: #e00021;
clip-path: ellipse(550% 100% at 400% 100%);
margin-top: -200px;
}

Are you using bootstrap ?
When you set a class like col-4, you only set the width of each bloc, you need to set a max-heigth on css or in tag IMG using height.
Example:

Set the width of the wrapping div with id id="section-top-homepage to 100% of the page. You can confirm this by setting its border to 1px solid red. This worked for me.

Fit width of absolute element to content

I am trying to customize the tooltip's width of element-ui framework because text inside tooltip is broken incorrectly.
Here is generated tooltip element with is placed on the bottom of body tag
<div role="tooltip" id="el-tooltip-8061" aria-hidden="true" class="el-tooltip__popper is-dark popper-width" style="transform-origin: center top;z-index: 2031;/* display: none; */">
<div data-v-65209316="" class="row">
<div data-v-65209316="" class="col-5">Employee</div>
<div data-v-65209316="" class="col-7">John Smith</div>
</div>
<div x-arrow="" class="popper__arrow" style="left: 77px;"></div>
</div>
and here is my vue code:
<el-tooltip placement="bottom" theme="dark" popper-class="popper-width" :popper-options="customPopperOptions">
<template slot="content">
<div class="row">
<div class="col-5">
Employee
</div>
<div class="col-7">
John Smith
</div>
</div>
</template>
</el-tooltip>
and
customPopperOptions() {
return {container: document.body, boundariesElement: document.body}
}

I see you are using bootstrap classes, have you thought about splitting them out because your 12 grid has less space to occupy on your employee tooltip. 1st off,
try evening them out:
<div class="row">
<div class="col-6">
Employee
</div>
<div class="col-6">
John Smith
</div>
</div
See if that works, should split the difference. If this causes issues then you will probably need to adjust your CSS code because it looks as though your class .popper-width has a set width.

Abnormal width of columns

I am trying to create a design using bootstrap which has a fixed top navbar, 2 columns below that. The first column has a fixed top div with full parent width and more content beneath it which can scroll(the fixed div and navbar cant). The second column has an image which covers the whole column and nothing more.
I have done the following:
<nav class="navbar navbar-default navbar-fixed-top black">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OWOL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>EVENTS</li>
<li>SPONSORS</li>
<li>DASHBOARD</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid" style="margin-top: 80px;">
<div class="row">
<div class="col-md-8" id="content">
<div class="row" id="head-section">
<div class="col-md-10 text-center">
<h1 class="red">MEGA LEAGUE</h1>
<h4>FOOTBALL</h4>
</div>
<div class="col-md-2 text-right" style="padding-top: 20px;">
EDIT DETAILS
</div>
</div>
</div>
<div class="col-md-4">
fixed sidebar
</div>
</div>
</div>
With this little JS:
$(function() {
var new_width = $('#content').width();
$('#head-section').width(new_width);
});
Here's some relevant CSS:
#head-section {
position: fixed;
top: 80px;
padding-left: 50px;
padding-bottom: 20px;
padding-right: 50px;
box-shadow: 0 0 3px #000;
width: 100%;
background: #fff;
z-index: 2;
}
What happens is this:
As you can see the text "fixed sidebar" is going behind the fixed div(#head-section). That's because JS is setting its width as 1001px which is wrong according to chrome's inspect element which tells me its just 900px.
What am I doing wrong and how should I solve it?
Here's the bootply: http://www.bootply.com/0xIGx67IzM

Ok so there are two way to resolve your problem
JQuery Solution
Change the width with outerWidth
$(function() {
var new_width = $('#content').outerWidth();
$('#head-section').outerWidth(new_width);
});
CSS Solution
just replace width:100% width width:inherit in #head-section
#head-section {
width: inherit;
}
JQuery Example
CSS Example

You're setting your #head-section width equal to the width of the parent and then you're adding 100px of padding to it (50px to each side).
See this link for more info: http://quirksmode.org/css/user-interface/boxsizing.html
With standard positioning (position:static; or position:relative;) if you were to set your #head-section to {display:block;} (omitting the width:100%) that would automatically set it to fill 100% of the available horizontal space, and then your padding would push in instead of out.
In this case, however, because you're using position:fixed, your easiest solution would be to use your existing javascript and html (still removing the width:100% from your #head-section properties), but wrap the #head-section in another container element (perhaps an article for the sake of code legibility?)
From there you can update your javascript to:
$(function() {
var new_width = $('#content').width();
$('article').width(new_width);
});
See fiddle: https://jsfiddle.net/znhws64p/1/

Make Images the same size, and not will be distorted

I just want my all images from my instafeed will all be the same size, shouldn't be distorted and image will resize freely (responsive), and i want it to look exactly like this: instagram images , we can zoom the image a bit and make overflow hidden, its just i dont know the tricks :)
here is my work: http://jsfiddle.net/jazzu20/1c9yf61x/
img {
max-width: 100%;
border: 0;
}
.col-md-3 {
width: 25%;
float: left;
}
.livery-instafeed-section {
min-height: 285px;
}
<div class="livery-instafeed-section col-md-12">
<div id="instafeed">
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9JOiOdMLo5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11251638_621920521284538_937019183_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Gp4RjMLgE/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/1390058_175285799480082_576833592_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9FJpd7MLts/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12093236_443227142549068_286565452_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9D_lqkMLqV/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12145135_1069396733117579_706096349_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Bb92JMLhh/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12093429_1668694736699760_1827692759_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9ACbbHMLlD/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12135431_1733638416868070_1024332902_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/8_BXkSsLn5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12105054_849750965144841_2082888771_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/89fRuosLje/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12107557_866233773472414_1869843871_n.jpg">
</a>
</div>
</div>

Here's a fiddle.
Explanation of what happens here:
First of all, I've moved the images to be a background image of the anchor (<a>) tag. That gives you a lot more flexibility, because you can make use of the background-position and background-size properties.
Next I've positioned the anchor absolute (and the column relative to make sure the anchor is taking account of it's parents size) and made it as heigh and wide as the column.
Now you have the same width, but not the same height, as the column doesn't have a height from itself. Giving it a percentual height doesn't help you, because that would be relative to the parent, while you want to have the column to have a height relative to it's own height. And now kicks in the classic padding trick; give the element a bottom-padding and make it's child 100% the height of it's parent, like so:
.parent { width: 25%; padding-bottom: 25%; } /* .col-md-3 in your case */
.child { position: absolute; width: 100%; height: 100%; }
So now we have perfectly square elements, with the images as a background. This would normally suffice, because with background-size: cover the browser would make sure the image would span the whole div. But as you have images with white borders (to the side and the top/bottom) you'll have to zoom those to correct it. And the larger the borders (eg. for panorama images) the bigger the zoom size. That's why I have created the .zoom and .zoom2 classes, which just increases the background-size property.
There you go!

Bootstrap Carousel image doesn't align properly

Please take a look at the following image, we are using bootstrap carousel to rotate the images.
However, when the window width is large, the image doesn't align with the border properly.
But the carousel example provided by bootstrap always works fine, no matter the width of the window. Following the code.
Can someone explain why carousel is behaving differently?
Is this anything to do with Image size or some bootstrap config is missing?
<section id="carousel">
<div class="hero-unit span6 columns">
<h2>Welcome to TACT !</h2>
<div id="myCarousel" class="carousel slide" >
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" >
<img alt="" src="/eboxapps/img/3pp-1.png">
<div class="carousel-caption">
<h4>1. Need a 3rd party jar?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-2.png">
<div class="carousel-caption">
<h4>2. Create Request</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-3.png">
<div class="carousel-caption">
<h4>3. What happens?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-4.png">
<div class="carousel-caption">
<h4>4. Status is Emailed</h4>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>

The solution is to put this CSS code into your custom CSS file:
.carousel-inner > .item > img {
margin: 0 auto;
}

With bootstrap 3, just add the responsive and center classes:
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">
This automatically does image resizing, and centers the picture.
Edit:
With bootstrap 4, just add the img-fluid class
<img class="img-fluid" src="img/....jpg">

I faced the same problem and solved it this way:
It's possible to insert non-image content to Carousel, so we can use it.
You should first insert div.inner-item (where you will make center alignment), and then insert image inside this div.
Here is my code (Ruby):
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<%= image_tag "couples/1.jpg" %>
</div>
<% (2..55).each do |t|%>
<div class="item">
<div class='inner-item'>
<%= image_tag "couples/#{t}.jpg" %>
</div>
</div>
<% end -%>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
And my css-code(.scss):
.inner-item {
text-align: center;
img {
margin: 0 auto;
}
}

While vekozlov's answer will work in Bootstrap 3 to center your image, it will break when the carousel is scaled down: the image retains its size instead of scaling down with the carousel.
Instead, do this on the top-level carousel div:
<div id="my-carousel" class="carousel slide"
style="max-width: 900px; margin: 0 auto">
...
</div>
This will center the entire carousel and prevent it from growing beyond the width of your images (i.e. 900 px or whatever you want to set it to). However, when the carousel is scaled down the images scale down with it.
You should put this styling info in your CSS/LESS file, of course.

In Bootstrap 4, you can add mx-auto class to your img tag.
For instance, if your image has a width of 75%, it should look like this:
<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">
Bootstrap will automatically translate mx-auto to:
ml-auto, .mx-auto {
margin-left: auto !important;
}
.mr-auto, .mx-auto {
margin-right: auto !important;
}

Does your images have exactly a 460px width as the span6 ? In my case, with different image sizes, I put a height attribute on my images to be sure they are all the same height and the carousel don't resize between images.
In your case, try to set a height so the ratio between this height and the width of your carousel-inner div is the same as the aspectRatio of your images

It could have something to do with your styles. In my case, I am using a link within the parent "item" div, so I had to change my stylesheet to say the following:
.carousel .item a > img {
display: block;
line-height: 1;
}
under the preexisting boostrap code:
.carousel .item > img {
display: block;
line-height: 1;
}
and my image looks like:
<div class="active item" id="2"><img src="rimages/2.jpg"><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>

I think I have a solution:
In your personal style sheet page, assign the width & height to match your image dimensions.
Create an additional separate "class" on that top div that appropriates the space with spans...(Shown below)
<div class="span6 columns" class="carousel">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
Without touching the bootstrap.css, in your own style sheet, call "carousel"(or whatever label you choose) to match the width and height of your original pix!
.carousel {
width: 320px;
height: 200px;
}
So in my case, I am using small 320x200 images to carousel with. There is probably preset dimensions in the bootstrap.css, but I don't like changing that so I can try to stay current with future releases. Hope this helps~~

I am facing the same problem with you. Based on the hint of #thuliha, the following codes has solved my issues.
In the html file, modify as the following sample:
<img class="img-responsive center-block" src=".....png" alt="Third slide">
In the carousel.css, modify the class:
.carousel .item {
text-align: center;
height: 470px;
background-color: #777;
}

Try this
.item img{
max-height: 300px;
margin: auto;
}

#Art L. Richards 's solution didn't work out.
now in bootstrap.css, original code has become like this.
.carousel .item > img {
display: block;
line-height: 1;
}
#rnaka530 's code would break the fluid feature of bootstrap.
I don't have a good solution but I did fix it. I observed the bootstrap's carousel example very carefully http://twitter.github.com/bootstrap/javascript.html#carousel.
I find out that img width has to be larger than the grid width. In span9, width is up to 870px, so you have to prepare a image larger than 870px. If you have more container outside the img, as all the container has border or margin something, you can use image with smaller width.

For the carousel, I believe all images have to be exactly the same height and width.
Also, when you refer back to the scaffolding page from bootstrap, I'm pretty sure that span16 = 940px. With this in mind, I think we can assume that if you have a
<div class="row">
<div class="span4">
<!--left content div guessing around 235px in width -->
</div>
<div class="span8">
<!--right content div guessing around 470px in width -->
</div>
</div>
So yes, you have to be careful when setting the spans space within a row because if the image width is to large, it will send your div over into the next "row" and that is no fun :P
Link 1

Insert this on the css parent div class where your carousel is.
<div class="parent_div">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/slider_1.png" alt="">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>
CSS
.parent_div {
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}

Develop Reference

JavaScript is the programming language of the Web.