Angular with Bootstrap - getting redundant horiz scrollbar - html

I'm working on an application in Angular. One of my components has the following template HTML:
<div class="panel panel-primary">
<div class="panel-heading">Info</div>
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a>Data</a></li>
</ul>
<br>
<div class="dataModel">
<!--This div is creating a horizontal scrollbar -->
</div>
</div>
</div>
The css associated with dataModel class is as follows:
.dataModel{
height:400px;
overflow-y:scroll;
overflow-x: hidden;
}
When the height of this div is below 50px, I do not get a horizontal scrollbar, however, any value above 50px creates a horizontal scrollbar, which is unexpected, since the width is untouched.
I though of setting height to auto, but that would defeat the purpose of overflow-y
I suspect that the bootstrap classes are maintaining an aspect ratio on the div, which may be why changing the height affects the width. Is that the case ?
Please advise. Thanks

I fixed this problem by doing the following change:
<div class="row-fluid panel panel-primary">
in the first line of the component html. The rest remains the same.

Related

only scroll childs of specific div class HTML

I have write below code :
<body>
<div class="navbar" id="navbar">
</div>
<div id="container">
<div class="row">
<div class="col-2">
<div id="nav_drawer">
</div>
</div>
<div class="col-10" id="table_container">
<div class="div_table" data-url="/getDevice">
</div>
</div>
</div>
</div>
I want to scroll only id : table_container
Is there any solution.
Thanks in advance!
You haven't given much additional context around what you're trying to do, but if you're simply after the relevant CSS to make an element display it's overflow in a scrollable area it would be:
div#table_container {
overflow: scroll;
}
However, this will only take effect if the content within #table_container actually overflows the height or width set on the container. You'd likely need to specify such a set height or width, but again without seeing your existing CSS it's hard to comment further.
You can also specify scroll in only the x or y dimension using the overflow-x and overflow-y properties respectively. Read up on the overflow property:
https://www.w3schools.com/cssref/pr_pos_overflow.asp
Try to set overflow-y property for vertical scroll.
#table_container{
width:500px;
height: 110px;
overflow-x: hidden;
overflow-y: auto;
}

Overflow causing entire page to scroll

I am trying to create a page that doesn't scroll. Certain child elements on the page can scroll, but I'm trying to prevent the page as a whole from scrolling. I have a very nested child element that, when overflowed, receives a scroll bar, but also causes the main document to grow and receive a scroll bar as well.
This is the heart of the issue, but there are a few more nested levels that may be a factor.
<div class="h-100 d-flex flex-column">
<div class="d-flex align-items-center justify-content-center bg-red" style="height: 7%">
</div>
<div class="d-flex align-items-center justify-content-center bg-red" style="height: 3%">
</div>
<div class="bg-green" style="max-height: 75%; height: 75%; overflow-y: auto;">
<div class="bg-gray m-4" style="height: 2000px;">
The height of this content causes BOTH scroll bars to appear. I only want a bar on the
'green section'
</div>
</div>
<div class="bg-red flex-grow-1">
</div>
</div>
This code pen demonstrates how my app is set up. The overflowing element is nested deep within many flex displays (coming from bootstrap 4 utility classes).
https://codepen.io/averyferrante/pen/YMdNpO
I want only the green section from the code pen to scroll, not the entire document to grow/scroll as well.
The problem is that a couple of your containers are missing height definitions. As a result, the children of those containers ignore the percentage heights applied to them.
Add this to your code:
<div class="flex-grow-1" style="height: calc(100% - 48px);">
This height rule gives the container a defined height while compensating for the height of its sibling.
Another height rule was missing three levels down:
<div class="d-flex flex-column w-100" style="height: 100%;">
revised codepen
More detailed explanations:
Working with the CSS height property and percentage values
Chrome / Safari not filling 100% height of flex parent
Did you try playing with position: absolute? You can then set width and height as needed and the red box will see its scrollbar disappear!

Height as per resolution in HTML

I have added content div in which having two column div as col-md-3 and as col-md-9
In <div class="col-md-3"> in between having tabular panel menu and in tabular menu have one accordion with scroll effect.
With having min-height: 329px !important
When i check on browser with 1366*768 it looks good with same height
for <div class="col-md-3"> and for 2nd div` with same height
but when i change resolution of pc it conflicts
I want same height as per 2nd div having class .col-md-9
please give me solution on that.
display:flex is the correct solution for you apply this property in parent div like this
HTML
<div class="parent">
<div class="col-md-3">
// you content here
</div>
<div class="col-md-9">
// you content here
</div>
</div>
CSS
.parent{
display:flex;
}
This will make equal height of elements in .parent.
You can add another class on the divs like this class="col-md-3 sameheight" and class="col-md-9 sameheight" and than style it giving a static height if this is what you want.
.sameheight
{
height: 300px //for example
}
For the responsivnes than you can work with media queries. But also the display: flex for the parent of 2 divs is a good solution if it is applicable to you.

jquery knob responsive resize doesn't work in resizable bootstrap panel

I am trying to have a jQuery knob widget within a bootstrap panel to be resized automatically
when panel itself gets resized (thanks to jQuery UI resizable).
HTML:
<div class="col-md-3">
<div class="panel panel-info dashboard_panel">
<div class="panel-heading">HELLO 2</div>
<div class="panel-body">
<input type="text" class="dial" id="knob1" data-min="-50" data-width="100%" data-height="50%" data-max="50"></input>
<button class="button button-default">Just a button</button>
</div>
</div>
</div>
</div>
JS:
$(".dashboard_panel").resizable();
$(".dial").knob();
CSS:
.dashboard_panel {
min-height: 200px;
}
Here is the link to the code: jsFiddle
I am expecting initial height of the knob widget to be 100 pixels height (50% of 200 pixels minimum height of the parent element), which is not the case. Then I am expecting the
height to always be 50% of the size, but it doesn't work neither.
Can someone help me, please ? :)
Try adding height:100% to your .panel-body class:
jsFiddle
.panel-body {
height:100%;
}
Also, if you have min-height to your .dashboard-panel class the knob doesn't scale on load, not sure why. If you really don't need all dashboard panels to have the same height I'd consider removing it.
*Edit: adding the same amount of min-height to the .panel-body class seems to have fixed it. I've updated the fiddle.

How to position sidebar in bootstrap?

I'm trying to position sidebar on the right side in a site based on Bootstrap grid.
Well, this is very simplified layout that I've made - jsFiddle
I admit it's not the good use of bootstrap classes (rows etc.) but it works.
The problem is: the sidebar html code must be under the text and content (because of SEO), so it must be somehow positioned next to content (class .content).
I tried positioned it as an relative element but didn't have any luck.
The text in .text div does not have static height, it will change
The .content will have same height every time
Is this more what you were after?
<div class="container">
<div class="row">
<div class="col-xs-9 pull-right">
<div class="col-xs-12 content">Main</div>
<div class="col-xs-12 text">Lorem</div>
</div>
<div class="col-xs-3 sidebar pull-left">
<p>sidebar</p>
</div>
</div>
</div>
jsFiddle
Basically I've split your entire container 3 to 9, and then made your 'content' and 'text' blocks children of the '9' column. I then applied both the pull-left and pull-right class to the relevant containers.
I also fixed up your HTML a bit as it was missing a div tag. I also got rid of some of the text to make the code more readable to me!