I am brand new to Angular. I need to design something like this:
https://i.sstatic.net/Zcb9i.png
However, I'm struggling to find the right solution. Here is what I have so far:
https://i.sstatic.net/7hsrk.png.
Having been a backend developer, I'm finding it hard to approach this.
Below is my code snippet:
<div class="container">
<div>
<div class="solHeading">
Solution Number
</div>
...
</div>
Utilize Bootstrap Grid to simplify the HTML structure into rows and columns.
Remember that each row in Bootstrap Grid consists of 12 columns.
The layout is divided into 3 columns:
Solution Number (col-2)
Solution Name (col-2)
The rightmost section displaying history, days, price, etc. (col-5 with offset: col-3)
3.1 To display the history, days, price, etc. horizontally, the root element should have classes: "d-flex" and "flex-row". Each item should also have "flex-grow-1" to fully utilize the width within the flex.
3.2. To align the mentioned items vertically, the root element needs the "align-items-center" class.
<div class="container">
<div class="row">
<div class="col-2">
<div class="solHeading">Solution Number</div>
<div class="solnNumber">
ISX0067537-001
<img src="/assets/images/myImage.png" alt="My Image" />
</div>
</div>
<div class="col-2">
<div class="solHeading">Solution Name</div>
<div class="solnNumber">My Solution 67537...</div>
</div>
<div class="offset-3 col-5">
<div class="d-flex flex-row align-items-center">
<div class="flex-grow-1">
<i class="fa fa-history hisIcon"></i>
</div>
<div class="days flex-grow-1">12 Days</div>
<div class="usd flex-grow-1">USD</div>
<div class="price flex-grow-1">013232440.00</div>
<div class="flex-grow-1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
>
...
</svg>
</div>
<div class="fa fa-angle-down flex-grow-1"></div>
<div class="flex-grow-1">
<button mat-raised-button class="color-button layoutBtn">
<div class="data">Go to Design Portal</div>
</button>
</div>
</div>
</div>
</div>
</div>
To arrange your DIVs, consider using either the simple col class or col-*
For more guidance, you can visit https://getbootstrap.com/docs/4.0/layout/grid/. It will provide a clear understanding and help answer any future questions you may have.
If you're looking to create a series of divs within a container, with one extending further than the rest, you can achieve this easily:
.container{
display:flex;
align-items:center;
}
.margin-left-auto{
margin-left:auto
}
<div class="container">
<div>...</div>
<div>...</div>
<div>...</div>
<div class="margin-left-auto"></div>
<div>...</div>
</div>
If you want to divide your content into 8 equal parts, you can use grid like so:
.container{
display: grid;
grid-template-columns: repeat(8,1fr)
}
Similar questions have been asked in the past, but I still haven't found a solution to my specific inquiry. Here it is: I have a table that needs to be sortable using a JavaScript plugin like ListJS. The key requirement is that I must have only one & ...
I can't seem to set the id attribute in my select element using JavaScript. When I inspect it, the id attribute isn't showing up... Here's the first method using JS: var selectorElem = document.getElementById('selector') var ...
Recently, I've been attempting to integrate angular charts using the chart.js bundle sourced from CDN links. The version of Angular being used is 1.5.7 and for chart.js it's 2.1.6. I encountered the following error message: angular.js:13708 T ...
Currently, I am exploring ways to track the position of the navbar beneath the landing page. The goal is for the navbar to become sticky at the top once it reaches that position until you scroll back up. Despite trying various solutions on Stack Overflow a ...
This is a unique test where I will create a button to retrieve information from a MySQL database. However, it's important to first understand this concept. So here is my custom text within the Flask framework: @app.route('/pythonlogin/home', ...
I am facing an issue while trying to display a google annotated chart on my jade project. I managed to successfully load a pie chart, but I am having trouble rendering a chart that requires the container element size to be explicitly defined. You can find ...
Just diving into Angular development and eager to create a standalone .ts file without having to generate an entire component. Can anyone guide me on how to achieve this using ng generate? Scenario: During the application build process, I need to write th ...
Recently Updated: Project 1: PHP, HTML, CSS, Java, mySQL Project 2: Angular, Spring Boot, PostgreSQL I am currently working on breaking off a part of Project 1 into a separate project (Project 2) that will operate independently with its own database. ...
I am currently working on developing a Single Page Application using ReactJS. However, I am facing an issue with styling. Currently, I have created 3 different pages (with the intention of adding more in the future), each having its own CSS file that is im ...
I wish to display the MapComponent in a new browser tab when a button in my AppComponent html file is clicked. Currently, when I click the button, the MapComponent opens in a new tab but it also displays the button. How can I configure it so that only the ...
After coming across the solution for ''Vertical Align in a Div ", I decided to implement Adam's answer. However, my challenge lies in figuring out how to display both an image and text side by side with the text centered vertically. View My ...
I'm currently working on creating an input box that allows users to type text, which will then appear on the screen when submitted. I feel like I'm close to getting it right, but there's a problem - the text flashes on the screen briefly bef ...
I am struggling with trying to make a full width background-color for a div in my ruby on rails app. Despite setting the background color and margin to 0, I still end up with unwanted margins on the left, right, and top. Below is the code snippet: <!D ...
I have multiple forms with distinct purposes: The first form collects information such as the reservation date, customer details, and the table assigned for that specific date. In the second form, I capture data to place an order. This includes entering ...
I've successfully managed to vertically center the contents of .onesizechart in Chrome and Safari, but I'm facing issues with Firefox and IE. Interestingly, the contents of .homepage-sizechart are displaying correctly, leading me to believe that ...
I am currently developing a Dash application in Python to showcase the results of some Topic Analysis that I have conducted. In order to visualize the topics, I used a tool called pyLDAvis which provides a nice visualization output saved as an html file na ...
I'm seeking your assistance with a challenge I am facing. In Form1.php, I have extracted data from the database (flock id, house, breed) which populates one table row. The issue is that this form involves two tables in the database. flock id, house, ...
Struggling to eliminate a mysterious margin from a div generated by Google Charts, despite no defined margins in the code that could be causing it. Below is a visual representation of the problematic div: div with unidentified margin Any assistance on t ...
Here is the code snippet that I am working with: $(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:true, items:4, autoplay:true, autoplayTimeout:2000, autoplayHoverPause:true }); }); #owl-demo ...
I'm struggling a bit with the CSS. I want to recreate the same effect as seen on . The left and right navigation arrows stay fixed vertically even when scrolling up or down the page. Does anyone have any code examples for that? ...