Need assistance with positioning an icon in the center of two boxes. Any guidance would be greatly appreciated. Thank you!
Need assistance with positioning an icon in the center of two boxes. Any guidance would be greatly appreciated. Thank you!
MainApp.tsx
export default function MainApp() {
return (
<Row>
<Col>
<div className="input-group">
<Input
type="text"
className="custom-input origin"
placeholder="Enter Origin"
/>
<img
src="https://cdn-icons-png.flaticon.com/512/1828/1828961.png"
alt="star"
width="15"
className="star"
/>
<Input
type="text"
className="custom-input destination"
placeholder="Enter Destination"
/>
</div>
</Col>
</Row>
);
}
styling.css
.MainApp {
font-family: serif;
text-align: center;
}
.input-group {
position: absolute;
}
.input-group .custom-input {
height: 3rem;
letter-spacing: 1.5px;
font-size: 12px;
border-radius: 0px !important;
padding-left: 10px;
}
.input-group .destination {
position: absolute;
left: 170px;
}
.star {
z-index: 999;
position: relative;
left: -8px;
}
.autocomplete {
padding: 0px;
background-size: 17px 15px;
position: absolute;
}
Utilizing the power of bootstrap, you can enhance your container div by adding the class position-relative, and for the icon, consider adding
position-absolute top-50 start-50 translate-middleCheck out the modified demo at: codesandbox
Although the provided codesandbox is built with reactstrap, it did not have bootstrap installed. Hence, the example above includes the necessary package.
Note that even though the post is tagged with bootstrap-4, the version of reactstrap installed might not support it. In such cases, modifying the class names with custom CSS might be necessary.
To give the icon an added visual element, a custom class with a higher z-index is included:
.custom-icon {
z-index: 2500;
}
import "./styles.css";
import { Row, Col, Input } from "reactstrap";
export default function App() {
return (
<Row>
<Col>
<div className="input-group position-relative">
<Input type="text" className="custom-input" placeholder="Origin" />
<Input
type="text"
className="custom-input"
placeholder="Destination"
/>
<img
src="https://cdn-icons-png.flaticon.com/512/1828/1828961.png"
alt="icon"
width="15"
className="position-absolute top-50 start-50 translate-middle custom-icon"
/>
</div>
</Col>
</Row>
);
}
I am in the process of developing a library website for my school that includes login and administration capabilities. I am relatively new to node.js and EJS, but I recently revamped the routing and page delivery system to use EJS and express. As part of u ...
Understanding React's Context API In my current project, I am utilizing React's context API to efficiently pass collected data from my API, which is built using Node.js, Express, and MongoDB. One crucial aspect of this setup is the boards array, ...
At the moment, I'm utilizing Ant Design (v4.22.8) and Next.js (v12.3.4) in my project. One issue I've encountered is with a Modal component that activates when a button is clicked. Instead of overlaying the current content on the screen, the moda ...
I have a JavaScript object that contains various training courses. Each category includes multiple training courses, and each course is associated with a specific category. Currently, I am able to display the title and description of each category in a mo ...
When working on a project, I extract JSON objects from the Zammad-API. One of the tickets retrieved is as follows: [ { "id": 53, "group_id": 2, "priority_id": 2, "state_id": 2, "organizati ...
Implemented a hello world AppBar/Toolbar with the variant='dense' style. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWo ...
I've successfully created a countdown timer in the template that decrements a number perfectly. Now, I'm facing the challenge of triggering a function declared within the methods section once the countdown reaches 0. Despite attempting to check i ...
I'm facing an issue where I can't seem to get the image to display as a background. If I just attach the image directly, it shows up without any problems. However, my intention is to make it a background image so that I can overlay text on top of ...
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ View view = inflater.inflate(R.layout.fwebview, container, false); webView = (WebView) view.findViewById(R.id.webView); String url = ge ...
Currently, I am attempting to use a get request method within both Vue and Express in order to retrieve data based on my v-model. Displayed below is the code where I am trying to send the data to Express. getResult() { axios .get( `${process. ...
Let me elaborate on this issue. I have a List component from material-UI, with ListItem set to button=true which makes the entire item act as a button. Within the ListItem, I have added a FontAwesomeIcon. To hide the button, I set its style to visibility: ...
Case One: I am currently implementing server-side pagination in Rails using React for the front-end and Redux for state management. I have completed all the necessary setup, and the only thing left is to pass the newly generated URL to fetch the new data. ...
Hi there, I'm a beginner with React and I'm encountering an issue while trying to set the onClick property of a react component. The error message I'm receiving is: Warning: React.createElement: type is invalid -- expected a string (for bui ...
I am currently working on a search field with a drop-down menu that determines the type of data being searched. This, in turn, dictates the input type for the search field. For example, if I am searching by "name" or "ID number", the input type is set to t ...
I am seeking input for 8 pieces of information to be displayed in an alert box, only if the user enters something in each field. All the gathered data will be shown in a single alert box once the user confirms their desire to review it. If the user choos ...
I'm currently encountering difficulties when trying to upload files using Material UI DropzoneDialogBase in my project. My frontend is built with react, while the backend is powered by flask. Below is the definition of my component: ...
Although there are solutions available for plain JavaScript code, unfortunately they are not applicable in this particular scenario. I have a table that needs to be populated with data. The current code snippet is as follows: <tr ng-repeat="rows in $ ...
When you first click on the select, it displays incorrectly https://i.sstatic.net/Ax9T7j8J.png But when you click on it a second time, it displays correctly https://i.sstatic.net/UpW4krED.png $(document).on("click", "#edit_afpDetalle_mes&q ...
I am currently developing a mean stack application and encountering difficulties when attempting to send requests to the Express/Node server in order to delete an element from an array in Mongo. Below is my schema for reference: var DeckSchema = new Schem ...
My code includes the following: <div class="a"><img></div> and <div class="b"><img></div> I want to dynamically enclose img tags with a div and utilize $(":not('.a, .b) > img") for ...