Background: At time of writing, Fomantic-UI is the live-development fork of Semantic-UI which will one day be rolled into Semantic-UI and is for the mean time the de facto supported genus of Semantic-UI.
Issue: The tabbed metaphor is well understood and in some use cases includes the ability to close a tab via an X icon - think of multi-document editors such as VS Code, etc. Fomantic-UI has a good tab component but no automatic means of including a close icon, and good button and icon components with many options. It also offers the ability to combine components - with much power great responsibility comes - and I find that sometimes a little pointer would be useful. Therefore I provide this snippet to suggest some potential solutions.
Something like this is the target...
See my answer below.
The snippet below illustrates my answer. For me the tertiary button & icon combination are the best option. Although the height of the tab is affected by inclusion of the buttons and will need to be worked on.
As a bonus the JS in the snippet shows how to close a tab on click of the close icon.
Note: This snippet is using the the 'dist' versions of FUI. Since FUI changes often, the snippet may fail if there have been breaking changes by the time you see it. At time of writing the official release on jsdelivr cdn is 2.8.3. (#17-Jan-2020).
$('.menu .item')
.tab();
$('.tabCloser').on('click', function() {
// get the parent of the icon, meaning the anchor.
var parent = $(this).parent();
// get the tab name from the anchor.
var tabName = parent.data('tab');
// erase elements with the matching tab name
$('[data-tab=' + tabName + ']').remove();
// Click the first remaining tab if any.
if ($('a.item').length > 0){
$('a.item').first().trigger('click');
}
})
.daContent {
margin: 2em;
}
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body>
<div class='daContent'>
<p>
The tabs below illustrate 3 options:
<ul>
<li>First uses a button of class <i>ui basic icon button</i></li>
<li>Second is a simple icon with class <i>close icon</i></li>
<li>Third uses a button with class <i>ui tertiary icon button</i></li>
</ul>
None require additional JavaScript or CSS.
</p>
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">First
<button class="ui basic icon button tabCloser">
<i class="close icon"></i>
</button>
</a>
<a class="item" data-tab="second">Second <i class="close icon tabCloser"></i></a>
<a class="item" data-tab="third">Third
<button class="ui tertiary icon button tabCloser">
<i class="close icon"></i>
</button>
</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">
Ideally there should be no border around the button, and for mouse users a mouse-over UI change without reverting to additional code.
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Better - no border, but also no mouse-over UI effect. And the icon cramps the tab text too much. We could fix both with custom CSS / JS but the aim is for no additional code.
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Best - no border, plus a mouser effect.
</div>
</div>
</body>
Related
I am new to Semantic-UI and am having trouble with getting any modules to work; other Semantic-UI elements seem to be working (e.g. button animations). But for some reason none of the modules seem to be functioning properly. Specifically I have been try to set up tabs on a page, the tabs are clickable, but all the content of ALL the tabs is being displayed below when it should be hidden (except for the clicked tab ofcourse). I'm running Semantic UI with node js v10.1.0 and jquery 3.1.1., editing and opening with Visual Studio Code. I have followed the set up of Semantic as per their website.
I have tried different modules (e.g. accordion, dropdown) but none of the others seem to function properly either. I'm just trying to run the code from the website to no avail. I have tried reinstalling semantic ui, which did not seem to fix it. (I do note that whenever I have installed semantic ui there always appear to be warnings about deprecated packages/files but everything still installs).
HTML:
<div class="ui top attached tabular menu">
<a class="item active" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Second
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Third
</div>
JS:
$('.menu .item').tab();
None of the tabs function as tabs. All content is displayed that should be hidden by tabs.
I have solved the issue. It appears the css files from the saved semantic-ui files were not being detected through my href statements; it was fixed by changing the href tags linking to the files to instead link to the cloudflare links.
How to use Image overlay in ReactJS? I am making a movie site.
Here is the link : Project
I want to use overlay effect when the user hovers over the image.
When the user hovers over the image I want to show tagline with the overlay effect on the image.
Here is the link I tried : reference
But, it's not working in React.
Here is the code :
In image tag i want to add overlay effect.
<div className="main-description" >
<img src={"https://image.tmdb.org/t/p/w500"+res.poster_path}
className="result- image"/>
<b className="result-titles" >{res.original_title}</b>
<div className="extra-description">
<div className="rating_time_score_container">
<div className="sub-title Rating-data"><b>
Imdb
<span className="details" > {res.vote_average}/10 </span></b></div>
<div className="time-data">
<b><span className="time">
<i className="fa fa-clock-o"></i> </span> <span className="details">
{res.time_str}</span>
</b>
</div>
</div>
</div>
I don't think this has to do with CSS, It would of been nice to have a link to your github but i\I tracked down your code (since its open source) and I took and look. I suggest using a package like this one: https://github.com/ethanselzer/react-hover-observer
or even bootstraps classic react package like this one:
https://react-bootstrap.github.io/components/overlays/
Then what you can do is update the state of your application and add the overlay that way. Hope that helped and good luck with your project
I am using a simple implementation of a button on a simple MDL website with material design lite. When i click the button, areas of the UI go grey until the browser repaints that area.
<button onclick="ZoomWindow();" class="mdl-button mdl-js-button mdl-button--icon" id="ZoomWindow" style="vertical-align:top;">
<!-- Zoom Window -->
<i class="material-icons md-light">loupe</i>
</button>
<div class="mdl-tooltip mdl-tooltip--right" for="ZoomWindow">
Zoom window
</div>
It doesnt happen with all buttons set up this way, leading us to believe it could be some kind of timing issue.
I have narrowed the problem down to the tooltip, as when it is removed, the problem no longer occurs.
Is there a way to force the entire DOM to redraw, or a fix for the issue we are seeing?
We managed to track this problem down to the tooltips, and we made a simple modification to fix it. We simply created something a little like this to hide and show the tooltip on mouse down and mouse up:
<script>
function hideTooltips(){
$(".mdl-tooltip").css('display','none');
}
function unhideTooltips(){
$(".mdl-tooltip").css('display','inline');
}
</script>
<button onmousedown="hideTooltips();" onmouseup="unhideTooltips();ZoomWindow();" class="mdl-button mdl-js-button mdl-button--icon" id="ZoomWindow" style="vertical-align:top;">
<!-- Zoom Window -->
<i class="material-icons md-light">loupe</i>
</button>
<div class="mdl-tooltip mdl-tooltip--right" for="ZoomWindow">
Zoom window
</div>
This solved the issue for us
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump. Additionally, the right button loses the rounded edges. How can I prevent this from happening?
<div class="btn-group">
<a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
<a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash"> </i></a>
</div>
Javascript:
$('[rel=tooltip]').tooltip();
Working version...
http://jsfiddle.net/BA4zM/147/
Here is a website that has it working without the jumping...
http://wrapbootstrap.com/preview/WB005S479
To avoid the jump, you need to set the container attribute. This is documented.
When using tooltips and popovers with the Bootstrap input groups,
you'll have to set the container option to avoid
unwanted side effects.
Try the following:
$('[rel=tooltip]').tooltip({container: 'body'});
As Howie said at https://stackoverflow.com/a/14770263/7598367, it's necesary to add the 'container' to tooltip.
That didn't solve my issue (I had the same problem), it's also necesary to declare at JS file BEFORE the .tooltip() initilization, this way:
$('[data-toggle=tooltip]').tooltip({container: 'body'});
$('[data-toggle="tooltip"]').tooltip();
Hope this helps if somebody has the same problem in the future.