I have checked the forum and other forums
I have this in my code. However, I need to change the opacity to 50%. I can't for the life in me figure out what to do. Please could you help?
<a class="p-2 mb-2 bg-info text-white>
Many thanks
Luke
Opacity takes the value from 0 to 1. Not percentage.
You can add a class to your object as:
<a class="p-2 mb-2 bg-info text-white half-opacity" >
Then you can define the CSS class as:
half-opacity {
opacity: 0.5;
}
Related
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/
I have a simple horizontal menu system with 5 items in it.
<div id="menu">
<ul>
<li>Men</li>
<li>Women</li>
<li>Kids</li>
<li>Stores</li>
<li>Contact</li>
</ul>
</div>
The menu is 40px high and I wish for the a:hover for the menu (which is currently have set to display a grey background) to fill this 40px of height with the menu items vertically centered.
How do I best achieve this?
See http://jsfiddle.net/g2dmudsw/
Thank you.
I came upon strange situation. I have a List and each list item consists of span and image element. They are both inline and as long as span is empty they are next to each other, but when span has text, image acts as if it was display:block and falls underneath the span element which is not my desired effect. (I fill span with text dynamically)
<ul id="playerListInsideRoom">
<li class="playerCircleInsideRoom circleFull" seatnumber="1">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span> </span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="2">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="3">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="4">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
</ul>
.playerCircleInsideRoom span{
position:relative;
left:50px;
}
#playerListInsideRoom img {
height:15px;
width:15px;
display:inline-block;
position:relative;
right:40px;
}
Even when I get rid of relative positions the problem is still occuring.
If the width of inline elements is larger than the allowed width of the container (your li element) then the line will break.
You could use whitespace: nowrap on the li to prevent it (though that could possibly break the rest of your layout).
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 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.