I'm currently working on a project that involves center-aligning the page title within the parent div. However, I have run into an issue with an overlapping back button when the page title is too long due to its absolute positioning. Can anyone provide assistance? You can refer to the image linked here: (). Thank you for your help!
My goal is to always keep the page title centered within the parent div, regardless of its length, without it overlapping with the position-absolute back button.
try using grid layout to center the title
html,body{
margin: 0;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: aliceblue;
gap: 8px;
}
appbar{
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 8px;
gap: 4px;
width: 360px;
white-space: nowrap;
background-color: #fff;
color: #191919;
}
.icon{
width: 44px;
height: 44px;
cursor: pointer;
}
.back{
background: url("data:image/svg+xml,...");
}
.title{
font-weight: normal;
font-size: 18px;
text-overflow: ellipsis;
overflow: hidden;
}
tool{
display: flex;
flex: 1;
font-size: 14px;
align-items: center;
}
.right{
justify-content: end;
}
.link{
padding: 8px;
color: rgba(0,0,0,.5);
cursor: pointer;
}
.search{
background: url("data:image/svg+xml,...");
}
.add{
background: url("data:image/svg+xml,...");
}<appbar>
<tool>
<a class="icon back"></a>
</tool>
<h2 class="title">Unique Title</h2>
<tool class="right">
<a class="link">Rules</a>
</tool>
</appbar>
... additional appbars with different content ...
.container{
display: flex;
width: 100%;
align-items: center;
}
.text{
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline;
}
button {
background-color: #4E92C7;
border: none;
color: white;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin:0 15px;
}<div class="container">
<button>Click Here</button>
<div class="text"> Long Page Title That Goes On and OnLong Page Title That Goes On and OnLong Page Title That Goes On and OnLong Page Title That Goes On and On </div>
<button>Click Here</button>
</div>Can I contain an entire 960 grid within a div on my webpage? I am looking to create a page wider than 960px, and considering placing sidebars outside of the 960 grid while having it manage the central column. ...
Currently, I am in the process of working on a project for a hotel. Specifically, I have been focusing on developing a reservation screen where users can input information such as the hotel name, region name, check-in and check-out dates, along with the nu ...
There is a dilemma that only those in the world of web development will understand. Beware! I have envisioned a layout for a website I am constructing. The concept involves tilted <hr/> elements on the page, with text wrapping around them (refer to ...
I want to be able to toggle the visibility of my submenus when a link is clicked. Here's an example code snippet: <ul> <li><a href="www.example.com">Test</a></li> <li><a href="www.example.com ...
Is there a way to automatically save the data selected in a drop down list without having to click on a save button? public ActionResult SelectFeedBack(int id) { YelloAdminDbContext db = new YelloAdminDbContext(); ViewBag.FeedBack ...
I am currently developing a tic-tac-toe game with 9 buttons that will display either an X or O image depending on the boolean value of the variable isX. The main container for these buttons is a div element with the id 'stage' and each button ha ...
In order to make an API request, I need to retrieve the id. However, whenever I try to include <a v-on:click="showRecipe({{inf.Id}})">Recipe</a> in my code, the entire page crashes. Removing this line resolves the issue. How can I pass the id ...
Is it possible to achieve this? I think so. I have created a carousel with a form inside. The form includes a textarea and a submit button. Currently, the slider does not slide if the mouse pointer is inside it, which is good. However, if the pointer is o ...
Recently, in one of my projects, I've been utilizing Material-UI's Autocomplete component. Despite its lack of flexibility with resizing, I managed to tweak certain width, height, and font size attributes successfully. However, I'm currently ...
Looking for a solution to submit an add to cart POST request without any redirection at all? I have tried changing return_to to "back" but that still reloads the page, which is not ideal. My goal is to smoothly add the item to the cart and notify the cli ...
Even though I have specified the width of the Header table to be 100% and applied a margin-right of 1cm for PDF reports with landscape orientation, the table is not taking up the full width. However, when my PDF report has portrait orientation, the header ...
Can anyone assist me with this CSS issue? When I hover over to view the movie details, the entire word flips along with it. Is there a way to make only the word flip initially, and then have it return to normal when hovered? The HTML code is included belo ...
In my layout, I have three row divs: header, content, and footer. My goal is to create a table-like format within the content div to display information. Here's an example: .itemwrapper{width:600px;} .picture{width:150px;float:left;} .item{width:45 ...
I have a main layer with multiple layers stacked on top of it. I need the second layer to extend its width to match the body's width. Main Project: http://example.com What I've tried: I looked into: Solution for matching div width with body ...
Struggling with the nth child selector. Here is the HTML snippet: HTML <div class="container"> <ul class="mh-menu"> <li> <a href="#"> <span>Chairman of the Board</span> <spa ...
I am working on a case where I need to add animation to a DOM object using the ngHide directive: Check out this example here Within this scenario, I have an array of JSON objects: $scope.items = [ {"key": 1, "values": []}, {"key": 2, "values": [ ...
As someone new to JavaScript, I am trying to figure out how to populate a HTML table with geojson entries like "ename" etc. Here is my current code: <table id="jsoncontent"></table> <script type="text/javascript"> window.onload = fu ...
Here is the code I used in an attempt to make a div element draggable: let div = document.querySelector('div') div.onmousedown = function() { div.addEventListener('mousemove', move, true) } window.onmouseup = function() { window. ...
Encountering an issue with the French language on a website I'm currently developing ... Specifically, there are menu bars, tabs, and text within each tab involved. Upon setting charset=ISO-8859-1, the body text functions correctly, but the menu bar ...
I have a PHP page that contains a form, checkboxes, and a submit button. I added an if statement to execute a PHP script I created when the button is clicked, which deletes certain values from the selected rows. The button functions properly and changes s ...