What steps can I take to locate my dropdown div when it extends beyond the visible screen?

Currently, I am working on integrating a custom combobox dropdown using angular 4 into my web application.

Incorporating this custom combobox as one of the fields in a list of line items using div elements has been successful so far.

My main concern is that when trying to open the dropdown in the last line item of the list, it extends beyond the window screen. How can I ensure that the entire dropdown is fully visible to the user automatically when opening the combobox at the bottom of the page?

<div style="height: 56px; margin-left: 7px; min-width:220px" [style.width]="columnsHeaderWidth.division">
    <div style="width:180px; height: 56px; max-width:180px; cursor: pointer;">
        <combo-box [id]="'division-'+user.uuid" [userOption]="true" [isSelected]="false"
        [magicLabelHack]="'projectTypeLabel'"
        [includeMagicLabel]="false"
        bind-placeHolder="'Select division/group...'"
        icon="wizard:chevrondown"
        [source]="divisions" [selectedValue]="user.divisionId" (onSelected)="onChangeDivision($event,user,user.division.id)"
        [isIconItemList]="true" [itemListWidth]="'230px'"
        [changeStyle]="true"
        (click)="rowClick(user)" (onFocusVisible)="tabFocus($event, user)">
        </combo-box>
    </div>
</div>

Snapshot: https://i.sstatic.net/gF2w5.png

htmlcssangulartypescript

Answer №1

Implement a template variable using vanilla JavaScript calculations: 

<div #box style="left: 500px;"></div>

<p *ngIf="box?.getBoundingClientRect().x + box?.getBoundingClientRect().width > totalWidth">
  The box is exceeding the boundaries
</p>

Check out this Stackblitz demo (modify the style.left of the box to see it in action)

Answer №2

It seems like the English in your message is a bit jumbled, making it difficult for me to understand exactly what you're looking for. From what I can gather, it appears that you want to scroll to the bottom of a dropdown list.

Based on the screenshot you provided, it looks like the scrollbar is near the top, indicating that the dropdown has extended the page vertically and its end is visible.

Under these assumptions, a straightforward solution would be to target the last option in the dropdown and scroll to it using el.scrollIntoView(), where 'el' represents the desired DOM element.

You can find more information about available options in the documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

If you are working with Angular4, you can access the DOM element using var el = ang4ele.nativeElement.

Unfortunately, without access to your complete code (only the template part was shown), it's challenging to test this solution thoroughly to ensure it fits your specific case perfectly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide for releasing a typescript package compatible with both node and react applications

I have developed an authentication library in TypeScript which I have released on npm. My goal is to make this library compatible for use in both Node.js projects and React projects created with create-react-app. However, I am facing an issue where one of ...

node.jsreactjstypescriptcreate-react-appnpm-publish

What is the best way to display text from a header box across multiple line boxes in real time on an HTML page?

Looking to enhance an HTML layout with a header box and line comment boxes. <textarea name="order[header_comments]"></textarea> The line comment boxes are structured as follows: <textarea name="line_comments[0][line_comments]"></tex ...

javascriptjqueryhtmljquery-selectors

Master the Art of Image Loading in Codeigniter

Hey there, I'm completely new to Codeigniter. In the Controllers folder, I've created a file called caller.php and in the \Views directory, I've created a file named home1.php. Additionally, within the root directory, I've made an ...

phpcsscodeigniter

How can I build TypeScript using the react-native-typescript-transformer?

Ever since Expo SDK 31, TypeScript support has been seamlessly integrated. This is a fantastic development. However, it appears that babel-typescript is being used. In my project on Expo SDK 33, I require the use of react-native-typescript-transformer. Is ...

typescriptreact-nativeexposwagger-codegen

Typescript Error "Variable is of type 'undefined'."

During our work on the codebase yesterday, everything went smoothly without any issues. However, this morning we encountered a new problem where every error is now being classified as Unknown instead of the previous any type. Is there a way to undo this ...

typescripttypescript-generics

Angular 4: The process of fetching the URL before the previous one

Upon clicking the /getEmployees URL, the EmployeesComponent will be triggered to show the employee list. If I were to click on a specific employee, say N, the EmployeeComponent would then launch. However, I am interested in finding a way to retrieve the o ...

angular

What is the best way to create a text shadow effect for a heading element?

Is it possible to create a centered heading like the one in this image using only CSS, without using flexbox? [EDIT] Below is an example using flexbox. However, there are some limitations with this code as it doesn't allow reusing the same class for ...

htmlcss

Accessing a form control's class in code behind using asp.net

<form id="form1" runat="server" role="form" class="form-horizontal"> Is there a way to modify the class of a control in the code behind? I want to update its value. Appreciate any help! ...

c#htmlasp.net

What is the reason that filter_input does not work for retrieving form data when $_GET functions without any issues?

Currently, I am utilizing the get method along with a form to save the status of checkboxes into an array. I have made an effort to utilize a filter_input line to grab details from each checkbox one by one and store it in an array. Everything seems to wor ...

phphtmlarraysfilterget

To determine the response based on a single checkbox in HTML, we can set up a conditional statement to return "yes" if the checkbox is checked

My query pertains to a contact form where there is a checkbox. Currently, if the user checks the box, I receive a "YES" response without any issues. However, my requirement is that if the user does not check the box, I should receive a "NO". Is it possible ...

htmlcheckbox

How to Fix TypeScript React JS Lint Error: Missing Dependency in React Hook useEffect without Disabling Lint or Adding Additional Dependencies

As I build a Web application using React JS and TypeScript with React hooks, I encountered a warning when utilizing a custom hook in my Component. The warning states that the dependency 'productsHook' is missing in the useEffect hook. One way to ...

reactjstypescriptlint

What is the best method for retrieving a single resource from the backend using Typescript and createAsyncThunk by obtaining the params ID?

I am currently facing an issue while trying to fetch a single resource (one to-do) from my backend. I am struggling to set up my store in the frontend and cannot seem to find the req.params.id as I would typically do with regular Javascript + Redux thunks. ...

typescriptexpressmongoosereact-reduxredux-toolkit

Guide to customizing the value appearance in tooltip axispointer chart (angular)

Check out the code snippet here: https://stackblitz.com/edit/angular-ngx-echarts-zn8tzx?file=src/app/app.component.ts view image description I am looking to format and add the text "UPLOAD" and "DOWNLOAD" below the date and time. For instance: 2020-02- ...

javascriptangulartypescript

Avoiding interference with adjacent elements caused by long content in a div

Hey there, I could really use some help with my CSS layout, I'm pretty new to CSS and Flexbox and I'm trying to create a simple layout. The issue I'm running into is how to stop long content inside a pre tag from pushing other divs. Here& ...

htmlcssflexbox

Displaying JSON data as an HTML string on a separate page

Hello everyone, I am working with a JSON file obtained from an API that contains articles formatted in HTML. I am trying to figure out how to open these articles on a new page. When I insert the content into an HTML file, it displays nicely as a webpage. ...

htmljsonvue.jsvuejs2

Using Javascript to extract formatted text from a webpage and save it to the clipboard

I've developed a straightforward tool for employees to customize their company email signature. The tool generates text with specific styling, including bold fonts and a touch of color - nothing too extravagant. When I manually copy and paste the styl ...

javascripthtmlmootools

Arranging items in a vertical column using Bootstrap styling

I am facing a particular issue: The initial design is displayed in Picture 1: I am using Bootstrap 5 as my CSS framework. I attempted to utilize the pre-built columns feature, but so far, I have not been able to find a solution and am currently strugglin ...

cssbootstrap-5

Ways to eliminate the relationship between parent and child

I am attempting to create a design featuring a large circle surrounded by smaller circles. The parent element is the large circle, and the small circles are its children. My goal is for any circle to change color to red when hovered over, but if I hover ov ...

javascripthtmlcss

Ignoring TypeScript overloads after the initial overload declaration

Issue An error occurs when attempting to call an overload method for a specific function. The call only works for the first defined overload, causing an error if the call is made to the second overload with mismatched typing compared to the first overload ...

javascripttypescript

Trouble adjusting opacity with CSS in @media queries for maximum width restrictions

When building a webpage with a collapsible header and a fading large logo that transitions to a smaller version in a different location upon scrolling down on the desktop view, there seems to be an issue. The smaller logo's opacity property does not r ...

csstwitter-bootstrapresponsive-designmedia-queriesbootstrap-5