Looking for a solution to keep certain elements at the end of the first row in a flex container with flex-wrap: wrap. Take note of the "Expand" button.
I attempted to use 'row-reverse' + 'order: -1', but found that the elements moved to the new row from left to right instead of right to left. Any suggestions?
Check out my snippet here: https://jsbin.com/divavosafu/1/edit?html,css,output
Any ideas on how to achieve this layout?
Simply place the numbered buttons inside an element and set both it and the main container as flex containers:
.container {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
resize: horizontal;
overflow: auto;
}
.numbers {
display: flex;
flex-flow: row wrap;
}
.expand {
flex: 1 1 auto;
}
.right {
flex: 0 0 auto;
}
.item {
display: inline-block;
margin: 4px;
padding: 8px;
border: 1px solid gray;
}<div class="container">
<div class="numbers">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<div class="expand">
<div class="item">Expand</div>
</div>
<div class="right">
<div class="item right1">Right 1</div>
<div class="item right2">Right 2</div>
</div>
</div>It seems that I have stumbled upon a solution similar to what I need, but the "Expand" button should be positioned within the left container.
.container {
display: inline-block;
width: 100%;
}
.right {
float: right;
}
.item {
display: inline-flex;
padding: 8px;
border: 1px solid #CECECE;
}
.item:not(:last-child) {
margin-right: 8px;
margin-top: 8px;
} <div class="container">
<div class="right">
<div class="item expand">Expand</div>
<div class="item ">Right 1</div>
<div class="item ">Right 2</div>
</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>I need to store a string, such as "<div class='some_class'>some content</div>", in a mongo document. Later on, I want to retrieve this content and convert it into a DOM node. What is the best way to manipulate the content before inse ...
I want to position a div element so that the bottom half overlaps another div element. You can view a basic layout here When the transform property is enabled for .overlay, the element is moved halfway down but it also shows the white space of the parent ...
I am experiencing an issue with a jqueryui dialog that I have defined with a maxWidth setting. $("#myDialog").dialog({ autoOpen: false, width: 'auto', maxWidth: 1000, height: 'auto', position: [2 ...
Initially, the code I am working on queries the database to determine if there are any available workstations in the office. If workstations are available, "option" elements are dynamically added to a "select" element using jQuery: $('#idofselectel ...
How can you correctly link a CSS file called "stylesheet" to an HTML page when both files are located in the same directory? ...
My website has a section that spans 100% width and is 450 pixels tall. This is the HTML structure... <section class="interactive-banner"> <figure></figure> </section> I am aiming for each 'figure' element to be 150 ...
Utilizing Bootstrap 4 carousel, I am attempting to center an image both vertically and horizontally. Below is my code along with the styling that I have applied: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ul class="car ...
For a while now, I've been avoiding using JavaScript because every time I attempt to understand it, I become more confused. However, I am now in need of it for a website I'm developing... I would like to hide the page until everything loads so t ...
Just recently, I launched my brand new website. Everything seems to be functioning properly except for one issue that I discovered in the HTML source code. There are 15 blank lines before "<!doctype html>", which is causing some problems with SEO and ...
Is there a way to implement the moment.format method in HTML? Currently, I am utilizing the toLocaleDateString method to showcase an array of dates: <ng-template let-event> <div>{{event.date.toLocaleDateString(' ...
I am having trouble getting my text to format properly on my web page. I have defined rules in my style sheet to center an object on the screen, but it's not working as expected. Here is the code for my web page: body { text-align: center; } h1 { ...
My goal is to use HTML and JavaScript to scan a QR code in nurse_home.html. I have successfully scanned and viewed the content of the QR code on the website, but I am facing an issue with POSTing the QR code output represented by <output type='POST ...
I am trying to create a hover effect where a caption appears when an image is hovered over. The text should slide in from left to right, causing the container to grow along the X axis as the image is hovered over. I have managed to make the text appear on ...
Is there a way for me to utilize HTML5 local storage in order to store a small executable file and subsequently offer it for download via a button click? ...
My website's image sizes are perfectly set for desktop, but they do not appear responsive in mobile mode. Despite using Bootstrap, the images overflow the display size. How can I set different image sizes for mobile mode? The same issue applies to the ...
Is there a solution for the Bootstrap 4 select option not displaying added image thumbnails properly? Thank you <select class="form-control" id="exampleFormControlSelect1"> <option><img src="/assets/images/platform/abs.png">AB ...
I'm attempting to develop a reset button for jquery-select2 multiple select, but for some reason, my solution isn't working as expected. Here is the HTML code: <select id="workload-selector" class="js-source-states-2" multiple="multiple" sty ...
Trying to store data in a database with dot net core, having trouble when fetching data from an option menu. Here's a snippet of the code from the view: Any ideas on what might be going wrong? Thanks in advance <3 ` <label asp-for=&q ...
Recently, I've been honing my Javascript skills and decided to create a follow-mouse function. After successfully implementing it, I started brainstorming a new concept that I'm unsure is achievable. Is there a way to develop an "orb of vision" ...
I'm currently in the process of rewriting a page using Angular. I've successfully copied over all the styles and layout from the original page, but for some reason the colors aren't being applied correctly. After comparing the original and n ...