I dont want to style border for the last item inside container. how to do this?
I tried
::ng-deep custom-comp .custom-container: last-child {
border-bottom: none; //this is not working
}
<div class="container">
<custom-comp></custom-comp>
<custom-comp></custom-comp>
</div>
custom comp:
<div class="custom-container" style="border-bottom: solid 1px red;">
</div>
Can anyone help me how to style so the last custom-comp doesn't have the border bottom?
thanks
I tried following and it worked.
div.container {
::ng-deep custom-comp:last-child > div {
border-bottom: none;
}
}
Related
I would like to style the inner class which is inside the custom angular component
<div class="outer">
<custom-component>
<div class="inner">
</div>
</custom-component>
<div>
css:
Following style is not working.
.outer {
custom-component > .inner {
border: solid 1px orange;
}
}
I want to align 2 sections next to each other. One has text(heading) and the text will be changing in length. one more section has a image.
My issue is when i make the screen size smaller, the second section is coming down.
Tried display:table-row; display:table; display:table-cell; nothing helps. the second div still comes down.
Please Help.
-Thanks in advance.
This is my code:
HTML
<h2><span>BE PREPARED PREPARED</span><img src="http://localhost/safesteps/wp-content/uploads/2014/04/before_bg_r.png" alt="before_bg_r"/></h2>
CSS
.inner_berfore h2{
display:table-row;
border-top: 4px solid #767676;
position: relative;
float:left;
width:98%;
}
.inner_berfore h2 span{
background:#767676;
display:table-cell;
font-family: 'arial-black';
text-transform:uppercase;
padding-left:16px;
font-size:22px;
line-height:40px;
color:#FFF;
float:left;
}
.inner_berfore h2 img{
display:table-cell;
float:left;
height:40px;
}
For static Text:
Try : http://jsfiddle.net/lotusgodkk/anK6u/6/
div{display:inline-block;width:49%;vertical-align:top;}
div img{max-width:100%}
HTML:
<div>Text</div>
<div><img src="src" /></div>
you can assign different width as per your design
For dynamic text:
http://jsfiddle.net/lotusgodkk/anK6u/8/
CSS:
.table{display:table;}
.table div{display:table-cell;vertical-align:top;}
.table div img{max-width:100%}
HTML:
<div class="table">
<div>Hellodfgsdfgsdfghsdfhsdfhdsfhdfhdsfhsdfhsdh</div>
<div>
<img src="http://asia.olympus-imaging.com/products/dslr/e520/sample/images/sample_03.jpg" />
</div>
</div>
My website is http://picofdel.org/services/educators-professionals/professional-development.html
I have added a custom HTML module at position content-top-b for skip navigation link.
The code is
<div id="main" style="width: 0px; height: 0px; border: none;"> </div>
But, a thin border is appearing on the page around the module. Please tell me how to remove the border.
Add these stylesheet to your head or body. Otherwise you can add this simple line to your css-file (without script tag).
<style type="text/css">
.module-outline-2 { border: none !important; }
</style>
the border will be defined on following file:
http://picofdel.org/templates/ca_cloudbase2_j25/css/template.css on Line 316:
#rt-top .module-outline-2,
#rt-content-top .module-outline-2,
#rt-content-bottom .module-outline-2,
#rt-bottom .module-outline-2{
border: 1px solid #e6e6e6;
}
Ran across an odd issue today. I've been working with a floated menu that works on everything I've tested thus far (not gotten to old IE versions yet...), except firefox. The page renders correctly when first loaded, but if the window is resized, elements with deterministic layouts (i.e. inline elements, divs with overflow:hidden, etc) affected by the floated element fail to update.
Anyone have a (preferably javascript free) workaround?
HTML:
<div id="leftBar">
<a>test1</a>
<a>test2</a>
</div>
<div id="bodyContent">
<div>
<div id="contenta">
Hello world!
</div>
</div>
<div>
<p>Paragraph test</p>
</div>
<div style="clear:both">
Enclosing div.
</div>
</div>
CSS:
#leftBar {
float:left;
width:50px;
background:red;
height:75px;
}
#bodyContent {
margin:0 auto;
width:500px;
background:green;
}
#bodyContent > div {
overflow: hidden;
}
#contenta {
width:100%;
height:50px;
background:blue;
}
jsfiddle here.
I'm not sure if this is what you're trying to achieve or not, but I would personally use a container for the elements.
#container {
width: 550px;
}
#leftBar {
float:left;
width:50px;
background:red;
height:75px;
}
#bodyContent {
margin:0 auto;
width:500px;
background:green;
overflow: hidden;
}
#contenta {
width:100%;
height:50px;
background:blue;
}
Then wrap your content in the container.
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.