My current search bar design features an input area that does not match my expectations. The input length is restricted and starts from the center rather than the black border I had envisioned.
If you'd like to see the code and design in action, check out the CodeSandbox link below:
https://codesandbox.io/s/elated-satoshi-x7v65?file=/SearchBar.jsHere is a solution for you!
import React from "react";
import { alpha, makeStyles } from "@material-ui/core/styles";
import InputBase from "@material-ui/core/InputBase";
import SearchIcon from "@material-ui/icons/Search";
import CloseIcon from '@material-ui/icons/Close';
import IconButton from '@material-ui/core/IconButton';
import Paper from '@material-ui/core/Paper';
const useStyles = makeStyles((theme) => ({
root: {
padding: '2px 4px',
display: 'flex',
alignItems: 'center',
width: 400,
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.black, 0.15)
},
input: {
marginLeft: theme.spacing(1),
flex: 1,
},
iconButton: {
padding: 10,
}
}));
export default function PrimarySearchAppBar() {
const classes = useStyles();
return (
<Paper component="form" className={classes.root}>
<IconButton type="submit" className={classes.iconButton} aria-label="search">
<SearchIcon />
</IconButton>
<InputBase
className={classes.input}
placeholder="Search..."
inputProps={{ 'aria-label': 'Search...' }}
/>
<IconButton color="primary" className={classes.iconButton} aria-label="directions">
<CloseIcon />
</IconButton>
</Paper>
);
}I'm struggling with updating a nav bar that has different divs based on the link clicked. <script> $(document).ready(function (){ $("#content").load("content/index_content.php"); $('a').click(function(){ $ ...
When attempting to navigate from my App component to the GamePlay component, I encountered an issue. Here is a snippet of my App.js: import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; imp ...
I understand how to adjust styling with breakpoints for various properties like height, width, and font size. However, I am struggling to find examples of switching images based on screen sizes. My goal is to replace an image with a different one dependin ...
Currently, I am utilizing the .hide() and .show() functions to toggle the visibility of my page contents. Additionally, I am using the .HTML() function to change the elements inside a specific div. $('#wrap').html(' <span id="t-image"> ...
I've been working on developing a website and one of the key features I'm trying to implement is a slideout menu that slides horizontally when the mouse hovers over it. To make development easier, I initially set the menu to be fully extended by ...
I've been struggling for hours trying different methods to achieve the desired outcome, but unfortunately, none of them have worked as expected. My goal is simple: I want the fixedbar to fade in when the scroll position exceeds the position of the ph ...
My goal is to have my website icon appear in WhatsApp when I share it (similar to the example below). https://i.stack.imgur.com/KCWi8.jpg I initially tried using this code, but it didn't work: <link rel="shortcut icon" href="css/img/favicon/favi ...
After learning some React concepts and attempting to practice on my own, I encountered a small challenge. My goal is to store the data from an input field in an object, where the username field corresponds to its value and the password field contains its v ...
Can someone explain how to implement a menu that appears on the left side when the menu icon in the app bar is clicked? Specifically, I'm referring to the app bar with buttons. Below is the code snippet: import React from 'react'; import Pr ...
I am facing an issue with the following React component. Even though the raiseCriteriaChange method is being called, it seems that the line this.props.onCriteriaChange(this.state.criteria) is never reached. Do you have any insights into why this.props.onC ...
I've been searching for a solution to this issue, but nothing seems to be working. I want the inner div to be positioned at the bottom of the outer div, with a 5px margin separating them. However, using absolute positioning disrupts the width and cent ...
I am currently facing issues with using postcss in conjunction with autoprefixer-core. Even though the css is being generated correctly, autoprefixer doesn't seem to be applying any prefixes. I have already installed postcss and autoprefixer via NPM ...
I am working on developing a single-page application that fits within one screen with the following structure: There is a fixed header that includes: Two columns (1/3 for left, 2/3 for right) : a logo on the left a breadcrumb on the right. The ...
While trying to utilize the MaterialUI Select component with typescript/reactjs, I encountered an issue during the instantiation of the Select element. The error message I'm receiving states: Type 'Courses' is missing the following properti ...
As a beginner with Sencha Touch 2, I am currently working on uploading images onto an iPad using Xcode. My app has audio playing on the home screen, and I want the video to start playing and the audio to stop when a specific tab is selected. However, the ...
I have a simple HTML file displaying text and including a PHP file with basic echos: The HTML code is in 'home.html' file: <html> <body> <h1>Welcome to my home page!</h1> <p>Some text.</p> <p>Some more ...
Is it possible to have one div display over another when a link is clicked? Here is the HTML and CSS code: <div id="desc" class="desc">some text</div> <div id="awards" class="awards">some other text</div> <a href="#">click< ...
I attempted to solve the issue independently but didn't have much success. My goal is to create a proper version for mobile users using bootstrap, however, it currently looks terrible on mobile devices. I suspect the problem lies with the div classes ...
I am facing a layout issue with 2 images that are placed side by side within their tag . The sizes of the images are different, but they are both anchored at the top of their parent element. <span style="position: relative; left: 0; top: 0; vertical- ...
I'm currently developing a new open-source alternative to Plex and I am facing some challenges with the in-browser video player. My goal is to have the video player maximize its size within the window during playback, similar to what Chrome and Netfli ...