Displaying React component on same line as other elements - javascript

I'm trying to get a React component I've built to display on the same line as the rest of the text, but it keeps appearing on a different line than the rest of the elements.
Here's my React code:
<div className={styles['top']}>
<span>WHAT PEOPLE ARE SAYING</span>
<div className={`pull-right ${styles['right']}`}>
<span className={`${styles['rating-words']}`}>{ratingWords}</span>
<Rating className={`${styles['overall-stars']}`}
percentage={this.state.overallPercentage}
color={"#00c18a"}
under={"white"}
/>
</div>
</div>
and the .scss:
.top {
margin: 30px 0;
font-weight: bold;
.right {
display: inline-block;
flex-direction: row;
}
.rating-words {
text-transform: uppercase;
}
}
and finally, a picture of what it looks like:
Both "VERY GOOD" and the rating stars should be on the same line. Any idea how to fix this?

If you have two child elements inside of .top this should work.
fiddle
.top {
margin: 30px 0;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: space-between;
.rating-words {
text-transform: uppercase;
}
.right {
}
}

I ended up getting it to work with the following based on what #Chad said though what #torkjels said ended up working better in another place.
.top {
margin-top: 40px;
margin-bottom: 30px;
font-weight: bold;
.right {
display: inline-flex;
flex-direction: row;
}
.rating-words {
text-transform: uppercase;
margin-right: 10px;
}
.overall-stars {
margin-top: -2px;
}
}

If you post a working jsfiddle or codepen it would be easier to help.
Try giving your overall-stars class display: inline-block. I assume it's already a block element, which makes it appear on a new line.

const top = {
// Other styles
display: 'flex',
flexDirection: 'row',
}
Might help.

Related

List GitHub Repositories or Gists of a User in Webpage using HTML and JavaScript

I tried to find an answer to this question for a long time, and I did find some but none of them worked with the current version of GitHub API. It took me some time to figure it out myself, but I did and I am verry happy with the result that I achieved. So, I thought I should share it here for someone who might also be finding an answer to this. So, read my answer below.
First, You can have a glimpse of what the final result is like by clicking here for Repositories and here for Gists.
Click here to view the repository that has the JavaScript file. There, you will find all the details on how to use it.
If you liked my implementation of this in my GitHub Page website, its source code is here
In short, here is how to list all GitHub Repositories of a User (Mine in this Example):
listrepos("HiDe-Techno-Tips", document.getElementById("pin")).then(reposcount => {
// In this section, variable reposcount stores the total number of Repositories.
});
svg {
display: inline-block;
vertical-align: middle;
padding-bottom: 3px;
}
a {
text-decoration: none;
}
.box {
border: 2px solid black;
padding: 25px;
margin: 20px;
}
.box div {
margin: 5px;
}
.box p {
color: black;
}
.controls {
display: flex;
}
.horizontalspace {
flex-grow: 1;
}
.stats {
display: inline-flex;
align-items: center;
}
.buttons * {
margin-left: 5px;
}
.stats *:not(svg) {
margin-right: 5px;
}
ol {
margin: 0px;
padding: 0px;
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script src="https://gitlist.himdek.com/GitHubList.js"></script>
</head>
<body>
<div id="pin"></div>
</body>
</html>

How to keep all the elements within container using flexbox?

I'm trying to get all the letters displayed within container evenly spaced out using flexbox. Right now, if I enter sentence like "I like learning code", all elements are displayed within container and works ok, but if I use long word like "refrigerator", letters comes out of container. But I'm trying to keep all the letters to stay within container no matter how long the word is. I tried all the available flexbox techniques, but no luck. Tried max-width on container too. What am I missing? Here is the code in code sandbox: https://codesandbox.io/s/modern-sun-3u7b3?file=/src/App.js
import React from "react";
import "./styles.css";
function App() {
// let sentence = "I like learning code";
let sentence = "refrigerator";
const words = sentence.split(" ");
return (
<div className="pageContainer">
{words.map((word, i) => (
<div className="row" key={i}>
{[...word].map((letter) => (
<p className="letterBorder">{letter}</p>
))}
{i === words.length - 1 ? null : <p className="whiteSpaceBorder"></p>}
</div>
))}
</div>
);
}
export default App;
.letterBorder {
border: 25px;
background: grey;
padding: 20px;
width: 50px;
height: 30px;
flex-grow: 1;
margin-right: 4px;
margin-left: 4px;
}
.row {
display: flex;
justify-content: space-evenly;
min-width: 100%;
align-content: flex-start;
}
.whiteSpaceBorder {
border: 25px;
background: orange;
padding: 20px;
width: 50px;
height: 30px;
flex-grow: 1;
margin-right: 4px;
margin-left: 4px;
}
.pageContainer {
border-radius: 1rem;
text-align: center;
background: lightcyan;
height: 40rem;
width: 30rem;
margin: auto;
}
Your error is due to the hardcoded horizontal padding of your letterBorder class.
Replace
padding: 20px;
with
padding: 20px 0;
https://codesandbox.io/s/gracious-violet-qg1xt?file=/src/App.js
This is where the css property flex-wrap comes in handy. Flexbox items all try to fit into one line by default. However, you can make them wrap using flex-wrap: wrap.
Add it to your row class:
.row {
display: flex;
flex-wrap: wrap; /* Allow items in row to "wrap" to next line if needed */
justify-content: space-evenly;
min-width: 100%;
align-content: flex-start;
}
See this css-tricks page for a better visual explanation.

centering images by HTML / JS

I'm trying to center an image on Qualtrics. I tried a lot of codes I found, but nothing works.
Examples of what I already tried:
<style>
.img-container {
text-align: center;
display: block;
}
</style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
<style>
.ChoiceStructure {
text-align: center;
}
</style>
The preference is to use HTML or JavaScript rather than CSS because the center is for a specific question.
In the question, the URL of the images appears in LOOP & MERGE so I do not have the specific name of the image to write in the code.
Any suggestions?
Thanks a lot!
The simplified example below uses flex and justify-content.
In your case, it's not div but .img-container that you probably need to use for the container.
The span style rule is just a simple example and you don't need that at all.
div {
display: flex;
justify-content: center;
}
span {
background-color: aqua;
width: 300px;
height: 300px;
}
<div>
<span></span>
</div>
So, in your case it should be:
.img-container {
display: flex;
justify-content: center;
}

Why isn't the hover working on child but parent?

I want some action to be performed when the child element .menuitems is hovered. Currently I've replaced the action with an alert to make it simple.
Now the problem is that when I use selector ("#result_row .menuitems"), nothing works. But if I use ("#result_row"), it works fine i.e., alert works.
Why is it so? It should work in both cases? I want the hover to work on child as well as grandchilds (.menu1).
Here's my code:
HTML
<div id="result_row"><div class="menuitems">
<div class="menu1">sfsdsf<span id="srno">4</span></div>
<div class="menu2">sfsdfs#saf</div>
<div class="menu3">sdfsdf<span id="cross">X</span></div>
<div class="clear"></div>
</div>
</div>
CSS
.menuitems{
margin-bottom: 5px;
background: #007fad;
}
.resultmenu > .menuitems{
background: #004068;
}
.menuitems div{
background: #00aeef;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
position: relative;
}
.menu1{
float: left;
width: 25%;
margin-right: 2px;
}
.menu2{
float: left;
width: 40.4%;
}
.menu3{
float: right;
width: 34%;
}
.clear{
clear: both;
padding: 0 !important;
}
JavaScript
$(document).ready(function(){
$("#result_row .menuitems").hover(function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
NOTE: This code won't render fine as it is missing many other styles, parent elements etc. So I've put a screenshot to describe the problem.
Red rectangle is .result_row. Green is child, .menuitems.
EDIT:
If you want to know something else, here it is: when I use .menuitems:hover in CSS (not jQuery), the hover works.
EDIT2:
One more thing that can be important to you while answering is: The window "EMAIL" you're seing in this image is no loaded when open the main page(site). It is loaded only when I click a button on the page, and the content you're seeing in 2nd and 3rd row are loaded ALONG WITH IT, i.e., they're not static!
I entered everything you had into jsfiddle and it worked (hit F12 to see console.log)
https://jsfiddle.net/bLjmocza/
I also replaced
$("#result_row .menuitems").hover(function(){
with
$(".menuitems").hover(function(){
as that seemed to be more what you were trying to achieve in the first place
use this code:
$(document).ready(function(){
$("#result_row .menuitems").mouseover(function(){
alert("Hello");
});
});
Your problem is float in your CSS. See: http://wtfhtmlcss.com/#floats-computed-height.
The quick and diry fix ist to float the parent. But you are better off applying a clearfix to the parent. The added bonus is you can then get rid of your clear div.
Below is clearfix option:
$(document).ready(function(){
$("#result_row .menuitems").hover(function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
.menuitems{
margin-bottom: 5px;
background: #007fad;
}
.resultmenu > .menuitems{
background: #004068;
}
.menuitems div{
background: #00aeef;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
position: relative;
}
.menu1{
float: left;
width: 25%;
margin-right: 2px;
}
.menu2{
float: left;
width: 40.4%;
}
.menu3{
float: right;
width: 34%;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result_row"><div class="menuitems clearfix">
<div class="menu1">sfsdsf<span id="srno">4</span></div>
<div class="menu2">sfsdfs#saf</div>
<div class="menu3">sdfsdf<span id="cross">X</span></div>
</div>
</div>
Updated: This won't work in jQuery 1.9 onwards!
http://api.jquery.com/on/#additional-notes. Use mouseenter/mouseleave instead
A second anser as this one addresses binding handlers to dynamic elements
As you are dynamically adding elements to the page you want to use jquery's on method
Change gour jquery to
$(document).ready(function(){
$("#result_row").on(".menuitems", "hover", function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
The main difference is this will attatch the hover event handler any child of resultrow with a class of menuitems that exist now or that are added later.

Vertical align text dynamically

Title of of the album is dynamically generated from admin panel.
So the problem is when titles are not the same length.
They are used for navigating (prev and next) below actual album...
Code:
<div class="album-box">
<div class="prev-album pull-left">
Dynamically generated title
</div>
<div class="next-album pull-right">
<a href="">Dynamically generated title in
Dynamically generated title 3
Dynamically generated title rows</a>
</div>
</div>
Live:
jsfiddle
Not sure how can I position it to be in the middle vertically no matter how long the title is.
Any idea?
Thanks.
EDIT:
I would like to move elements on the left and right border.
Image:
You got plenty of good answers.
Here's one more using display:table
Non-flexbox Demo
.prev-album, .next-album {
font-size: 12pt;
padding: 20px 0;
color: red;
display: table;
}
.album-box a{
display: table-cell;
vertical-align: middle;
}
Use flex: https://jsfiddle.net/58eh0r2g/1/
Add the following code to the parent containers.
display: flex;
align-items: center;
justify-content: center;
In your case these would be .prev-album and .next-album
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
This solution will lose support for some IE versions, but flex is so powerful it's worth using it.
If you are wanting to grasp a new and awesome css...thing, then I would use flexbox. Flexbox has a property called align-items that will vertically align flex items (children).
Read here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Browser support is growing, but mobile and IE10 will need -ms- or -webkit- prefix.
Give the next-album and prev-album display: table;
Then add display: table-cell; vertical-align: middle; to the anchor tags inside of those divs.
I also updated your jsfiddle to show my answer.
https://jsfiddle.net/58eh0r2g/7/
You can set css display attribute of the album-box class to table, and child to table-cell, then you can use vertical-align: middle;
Or you could try display flex, but it's not supported by some browsers.
Here's a solution different from the ones posted so far:
jsFiddle Demo
Using a combination of transform and top/left with absolute positioning on the a tags (absolute relative to parent):
.prev-album, .next-album {
font-size: 12pt;
padding: 20px 0;
color: red;
// added this
position: relative;
}
// and these
.prev-album a, .next-album a {
padding: 10px 40px;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Since you want to align the text dynamically in the center of vertical axis, try using the follows:
HTML:
Content here
CSS:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
I have modified your code s per above in this plunk : http://plnkr.co/edit/PdK9YWGUvbuGAW7S00x9?p=preview
This has been asked in various forms all over Stack Overflow but here you go, Simply add this to your CSS:
.prev-album a, .next-album a {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Then change display: inline-block to display: table on both .prev-album and .next-album.
Simple update of your existing code on JSFiddle
Several improvements to your existing code on JSFiddle
You could even opt to use flex box method however older browsers will not support it, especially internet explorer. You can view the browser support for Flex Box on caniuse.com.
You could simplify your CSS by sharing properties as it will reduce code and be easier to manage:
.album-box, .prev-album, .next-album {
border-color: green;
border-style: solid;
border-width: 0;
}
.album-box {
display: block;
width: 100%;
float: left;
border-bottom-width: 2px;
}
.prev-album, .next-album {
font-size: 12pt;
height: 82px;
display: table;
padding: 10px 40px;
width: 50%;
text-align: center;
}
.prev-album {
border-right-width: 1px;
}
.next-album {
border-left-width: 1px;
}
.prev-album a, .next-album a {
display: table-cell;
vertical-align: middle;
}

Categories