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.
Related
enter image description here
enter image description here
header{
position:fixed;
top:0;
left:0;
background-color: $color;
width: $width;
height: 56px;
}
.utility{
#include lockPosition(10px);
right:10px;
width:700px;
height:20px;
padding-top:10px;
z-index:1000;
position:absolute;
}
I find that only absolute position fixes the z-index issue I am having but I want the header to be fixed so it does scroll. Is there a way to have a absolute position in a fixed element and not effect the z-index?
I think the easiest way is to push down the box with absolute position, i guess on .utility,
.utility{top: npx}
As for your question, the importances of the z-index is depending on how you lays the HTML DOM, so for example if your
<header>Your fixed position</header>
<main>
<nav>Your absolute position</nav>
</main>
with your fixed position z-index will be much more important than your
Hope that helps,
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?
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/
I have the following fiddle for people to see http://jsfiddle.net/defaye/DhaHP/4/
The result on full screen: http://jsfiddle.net/defaye/DhaHP/4/embedded/result/
The problem I'm having is that when going past a certain width of resizing the window, the left column departs from the group. I need them to remain touching, with the centre column having a min-width 400 to max-width 800px, the sides width: 200px. The header should be 100% however.
Anyone know how to solve this problem? It is driving me insane.
Here is another example, compatible with IE6+: http://jsfiddle.net/DhaHP/12/
Result: http://jsfiddle.net/DhaHP/12/embedded/result
Abstract of the changes:
Changed #left and #right to be above the #center (#right before #left);
min-width and max-width on #container to 800px and 1200px respectively;
No float on #center;
margin-left and margin-right on #center equals the width of each side column;
float-left on #left and float-right on #right;
The only obs on this for IE6 is the min-width and max-width that doesn't work without a little hack or the use of IE7.js. On IE7, it works as should be.
Here's a working fiddle: http://jsfiddle.net/PhilippeVay/DhaHP/8/ (edit: now works with Chromium)
Modifications made:
HTML: #left before #center column
CSS: no relative positioning at all
display: table; on parent and table-cell on the 3 columns. This will be visually (and only visually) a table. Well, a table layout and not a table structure.
200px width on #left and #right
table-layout: fixed; on parent to switch the table algorithm to the one that respect dimensions as told by the author and not those guessed by dimensions of content of cells
Constrained widths for the parent min-width: 800px; (400+200+200) and on the grand-parent max-width: 1200px; (800+200+200) (edit: max-height on #container only worked on Fx, not Chrome). To my surprise, it works as is.
Compatibility: IE8+
You can play with inline-block with IE6/7 if needed (well, display: inline; zoom: 1; the IE6/7 equivalent of inline-block for outdated browsers)
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.