Heroku buttons styling issue
I made an app locally and pushed it on Heroku. The app is working perfectly on Heroku, however on the Homepage I have 2 buttons ( login and register ). When I run my app locally my buttons have some whitespace in between and they are rounded ( I am using tailwind for this). But on Heroku both buttons are not rounded and there is no whitespace in between them. When I inspect the button on Heroku, I see: class:".... rounded-full", which is what I expected and should have made the button rounded. Anyone has any idea what could cause this and how I can solve this ?
This is how my index.js looks like:
export default function Login() {
return(
<div>
<Loginbuttons/>
</div>
)
}
and Loginbuttons.js defined as:
import Link from 'next/link'
export default function Loginbutton(props){
return (
<div>
<div className = 'block'>
<button
style={{width:"10%", paddingTop:"15px", paddingBottom:"15px"}}
className='mt-10 mb-10 bg-blue-500 hover:bg-blue-700 text-wgvhite font-bold py-2 px-4 rounded-full'>
<Link href='login' style={{textDecoration: 'none'}}>Login</Link>
</button>
<button
style={{width:"10%", paddingTop:"15px", paddingBottom:"15px"}}
className='mt-10 mb-10 ml-10 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full'>
<Link href='register' style={{textDecoration: 'none'}}>Register</Link>
</button>
</div>
</div>)}
do you know?
how many words do you know
See also questions close to this topic
-
how to change prettier format for react native
my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter
from this code
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( <View> <Text>Apps</Text> </View> ) }
it's formatted to this
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( < View > < Text > Apps < /Text> < /View> ) }
-
react-router-dom v6 params only numbers
I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:
<Route path="list/:id(\d+)" element={<MyComponent/>} />
but it not work in v6.
-
How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."
My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...
This my .env file
REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX REACT_APP_authDomain=XXXXX.firebaseapp.com REACT_APP_projectId=XXXX REACT_APP_storageBucket=XXXXX.appspot.com REACT_APP_messagingSenderId=4997390XXXXX REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX REACT_APP_measurementId=G-M1XDXXXXXX
This my firebase config file
const firebaseConfig = { apiKey: process.env.REACT_APP_apiKey, authDomain: process.env.REACT_APP_authDomain, projectId: process.env.REACT_APP_projectId, storageBucket: process.env.REACT_APP_storageBucket, messagingSenderId: process.env.REACT_APP_messagingSenderId, appId: process.env.REACT_APP_appId, measurementId: process.env.REACT_APP_measurementId, }; when I debugging firebaseConfig object console.log(firebaseConfig.apiKey); ==========> undefined console.log(firebaseConfig.authDomain); ==========> undefined console.log(firebaseConfig.projectId); ==========> undefined console.log(firebaseConfig.storageBucket); ==========> undefined console.log(firebaseConfig.measurementId); ==========> undefined console.log(firebaseConfig.appId); ==========> undefined console.log(firebaseConfig.measurementId); ==========> undefined
client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
-
How to embed YouTube videos to the website without using iframes?
I have embedded YouTube videos to the website using iframes. The website is fetching videos in real-time which mean whenever the user uploads a new video on YouTube, it is updated on the website too.
Now there are two reasons I'm looking for iframes alternate.
It makes the website slow. Every time the site is loaded, videos are fetched from YouTube and it is making the website slow.
I'm learning SEO, and I read iframes hurt website SEO performance.
So, what alternates do I have?
-
How do i connect to websocket URL from website?
i'm trying to get the update values from website, i manage to connect but i cant get the values, i dont know if i'm doing anything wrong.
this is what i'm trying to do, maybe this url is not complete, but i dont know how to get the full URL. when i try to conect i dont recieve anything, i read the coments i will try to send something to this websocket
you need click in this button to show the entry hall
const WebSocket = require('ws') const ws = new WebSocket('wss://eurolive-frontend.playtechgaming.com/ws') ws.onmessage = (event) =>{ console.log(event.data) } ws.onerror = (erro)=>{ console.log(erro) }```
-
Hosting frontend and backend on two different Heroku domains
I made a full-stack web application with React and Express as part of my portfolio projects. I tried publishing it on Vercel and Heroku (tried Netlify also) but unfortunately, I learned that sending cookies between two different domains is not possible. The next thing I tried, is to host both on Heroku (e.g:
client.herokuapp.com
&server.herokuapp.com
) which, unfortunately, does not work also.What else do I need to do? I am still learning how to deploy properly so I might miss out on some workarounds. Advice is greatly appreciated.
-
There is an error 502 .How can i solve it .(Internal Server Error)
I use to load server code in
heroku
. Sometime I get data fromheroku
.But sometime give me an error in 502. I usenoSql
databaseMongoDB
-
How to add items from object in DOM with button click in javascript?
first time posting in here :)
I have recently started coding and for JS study practice, I wanted to make a button in my navbar that generates an object to DOM after clicking it. Can you please advise the steps regarding adding and appending items that I need to create inside addToDom function? I seem to mix up the process and after multiple failures have left the space blank.
P.S. Am I linking img correctly?
My current code so far:
const Kirstin = { firstName: 'Kirstin', lastName: 'Ortega', image: "img:resources/kirstin ortega.gif", alias: 'Police officer', getfullName: function(){ this.firstName + ' ' + this.lastName; }, addToDom: function(firstName, lastName, image, alias, getfullName,){ } } const bodyElement = document.querySelector("btn1"); bodyElement.addEventListener("click", function (){ addToDom(this.firstName, this.lastName, this.image, this.alias, this.getfullName); });
UPDATE I am trying to replicate the same structure in HTML file as follows:
<article class = "articleTakeshi"> <div class="cardTakeshi"> <img src="resources/takeshi kovacs.gif" alt="Avatar"> <div class="container"> <h2>Takeshi Kovacs</h2> <p>The Last Envoy</p> </div> </div> </article>
So basically my goal is to create a new article with the same structure as pictured above using Javascript.
-
LabVIEW: view every time a button is pressed
I’m trying to make a simple project to practice with LabVIEW: I’m creating a VI with a standard Button and a stop button. When the VI is running, I’ clicking the button many times and then, when I click on STOP, I would visualize on Front Panel a “List” (I’m using an array for this) which contain a timestamp for every button pression.
Is it possible? How can I do this? I’m trying to create an array with the “insert into array” element, but it doesn’t seem to work.. Thank you all guys!
-
Cannot resolve directory '~bootstrap'
I did npm install in terminal. I downloaded bootstrap. Currently, the codes I wrote over styles.css do not work.
@import "~bootstrap/dist/css/bootstrap.min.css"; @import "~font-awesome/css/font-awesome.min.css";
The errors I got after these codes:
npm audit fix --force
I tried this method but it didn't work
-
Javafx - change Theme (CSS) on active window
I want a Button that allows me to switch between Dark/Light-mode. But I have the problem If I switch, the active windows will not change their Style.
First of the Code snippets to easy recreate the problem. For Maven projects starter class:
package testapp; //This Class is Required in mavenproject to Start the Application public class GUIStarter { public static void main(final String[] args) { try{ TestApp.main(args); }catch (Exception e){ System.out.println("GUIStarter Errror:\n"+e); } } }
The primary Window class:
package testapp; //IMPORT //JAVAFX import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.stage.Stage; //title import javafx.scene.Scene; //IMPORT END public class TestApp extends Application { //stylepaths public static String mainLightModePath = ".\\style_lightmode.css"; public static String mainDarkModePath = ".\\style-Darkmode.css"; public static boolean isItDarkmode = true; public static void toggleMode(){ if(isItDarkmode){ isItDarkmode = false; }else if(!isItDarkmode){ isItDarkmode = true; } } //This is required to get the primary Stage in other Stages (Controllers) private static Stage pStage; public static Stage getPrimaryStage() { return pStage; } private void setPrimaryStage(Stage pStage) { TestApp.pStage = pStage; } public void setPrimaryWindow(Stage primaryStage){ try{ FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("Mainframe.fxml")); Parent root = (Parent) fxmlLoader.load(); Scene scene = new Scene(root); primaryStage.setTitle("TestApp"); //scene.setMoveControl(titleBar); primaryStage.setScene(scene); primaryStage.show(); } catch (Exception e){ e.printStackTrace(); } } //Start of Application @Override public void start(Stage primaryStage) { setPrimaryStage(primaryStage); pStage = primaryStage; setPrimaryWindow(primaryStage); } public static void main(String[] args) { launch(args); } }
The maincontroller Class:
package testapp; //IMPORT //JAVAFX import javafx.fxml.FXML; import javafx.fxml.FXMLLoader; import javafx.stage.Stage; import javafx.scene.Node; import javafx.event.ActionEvent; import javafx.scene.layout.BorderPane; //Countdown import javafx.animation.Timeline; public class Mainframe { public static Timeline time; @FXML public void options(ActionEvent event){ try{ TestApp.toggleMode(); Stage stage = (Stage) ((Node)event.getSource()).getScene().getWindow(); Stage changer = TestApp.getPrimaryStage(); stage.close(); changer.hide(); //My idea was to initialize again and load the styles in that way again but does not change anything FXMLLoader loader = new FXMLLoader(getClass().getResource("Mainframe.fxml")); loader.load(); Mainframe ctrl = loader.getController(); ctrl.initialize(); changer.show(); }catch (Exception e) { System.out.println("Error bei der App Klicken von ModeButton. \n error is: "+e); e.printStackTrace(); } } @FXML public BorderPane primaryparent; //get and set for elements @FXML void initialize() { //Check Theme if(TestApp.isItDarkmode){ primaryparent.getStylesheets().clear(); primaryparent.getStylesheets().add(getClass().getResource(TestApp.mainDarkModePath).toString()); }else if(!TestApp.isItDarkmode){ primaryparent.getStylesheets().clear(); primaryparent.getStylesheets().add(getClass().getResource(TestApp.mainLightModePath).toString()); } } }
Mainframe.fxml
:<?xml version="1.0" encoding="UTF-8"?> <?import javafx.geometry.Insets?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.AnchorPane?> <?import javafx.scene.layout.BorderPane?> <?import javafx.scene.text.Font?> <BorderPane fx:id="primaryparent" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="0.0" minWidth="0.0" prefHeight="224.0" prefWidth="515.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="testapp.Mainframe"> <center> <AnchorPane prefHeight="200.0" prefWidth="200.0" styleClass="rootBackground" BorderPane.alignment="CENTER"> <children> <Button fx:id="setDarkModeButton" layoutX="175.0" layoutY="99.0" mnemonicParsing="false" onAction="#options" styleClass="settingsButton" text="toggle Dark/LightMode"> <font> <Font name="Arial" size="13.0" /> </font> <padding> <Insets bottom="5.0" left="17.0" right="17.0" top="5.0" /> </padding> </Button> </children> </AnchorPane> </center> </BorderPane>
Before I just
overwrote
the "style.css" file and used.stop()
&.show()
. This worked fine. But it can get complicated the morecss-files
you have and after it is packed into a.jar
file it doesn't work anymore.I hope anyone can help me. Because now I have really no Idea...