I searched all around stackoverflow but I couldn't find an answer for it. Here is the problem:
I have two divs, one on top of the other. I want to have the top div to adapt the height depending on the height of the below div.
<div id="parent" style="height:300px">
<div id="div1" style="height:auto"></div>
<div id="div2" style="height:45px"></div>
</div>
This because I intend to show/hide the bottom div and the top div must resize to fill the parent div.
I forgot to mention that the first div (the one that needs to adapt) has long content with overflow:scroll
Can you help me please?
Thanks
For this you can display:table property. Write like this:
#parent{
display:table;
height:300px;
width:100%;
}
#parent > div{
display:table-row;
}
#div1{
background:red;
}
#div2{
background:green;
height:45px;
}
Check this http://jsfiddle.net/7NuFr/
Related
Can someone help me with this:
I was able to add SVG with filled image but the aspect ratio/scaling doesn't work as expected. I tried a few solutions but neither of them worked. Please help. The link is below:
https://park-maksimir.hr/testnasve/
enter code here<style>
.aspectRatioSizer {
display: grid;
}
.aspectRatioSizer > * {
grid-area: 1 / 1 / 2 / 2;
}
</style>
<div class="aspectRatioSizer">
<svg viewBox="0 0 7 2"></svg>
<div>
Content goes here
</div>
</div>
Two things going on there:
As soon as you give a a viewBox, it goes full-width, but only as tall as the implied aspect ratio in the viewBox value. The viewBox value is essentially “top, left, width, height” for the coordinate system interally to the SVG, but it has the side-effect of sizing the element itself when it has no height of its own. That’s what is used to “push” the parent element into an apsect ratio as well. The parent will still stretch if it has to (e.g. more content than fits), which is good.
CSS Grid is used to place both elements on top of each other, and the source order keeps the content on top.
My goal is to use ag-grid in an Angular 5 project and have the grid take up all of the available vertical space in a flexbox layout. The grid seems happy to use "height:100%" when it's contained in a div which has a defined pixel height or when the div has a percentage height but isn't in a flexbox layout. But it always seems to have no height when I try to host it in a flex item.
How can I get my grid to expand to take up the height of its flex item container? Here's a plunker with an example of what I'm seeing and trying: https://embed.plnkr.co/D8YgM6/.
Here's how I am creating my layout:
<div style="height:100%;display:flex;flex-direction:column;">
<div style="height:250px;flex-grow:0;">
<h5>Container div with specified height in pixels, ag-grid with percentage height</h5>
<ag-grid-angular style="width: 100%; height: 80%" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
<div style="flex-grow:1;">
<h5 class="red">Container div using flex height, ag-grid with percentage height</h5>
<p>How can I get the grid to be aware of my div's actual height?</p>
<ag-grid-angular style="width: 100%; height: 80%;" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
</div>
I want the grid in the second flex item to have an appropriate height. How can I do this?
In your plunker, set the flex-basis of the item containing your grid to 0, this achieves I think what you are after. I've just been wrestling with the same:
.item-1 {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
Plunker Screenshot running in Chrome
I'm not sure why this works, maybe someone with more in depth knowledge of ag-grid can comment?
try setting auto height on grid ready event
this.gridApi.setDomLayout('autoHeight');
details: https://www.ag-grid.com/javascript-grid-width-and-height/
After you have chosen a field name, then you start typing in the value textbox, the dropdown defaults to a width of 150px which causes lots of things to be cut off. A scrollbar shows up so you can scroll left and right, but I would like to figure out how to set the minimum width of this element.
The css path to the element defining this is:
body > div.gwt-SuggestBoxPopup > div > table > tbody > tr.suggestPopupMiddle > td.suggestPopupMiddleCenter > div > div
It seems to be an inline style in the element
<div class="" style="overflow: auto; position: relative; zoom: 1; height: 322px; width: 150px;">
The field dropdown seems to re-size dynamically, so it does not get scroll bars, the suggest box starts at 150px and resizes sometimes, but it doesn't seem to have any rhyme or reason.
I added the following to my stylesheet:
.suggestPopupMiddleCenter > div > div
{
min-width: 300px; !important
}
But that also affects the field dropdown, which appears to be working properly.
Is this a bug, or is there a configuration that I can use that will allow the value suggestion box dropdown to dynamically resize based on the widest element?
It is hard wired in the tardis branch https://github.com/salk31/RedQueryBuilder/blob/tardis/redquerybuilder-core/src/main/java/com/redspr/redquerybuilder/core/client/expression/SuggestEditorWidget.java#L107
It probably could use some rule to choose the width. Best if you raise a bug and make a suggestion?
In the image below, you can see i have two tabs help and Instructions, i want to place these two tabs next to each other where the Help tab currently is. When i use the margin-left: property, only the help button moves to the left and the instructions button stays in the same place.
The css i am using to configure this:
.v-csslayout-topbarapplicant .v-button,
.v-csslayout-topbarapplicant .v-nativebutton,
.v-csslayout-topbarapplicant-invert .v-button,
.v-csslayout-topbarapplicant-invert .v-nativebutton {
float: right;
display: inline;
margin-right:0px;
margin-left: 268px;
margin-top: -18px;
padding: 0 3px 2px 0;
line-height: 11px;
}
How can i change the spacing so that both tabs (vaadin components) move together?
You need to make sure both items are wrapped with a div. Then you set the margin-left to that div, not only one of the items.
There's no way of telling in the CSS that you posted which items are being manipulated. If both of these items, "help" and "Instructions", are in the CSS you posted, then you to need to change it so that both items exist as one, meaning in one div. If only one of these items exist in your CSS that you posted, then you have only one of them being manipulated with the CSS, and that one is floating right. Ensure both items are floated in the same direction and they are wrapped. Apply the margin to this wrapper div.
The general structure should look like this:
CSS:
#help, #instructions {
float: right;
}
div#wrapper {
margin-left: 268px;
] /* wrapper containing both items, "help" and "Instructions" */
HTML:
<div id="wrapper">
<div id="help"></div>
<div id="instructions"></div>
</div>
I think that you are having some inheritance problems.
I would suggest first checking what inheritance this property is following, and if you still have problems I would then create separate divs for Help and Instructions, where instructions has a different right margin. I hope this helps! This type of problems are stubborn.
i want to center align an image of 18px height with text next to it. Here is the code i use:
<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>
With that code, the div container is rendered with a height of 19px instead of 18px and text isn't centered with image. I tried on Safari 4 and Firefox 3.6. What is the reason for that 1 px?
Thanks
Don't forget to reset styles
(margin/padding) : div, img, span {
margin:0; padding:0; border:0 }
For vertical-align to work, your
elements must me inline.
A classic choice to align text
vertically is to give a line-height
equal to container.
For example :
<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>
Maybe you have a border somewhere in there you need to get rid of or set to zero width?
i'm not totally sure I understand what the problem is here but if its just that the image is a few pixels from where you would like it to be, then why don't you just position the image relatively. for example:
<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>
this will shift the image up by 2px from where it originally was.