In my code I use the service and retrieve data from the backend. I have code like this to retrieve the content.
<div class="body" *ngFor='let topic of topics | async'>
<div [innerHTML]="topic.content"></div>
</div>
This topic.content have some text and image. What I want is keep margin between this text and image. But I have no idea to do that. Can someone help me on this.
Based on your comments, if you change that inner div to:
<div class="splitter" [innerHTML]="topic.content"></div>
then you can put in styles.css (global styles, not component's css file) something like:
.splitter > img {
padding-left: 10px;
}
But I don't know how you styled the 'body' class of the parent div and if there's styling in the .content value itself, so you will need to play a bit with that .splitter class.
Related
i have a website that i don't have the source code to. I am trying to make changes externally by placing html's before certain divs to alter how the website looks.
I have a div like this:
<div class="absolute zoom-image hidden group-hover:block top-0 border-2 border-[#f3f3f3] overflow-hidden bg-white" style="width: 721px;height: 541px;left: 721px;z-index: 50;"> CONTENT HERE </div>
I need to style it making it left:753px , but i can't define the classes of the div like i normally do on other examples.
I am trying this:
<style>
.absolute.zoom-image.hidden.group-hover:block.top-0.border-2.border-[#f3f3f3].overflow-hidden.bg-white
{
left:753px !important;
}
</style>
Sadly i can't define pseudo classes like this thus it doesnt work, does anyone have any idea how i can do this ?
Clarification:
The problem is i can not modify the div i posted earlier. I must write an additional code to modify it with !important. As i said i do not have the source code so these are not editable to me. I can only add a free html code on somewhere in the page. How can i edit this externally ? I need to write a code that refers this class since the div doesnt have any tags or id's. It has to be a code that refers to that class. I hope i made my point
Please don't be so confused about how to use the class & style attributes for the CSS. You can use only one class name in order to style your components, also, you don't need to use both inline styles ( here -> style= "width: 721px; height: 541px; left: 721px;z-index: 50;" <- ) and class styling to give CSS to your components.
Style attributes are used to write CSS along with the HTML tags. and id or class styling is used to write the CSS commands in a separate space.
This is a separate way to write the styling.
<div style="width: 721px; height: 541px; left: 721px; z-index: 50;"> CONTENT HERE </div>
Another way can be: -
(Here I used the class name as absolute)
<div class="absolute"> CONTENT HERE </div>
<style>
.absolute
{
left:753px;
top:0;
border: 2px solid #f3f3f3;
overflow:hidden;
background-color:white;
zoom:normal; // zoom-image hidden is confusing for me.
}
.absolute:hover{
dispaly:block;
</style>
// I wrote these style commands after decoding whatever you wrote in the class attribute.
Do try this code, and also do refer to MDN Docs or any other documentation before write the code.
I have an app that contains 4 components inside it:
<div [#routerTransition] class="position-relative overflow-hidden pt-3 m-md-3">
<div class="mx-auto mb-5 pb-1 container">
<app-set-vehicle-details id="step1" (step1Finished)="enableStep2($event)" (busy)="setBusy($event)"></app-set-vehicle-details>
<app-product-selection id="step2" *ngIf="step2Enabled"></app-product-selection>
<app-product-details id="step3" *ngIf="step3Enabled"></app-product-details>
<app-customer-details id="step4" *ngIf="step4Enabled"></app-customer-details>
</div>
</div>
My view is supposed to look like this:
That corresponds to the app-set-vehicle-details component. Note the grey background there.
But when the second component is added, the background turns white:
But don't understand why this background is changing like that. Some css attached:
.theme-main [_nghost-etm-c5] {
background-color: #F0F0F7 !important;
color: #4D4F5C !important;
}
This is a screen capture of the main container:
I find no reason why the white part is appearing. The only thing that happens is that the second component appears dynamically, after an action. I'm not sure if that's the responsible of that height reprint?
Thanks for any help in advance!
To clarify a little bit:
Styles are being retrieved from a custom library, called styles.scss
This is the style applied to the body:
So h-100 from Bootstrap, what produces:
But still not working... Any ideas?
In your case, I suggest setting the background color for .pb-1 class in the main component CSS file.
Every Angular Element would be affected by common CSS (like bootstrap library) and its own CSS which reads from the CSS file of the component. The latter is specific to that component and wouldn't affect other components CSS even if they have shared class names.
Have you checked the height of your body? The body doesn't update it's height when components are added so the height of your component is limited to the height of the body. To avoid that, set the min-height of the body & html in your global css file to 100% like so:
body, html {
min-height: 100%;
}
set background color on the body tag in styles.css
body {
background-color: grey !important; /*Add the color you want to set */
}
you can also do this for the main div using some class
I am trying to get the white border on this page to disappear:
http://www.donaldrussell.com/blog/carving
password:testpage
I only want it to disappear on pages with this specific template.
Here's the CSS I'm trying to use:
.fullwidth #wrapper{
background-color:#000;}
Can anyone point out what's wrong please?
Thanks
It's the white border, I would like to get rid of, so it looks like this:
Im not sure where the .fullwidth class is actually being used on the page.
The white background is being called from the main style.css stylesheet on line 224.
If you have access to that file, then just change the value there.
If not, try adding this to the page.
#wrapper.black_bg{
background-color:#000 !important;
}
and change your wrapper div to this:
<div id="wrapper" class="hfeed black_bg">
There is no parent container with the class .fullwidth (as far as I can see). The only option for classes in your body (which is the parent container in this case) are:
<body class="page page-id-7703 page-template page-template-onecolumn-sliderpage-php custom-background">
Try instead adding a class to the wrapper and styling this:
.page-template-onecolumn-sliderpage-php .SOME-CLASS{
background-color:#000;
}
You shouldn't use the class then ID like that. best to stick to classes when styling.
Since you want it to disappear only on on the pages with that particular template, here's what you do.
Open the page's template and add an ID called "login-page" to the body tag so that you can target it separately.
Then create the block of CSS code below being specific with the ID you added to the template's body tag.
#login-page #wrapper {
background-color: #000; /* or Inherit */
}
Note You can change or add to the above block of code and it'll affect just the the template that you applied the the given ID to.
I am wondering if there is a way to represent class A if class B is present. In my case I want "container_inner2" to have a padding of 0px if "promo_move" is there.
I know there are combinators to represent class B if A is present, but I can't figure out if want I need is possible.
Here's the HTML and the current CSS -
HTML
<div class="container_inner">
<div class="container_inner2 clearfix">
<div class="promo_move">
Some content....
</div>
</div>
</div>
CURRENT CSS
.container_inner .container_inner2 {
padding: 30px;
}
Again, I would like container_inner and container_inner2 to have 0 padding if promo_move is there.
If this isn't possible with css, any other solutions are welcome. (This is on a Wordpress site. All pages can have the 30px padding except one.)
Thank you for your time.
Your description is very misleading. You mean that you want to style the .container_inner and .container_inner2 elements if they both have a .promo_move descendant.
That is not possible with CSS. Since this is on a WordPress site, you can use jQuery's .has() function to filter the elements before you decide whether to apply the padding, like so:
$('.container_inner, .container_inner2').has('.promo_move').css('padding', 0);
Maybe this is an easy stuff for all web designers out there. So here goes. I just want to add a padding-left property to my div which is inside an div element.
This is the structure of my html
<div id="content-sub">
<form action="/en/contact" method="post" id="contact-mail-page">
<div> <!-- *This part is where I want to add the property padding-left*-->
You can leave a message using the contact form below.
...........
</div>
</form>
</div>
Points to consider:
If you're suggesting of adding a class name or id name. No can't do cause I can't find/don't know the location of the contact form file so I can only add this property in the style.css.
Here is some CSS to add:
#contact-mail-page > div { padding-left: 10px; }
This will only apply to the first level of children in the form element, so any divs inside that div tag will not get the padding applied to it.
#content-sub div { padding-left : 10px;}
Here is you can do
#content-sub div {
//add stuff
}