hover popup overlapping table fields with large text react - javascript

I am working on a react app where I have a table and one of my column has really large text value ,so in order to show that value I am using a hover popup to show the full text on hovering over the column value but when I hover over it,it overlaps the other columns as it show the whole text in 1 straight line.
Here's the table row and truncate function:
truncate = (str, n) => (str.length > n ? `${str.substr(0, n - 1)}...` : str);
<Table.Cell data-title={message.job_data}>
{this.truncate(message.job_data,50)}
</Table.Cell>
Here's the css of data-title:
[data-title] {
font-size: 14px;
position: relative;
cursor: help;
}
[data-title]:hover::before {
content: attr(data-title);
opacity: 1;
position: absolute;
margin-top:33px;
padding: 10px;
background: #000;
color: #fff;
font-size: 14px;
width:300px;
white-space: wrap;
z-index: 9;
}
[data-title]:hover::after {
content: '';
position: absolute;
opacity: 1;
bottom: -12px;
left: 8px;
border: 8px solid transparent;
border-bottom: 8px solid #000;
}
I want to show the column text in multiple lines and not a straight line overlapping all the other columns.
Attaching a screenshot of my error:
As you can see in the message column,the text is very long and it is showing it horizontally overlapping all the columns.
Thanks

As the text you try to break doesn't have any white-space in it, only way I can think of doing this in CSS is by word-break: break-word;
[data-title]:hover::before {
content: attr(data-title);
opacity: 1;
position: absolute;
margin-top:33px;
padding: 10px;
background: #000;
color: #fff;
font-size: 14px;
width:300px;
word-break: break-word;
z-index:9;
}

Related

Issue with sticky nav bar not showing all dropdown options once page is scrolled downwards

I have implemented a navigation bar within the site that I am trying to create, however, the only time all the dropdown options of the nav bar appear is when it's at the top of the page. Once I scroll down the page, the options become hidden behind one another. (If you look at the Profile button in particular, you can see a button behind the other due to the :hover being a different color.)
I've messed around a bit in the CSS with overflow and positioning. Making overflow show vs overflow hidden. I've removed the nav bar from the header to see if that was an issue, as well as remove the header from the HTML all together to see if there was an issue there.
p {
padding: 13px;
text-align: justify;
}
.nav {
position: fixed;
width: 100%;
top: 0;
}
.nav a {
position: fixed;
background-color: #333;
z-index: 9999;
overflow: show;
}
.nav a.home-btn {
position: relative;
}
.nav a.logout-btn {
position: relative;
}
#head1 {
text-align: center;
background-color: black;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 30px;
padding: 10px 14px;
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
list-style: none;
text-decoration: none;
z-index: 9999;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: sans-serif;
z-index: 9999;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.profile-dropdown {
float: left;
overflow: hidden;
}
.profile-dropdown .profile-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.profile-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.profile-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.profile-content a:hover {
background-color: gray;
}
.profile-dropdown:hover .profile-content {
display: block;
}
.search-dropdown {
float: left;
overflow: hidden;
}
.search-dropdown .search-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.search-btn:hover,
.profile-btn:hover,
.home-btn:hover,
.logout-btn:hover {
background-color: #2ecc71;
}
.navbar a.logout-btn {
float: right;
}
.search-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.search-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.search-content a:hover {
background-color: gray;
}
.search-dropdown:hover .search-content {
display: block;
}
.listings-dropdown {
float: left;
overflow: hidden;
}
.listings-dropdown .listings-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.listings-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.listings-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.listings-content a:hover {
background-color: gray;
}
.listings-dropdown:hover .listings-content {
display: block;
}
.listings-btn:hover {
background-color: #2ecc71;
}
.messages-dropdown {
float: left;
overflow: hidden;
}
.messages-dropdown .messages-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.messages-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.messages-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.messages-content a:hover {
background-color: gray;
}
.messages-dropdown:hover .messages-content {
display: block;
}
.messages-btn:hover {
background-color: #2ecc71;
}
.settings-dropdown {
float: left;
overflow: hidden;
}
.settings-dropdown .settings-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.settings-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.settings-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.settings-content a:hover {
background-color: gray;
}
.settings-dropdown:hover .settings-content {
display: block;
}
.settings-btn:hover {
background-color: #2ecc71;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
<html>
<link rel="stylesheet" href="../css/searchLost.css" />
<link rel="stylesheet" href="https://cdnjs.cloudfare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<body>
<div class="header">
<h1 id="head1">Lost And Found</h1>
</div>
<div class="navbar">
Home
<div class="profile-dropdown">
<button class="profile-btn">Profile<i class="fa fa-caret-down"></i></button>
<div class="profile-content">
Your Listings
Update Info
</div>
</div>
<div class="search-dropdown">
<button class="search-btn">Search<i class="fa fa-caret-down"></i></button>
<div class="search-content">
Search Lost
Search Found
</div>
</div>
<div class="listings-dropdown">
<button class="listings-btn">Listings<i class="fa fa-caret-down"></i></button>
<div class="listings-content">
Report Lost
Report Found
</div>
</div>
<div class="messages-dropdown">
<button class="messages-btn">Messages<i class="fa fa-caret-down"></i></button>
<div class="messages-content">
New
Sent
Deleted
</div>
</div>
<div class="settings-dropdown">
<button class="settings-btn">Settings<i class="fa fa-caret-down"></i></button>
<div class="settings-content">
Change Password
</div>
</div>
Logout
</div>
<script type="text/javascript">
var nav = document.getElementsByClassName('navbar');
window.onscroll = function sticky() {
if (window.pageYOffset > nav[0].offsetTop) {
nav[0].classList.add('nav');
} else {
nav[0].classList.remove('nav');
}
};
</script>
<p>
Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the
page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out
the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page.
</p>
</body>
</html>
What I want to happen is for the nav bar to show all drop down options regardless of the positioning of the nav bar, whether it be on top of the page scrolled all the way to the top, or on the top when scrolled down.
You are using a different css class for each of your drop downs, this will be challenging for you to work with and challenging for others to help you with. I fixed the Profile dropdown, the rest is up to you. Take it as a learning opportunity. You should use the same css class for all of the dropdowns, there isn't anything different enough about any of them to warrant having a class to just a given dropdown.
Also, next time you submit your code, us a jsfiddle
https://jsfiddle.net/3qwy26rp/22/
.profile-content {
display: none;
position: fixed;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.profile-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
}
In dropdown memu need to use position:fixed and in the <a> tag need to use position:relative here is the jsfiddle link https://jsfiddle.net/0scmow82/16/. Hope this will be helpful for you

Displaying a partial line of text

How can I display the bottom half of a line of text in a text area or label? In my CSS, I have this
.label {
font-size: 13px;
height: 7px;
width: 200px;
display: inline-block;
overflow:hidden;
}
<label class="label">TEST CODE</label>
What this does is display the top half of the label as if the line was cutoff. For example, the letter O would be displayed as a semicircle arc similar to an n. I have a need for this type of display and it works for me.
What I need to do is display just the bottom part of the line so a semicircle arc on the letter O would look something like a u. I can't use a mask because I'm displaying an image beneath the label so it has to have a transparent background. I tried padding-bottom but that didn't help. Any suggestions would be appreciated.
From my understanding, you are trying to crop the top half of the text horizontally rather than cutting off the bottom half.
To do this, you need to include an overflow: hidden value if you wish to 'crop' elements. In addition, you will want to set the line-height value for text elements to 0px. The bottom padding will then push the content above the original top position.
.crop-top {
overflow: hidden;
font-size: 13px;
line-height: 0px;
height: 7px;
width: 200px;
padding-bottom: 7px;
display: inline-block;
}
<label class="crop-top">THIS TEXT IS CROPPED</label>
You can wrap the inner content in <span> and then using the transform css property you can achieve this
Stack Snippet
body {
background: black;
color: white;
margin: 0;
}
div {
margin-bottom: 30px;
}
.upper,
.bottom {
font-size: 50px;
line-height: 50px;
height: 25px;
display: block;
overflow: hidden;
vertical-align: top;
color: red;
}
.bottom {
transform: rotateX(180deg);
margin-top: 10px;
color: yellow;
}
label span {
line-height: 50px;
display: block;
}
.bottom span {
transform: rotateX(180deg);
}
<div>
<label class="upper"><span>HELLO</span></label>
<label class="bottom"><span>HELLO</span></label>
</div>
<div>
<label class="upper"><span>WELCOME</span></label>
<label class="bottom"><span>WELCOME</span></label>
</div>

fixed header jumps after scrolling down the page

I have found a few questions similar to this, but were unable to help me.
When I scroll down the page the header/navigation bar doesn't move "smoothly" with the page. After I reach a certain amount down the page, the header "jumps", but after that it's fine.
I have the following code for a fixed header:
$(window).scroll(function(){
if ($(window).scrollTop() >= 147) {
$("#top_nav").addClass("fixed");
$("#top_nav").css("position", "fixed");
$("#top_rule").hide();
$("#bottom_rule").hide();
}
else {
$("#top_nav").removeClass("fixed");
$("#top_nav").css("position", "initial");
$("#top_rule").show();
$("#bottom_rule").show();
}
});
My CSS:
.fixed {
width: 100%;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0px;
padding-top: 15px;
padding: 10px;
}
I don't have a position: fixed in my CSS, because for some reason it isn't working, so instead I used jQuery to set the position to fixed.
I have posted the rest of my page on jsfiddle.net
http://jsfiddle.net/5n4pF/
If I did not explain propelry, please ask and I'll try and explain better :)
Thanks in advance
EDIT
When I reach 147px, it must not jump. It looks as if it "hides and shows". Instead it must move smoothly as you scroll down the page.
You should position your header absolute. and give the news a margin-top the size of the header.
The reason why your position: fixed wasn't working is because you fixed it inside of a relative element. It get's fixed inside of that element (which isn't what you want, because you want it fixed on top of the page).
It jumps because of the fact that you change the element from static to fixed. All of a sudden you miss about 53 pixels of height in your layout . Which makes it jump.
In this fiddle: http://jsfiddle.net/5n4pF/3/
* {
margin: 0px;
padding: 0px;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
#black_top {
background: black;
font-size: 5px;
display:block;
width: 100%;
height: 5px;
}
#logo_header {
margin-top: 20px;
}
.list_item {
list-style-type: none;
display: inline-block;
font: 16px Arial;
padding: 10px 30px 10px 30px;
text-align: center;
}
#top_nav {
font: Arial 30px;
display: block;
width: 100%;
}
.nav_links {
text-decoration: none;
color: black;
}
hr {
margin-right: 30px;
margin-left: 30px;
color: #f00;
opacity: 0.3;
}
.nav_bullets {
color: #D6D6D6;
}
::-moz-selection {
background: #93E6E5;
}
::selection {
background: #b3d4fc;
}
#news_block {
/*Chrome & Safari*/
-webkit-column-count: 3;
-webkit-column-gap: 40px;
/*Firefox*/
-moz-column-count:3;
-moz-column-gap: 40px;
margin: 20px;
position: absolute;
top: 249px;
width: 100%;
box-sizing: border-box;
}
#search_field {
font-size: 25px;
}
.fixed {
width: 100%;
box-sizing: border-box;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0;
position: fixed;
padding-top: 15px;
padding: 10px;
}
the correct code is given. It's still a bit buggy with widths of something. But the code in general is not very tidy. So I'll leave that part to you. Hope this works for you.
I was working on it today, and I found the solution.
Change the CSS from
.fixed-header .main-header {
display: none;
}
to
.fixed-header .main-header {
display: inline;
}

Line Displacement with fadein

I'm kind of stuck on creating a fadeIn of strings. What I want to do is have a bar appear next to a string when the user hovers over it. Like this:
| string
But the thing is, when the | appears, there is a displacement of the string to the right, how would I go about fixing this problem? This is my current CSS and Java code.
.details{
font-size: 2.1em;
font-weight: bold;
line-height: 5em;
/*display:none;*/
}
.line{
border-style:solid;
border-left: double-thick;
border-color: #336699;
display: none;
margin-right: .4em;
}
JS:
$(document).ready(function(){
$('.details').mouseenter(function(){
$('.line').remove();
$(this).prepend('<a class="line"></a>');
$('.line').fadeIn(250);
});
$('.details').mouseleave(function(){
$('.line').fadeOut(250);
});
});
Assuming each row (parent element of .line and .details) is relative-positioned, try this
.details{
font-size: 2.1em;
font-weight: bold;
line-height: 5em;
position: relative;
left: 10px; /*play with this*/
/*display:none;*/
}
.line{
border-style:solid;
border-left: double-thick;
border-color: #336699;
position: absolute; /* */
left: 0px; /* */
display: none;
margin-right: .4em;
}
This will push the details element 10px or however much space is needed while preventing the line element from pushing the details
Done without any JavaScript, can you believe it?
Fiddle
p::before {
content: '|';
position: absolute;
margin-left: -5px;
opacity: 0;
transition: opacity 250ms;
}
p:hover::before {
opacity: 1;
}
Ahhh, the power of CSS3

Sliding vertical menu : prevent the title from moving left on hover

I'm trying to fix an issue with a sliding vertical menu where the menu header moves right when I'm over it.
You can see it yourself here when going over portfolio.
This is the CSS I'm currently using :
#menu {
position: absolute;
top: 60px;
right: 20px;
height: 80%;
color: #ffffff;
cursor: default;
letter-spacing:8px;
}
#menu li {
list-style: none;
cursor: pointer;
letter-spacing:1px;
}
#menu-portfolio {
float: left;
border-right: 2px solid;
padding-right: 0.3em;
font-size: 95%;
}
.menu-gallery-selector {
font-size: 85%;
text-align:left;
margin:5%;
}
.menu-gallery-selector:nth-of-type(1) {
margin-top:15%;
}
#menu-contact {
float: left;
letter-spacing:1px;
padding-left: 0.4em;
font-size: 95%;
}
And this is the javascript :
$("#menu-portfolio").bind("mouseover", expand);
$("#menu-portfolio").bind("mouseout",collapse);
$(".menu-gallery-selector").hide();
function collapse() {
$(".menu-gallery-selector").hide();
}
function expand() {
$(".menu-gallery-selector").show();
}
simple fix
#menu-portfolio {
text-align:right;
}
When I test this the "Portfolio" text moves left not right. The reason the "Portfolio" text moves is because the text of the widest list item "Automotive" expands the width of the <ul> tag which contains the "Portfolio" text. You need to put text-align: right; on the Portfolio text.
You can fix it by adding text-align: right; to the
#menu-portfolio {
float: left;
border-right: 2px solid #000;
padding-right: 0.3em;
font-size: 95%;
text-align: right;
}
Should do the work

Categories