How do I access HTML Elements in Angular 7 (or higher) when CSS does not work?

user_914482 0
Viewed 72

I have looked through all the similar questions here on stackoverflow that I could find. I'm an Angular newbie, but I can usually hack something together to make UX & UI Design work for demonstration purposes.

Currently, I have two HTML-based components in various location on my page. One of those components is a version with a photo on one half of the page and text on the other half. I will try to demonstrate this:

enter image description here

Near the bottom of the page, there is another version of this type of layout unit. It has a full-width background with an image on top of it. The graphic designer (who is a big deal around where I work) has a special images, with dimension that do not relate to the image above. It looks like this:

enter image description here

The screenshots are poor, but the HTML underneath both of those is identical. If you saw it all on one page (which I am unfortunately not allowed to do), you would notice that the text sizes and the text layout are identical. The CTA links are obviously different for every layout component.

The problem: Because the images are so different (and I did protest but to no avail), I have to make the layout with the full width background image exactly the same height as the other layouts. I have tried various CSS approaches, but due to the different dimensions, I would need a couple dozen breakpoints to match this about 90% of the time.

If I could use TypeScript/JavaScript via Angular, I could react to window resizing and make sure the full width background image. Yes, I know: Not the cleanest solution, but I have to get this done by the end of day tomorrow.

So, how do I successfully use something like HTMLElement (or whatever does the job best), to get the dimensions of one HTML element, and then adjust the height (possibly some other style attributes as well), to keep them in synch?

Again, I have Googled and searched elsewhere. The answers that seemed to work were way over my head however - and I am infiltrating someone else's component.ts, so I don't want to make it a completely different version.

Any suggestions? Tips? Tricks? Links to check out?

angular typescript javascript
1 Answers

Did you try to use bootstrap? https://getbootstrap.com/docs/4.5/getting-started/introduction/

You could try to create a grid: the first row divided into 2 columns and the second row just in one big column.

      <!-- parent component html -->
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <!-- here put the component child1 you want  on the left -->
          </div>
          <div class="col-md-6">
            <!-- here put the component child1 you want  on the right -->
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
              <!-- here put the component child2  -->
          </div>
        </div>
      </div>

something like this

user_69494930
Related