Customize CSS to target the first and last elements in a row using flexbox styling

I am facing a challenge in selecting the last element of the first row and the first element of the last row within a flex container.

The setup involves a flex-wrap: wrap; for my flex container where all elements have flex: auto; with different sizes. This arrangement allows the elements to justify themselves within the container, while also having rounded corners on the corner elements.

However, the issue arises when I dynamically hide/show elements using events like click. Each time the layout changes, I need to ensure that the corner elements retain their rounded appearance. In a grid container, I would use nth-child, but in a flex container where the number of elements per row varies, I require a more flexible solution.

I have come up with a jQuery solution (link provided below), but it feels bulky and cumbersome. I believe there must be a smarter or simpler selector that I am missing out on.

I would greatly appreciate any assistance in optimizing the code so that myself and others can benefit from it.

http://jsfiddle.net/aj1vk0rv/

edit: Just made some improvements to the code http://jsfiddle.net/aj1vk0rv/1/

javascriptjqueryhtmlcssflexbox

Answer №1

While there may not be a straightforward solution, one way to handle this situation is by following these steps:

var customFunction = function () {
  var container = $(".container");
  var containerWidth = container.width(); 
  var containerHeight = container.height();

  var topLeft = $(".ui-widget:visible:first");
  var topRight = $(".ui-widget:visible").closestToOffset({left: containerWidth-20, top: -20});
  var bottomLeft = $(".ui-widget:visible").closestToOffset({left: 0+20, top: containerHeight+20});
  var bottomRight = $(".ui-widget:visible:last");

  $(".ui-widget").removeClass(function (index, css) {
    return (css.match(/\ui-corner-\S+/g) || []).join(' ');
  });

  topLeft.addClass("ui-corner-tl");
  topRight.addClass("ui-corner-tr");
  bottomLeft.addClass("ui-corner-bl");
  bottomRight.addClass("ui-corner-br");
}

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

Is conditional CSS possible with NextJS?

While working on an animated dropdown for a navbar, I came across this interesting dilemma. In a strict React setup, you can use an inline if/else statement with onClick toggle to manage CSS animation styles. To ensure default styling (no animation) when ...

javascriptcssreactjsnext.js

Redirecting to another controller action in MVC5

As a newcomer to ASP.Net MVC5, I am looking to create a Jquery call that will communicate with a controller and return a new view while passing a single parameter. Although I have seen numerous examples for MVC3 and earlier versions, I am struggling to fin ...

jqueryhttp-redirectcontrollerasp.net-mvc-5

Using discord.js does not allow line breaks in embed descriptions

const chatRoom = replyOptions.getRoom("room"); const header = replyOptions.getHeader("header"); const content = replyOptions.getContent("text"); const chatEmbed = new MessageEmbed() .setColor('DARK_VIVID_PURPLE') ...

javascriptnode.jsdiscorddiscord.js

Tips for updating a specific portion of a component in react.js

import React,{useEffect} from 'react'; import CloudTables from '@cloudtables/react'; import { useState } from 'react'; function DataGridTable ({ input1Value, input2Value }) { return ( <div className="con ...

javascriptreactjsdatatabledatagridjavascript-objects

Unusual display of feedback text in Bootstrap 4

When I directly copied this code snippet from Bootstrap 4: <div class="form-group has-danger"> <label class="form-control-label" for="inputDanger1">Input with danger</label> <input type="text" class="form-control form-contro ...

javascriptjquerycsslaravelbootstrap-4

The interval between successive ajax requests

Seeking assistance with calling a service that returns one row of data at a time. The goal is to fetch 100 rows, with a specified time gap between each hit to the service, ideally around 200 ms. Previously used jquery for similar calls: for i=1 to 100 ...

jqueryajax

What steps should be taken in PHP to display a popup when the user input is found to be invalid?

I've been working on implementing a popup in PHP to show if the user enters an existing username, as per our teacher's requirement to use popUp instead of alert. I have set the visibility property of the popup to "Hidden" in CSS; <div class=&q ...

javascriptphphtml

Angular HttpClient not recognizing hashtag

I'm trying to make a REST API call, but running into issues with the developerId parameter being sent incorrectly: let developerId = "123#212"; let url = \`\${Constants.BASE_URL}\${marketId}/developers/\${developerId}\`; retur ...

javascriptangulartypescripthttpclient

When you try to import from another file, the method is not defined

When I attempt to import a method from another file, I am encountering an issue where it returns undefined. The structure involves 3 files with one calling the next in sequence. File1: const { methodFromFile2 } = require('./file2'); methodFromFi ...

javascriptnode.jsnode-modules

Using jQuery to display checkbox text even when it is not directly adjacent to the checkbox

I'm struggling to display the checked value text as shown in the image without any refresh or click. Can anyone offer assistance? This is my PHP dynamic form: <div class="products-row"> <?php $tq=$conn->query("select * from os_tiffen ...

javascriptphpjqueryajaxcheckbox

The AngularJS ngModel directive encounters issues when used within a ui-bootstrap tabset

Check out the code snippet below to see the issue at hand: <!DOCTYPE html> <html ng-app="plunker"> <head> <title>AngularJS Plunker</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/cs ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrap

Adjust the position of the content to the bottom for a form-group in Bootstrap v4

Currently, I am facing an issue where my label is overflowing and wrapping around the input field, causing it not to align at the bottom of the div. Is there a straightforward CSS solution for this problem? I have experimented with position relative/absol ...

javascripttwitter-bootstrapformsbootstrap-4

Ways to capture the value of several images and add them to an array

When working on a multiple file upload task, I encountered the need to convert images into base64 encoded strings. My form consists of two fields, one for first name and another for image upload. The user can enter their name, upload multiple photos, and c ...

javascriptjqueryjsonforeachbase64

Concealing the sidebar in React with the help of Ant Design

I want to create a sidebar that can be hidden by clicking an icon in the navigation bar without using classes. Although I may be approaching this incorrectly, I prefer to keep it simple. The error message I encountered is: (property) collapsed: boolean ...

javascriptreactjstypescriptweb-applicationsantd

jQuery's draggable and resizable functionality with containment provisions is designed to

I'm struggling to create a resizable and draggable div using jQuery, but it's proving to be quite buggy in its implementation. Despite finding similar questions, I haven't come across a solution yet. How can I fix the containment bug when ...

javascriptjquerycssjquery-ui

Updating Bootstrap Indicators with jQuery on Click Event

Unfortunately, I am unable to share an image due to limited internet data. My goal is to switch each image to its sprite equivalent. There are three list items that I'm struggling to change because they each have two classes that need to be updated. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can we add to the input field that is currently in focus?

Recently, I've been working on a bookmarklet project. My goal is to append an element to the currently focused input field. For instance, if a user clicks on a textarea and then activates my bookmarklet, I want to insert the text "Hello" into that sp ...

javascriptjqueryhtml

Is it possible to change the background color of a Bootstrap button using CSS overrides?

Desired Outcome https://i.sstatic.net/EjEXG.gif Actual Result https://i.sstatic.net/BmXYG.gif The goal is to toggle the red-background class, so that when hovering over the button-bullet, its background-color changes to #FCC1C5. Avoiding the use of .b ...

jquerycsstwitter-bootstrap

Using a string as a query parameter in Javascript/AngularJS

Hey there! I have a username that I'm passing to retrieve a record from the database. Here's what I have in my controller: $scope.team=function(data) team_factory.getMember.query({}, data.username, function(data){ $scope.team=data; }); And ...

javascriptjqueryangularjs

react-ga4 is sending multiple view events repeatedly

After setting up a Google Analytics account and creating a new property, I integrated the tracking ID with react-ga4 for my Album ItemPage as shown below: const ItemPage = () => { const {user} = useContext(AuthContext); let { item } = useParams ...

javascriptreactjsreact-hooksgoogle-analytics-4