semantic-ui

I am looking for semantic-ui the correct class to hide for example a DIV in mobile view. In Bootstrap its easy there we have "visible-xs" and "hidden-xs". But on semantic ui I only found "mobile only grid" Please visit here just add to your override css file /* Mobile */ @media only screen and (max-width: 767px) { [class*="mobile hidden"], [class*="tablet only"]:not(.mobile), [class*="computer only"]:not(.mobile), [class*="large monitor only"]:not(.mobile), [class*="widescreen monitor only"]:not(.mobile), [class*="or lower hidden"] { display: none !important; } } etc... https://jsfiddle.net

Im using Semantic UI React and React Router. The NavLink componenet from React Router knows then its the active page link and can set an active class: <NavLink to="/" exact activeClassName="active">Home</NavLink> However this doesn't work with Semantic UI React: <Menu.Item header as={NavLink} to="./" children="Diplomat" activeClassName="active" /> I can see in the browser that the aria-current property is being set to true correctly. So NavLink does 'know' when its active but I cant pass this to Menu.Item. I made a mistake. I just needed an exact attribute and a different path. Now it works.

I'm using Angular2 with Semantic UI as a css library. I have this piece of code: <div class="ui three stakable cards"> <a class="ui card"> ... </a> <a class="ui card"> ... </a> <a class="ui card"> ... </a> </div> the cards are rendered nicely with a space between and such. like this: refer to cards section in the link since the cards represent some kind of view I thought of making a component out of it, so now the code is: <div class="ui three stakable cards"> <my-card-component></my-card-component> <my-card-component></my-card-component> <my-card-component></my-card-component> </div> but now

I'm using the semantic-ui framework to create a simple search form that uses auto-complete information generated by calling an api via an ajax request. The server endpoint generates a simple JSON array e.g. http://data.nzor.org.nz/names/lookups?query=lu gives ["Lubbockia","Lubbockia aculeata","Lubbockia squillimana","Lucanidae"] I can see the search making the request but I'm not sure how to get the results to display. I have created a jsfiddle at http://jsfiddle.net/6ojkdvnn/4/ $(document) .ready(function () { $('.ui.search') .search({ apiSettings: { url: 'http://data.nzor.org.nz/names

I have React component: <Dropdown placeholder={field[propName].label} id={propName} fluid multiple selection search defaultValue={defaultOptions} options={options} /> So options and defaultOptions is the same structure arrays {text: 'string, value: 'string'} . In semantic UI source code I found this: /** Initial value or value array if multiple. */ defaultValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([ PropTypes.string, PropTypes.number, ])), ]) That the reason why my code above gives me error: `Warning: Failed propType: Invalid prop

I decided to upgrade the new app I am developing to the Meteor 1.3 release. I followed 'The Official Guide' instructions from MDG for the recommended directory layout and, with a bit of refactoring of my FlowRouter code, was able to get the app almost working. The problem seems to be with the Semantic UI package (2.1.8) installed from Atmosphere. I did need to add the appropriate SUI *.less files to a top-level 'main.less' file in the 'client' directory to get the app to render a properly styled view. However, the SUI behaviors which worked nicely in Meteor 1.2 yesterday no longer work. My

I don't have enough rep to post images, but here's a link. http://i.stack.imgur.com/eTp8Q.png I'm having trouble trying to figure out the proper CSS/LESS to enable sidescrolling here within the Semantic UI framework. There are four columns in this part of the grid, and I need to add four more, but have them hidden off to the right until they are scrolled to, if that makes sense. <div class="features ui grid noMargin"> <div class="four wide column greyOdd">Stuff here</div> <div class="four wide column greyEven">More stuff</div> <div class="four wide column greyOdd">Calls n stuff</div> <div