Semantic-Org/Semantic-UI

Semantic is a UI component framework based around useful principles from natural language. Forkable JSFiddle: https://jsfiddle.net/ca0rovs3/

Fernando Basso

@FernandoBasso

It looks like I need something like

<div class="ui sixteen column stackable grid container">
  <div class="ui sixteen wide mobile column two wide computer column">
    <div class="ui inverted labeled icon left vertical menu">
      <a class="item">
        <i class="home icon"></i>
        Home
      </a>
      <a class="item">
        <i class="block layout icon"></i>
        Topics
      </a>
      <a class="item">
        <i class="smile icon"></i>
        Friends
      </a>
      <a class="item">
        <i class="calendar icon"></i>
        History
      </a>
    </div>
  </div>

  <div class="ui sixteen wide mobile column fourteen wide computer column">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis earum
      atque cum laborum suscipit nemo labore iure ea, debitis nihil doloremque
      dolore enim assumenda voluptatibus ipsam illum eaque. Officia, amet?
    </p>
  </d
</div>

Yevhenii Kurtov

@lessless

Hi people! Did anybody faced a problem when callbacks were dropped after an ajax request?
Just doing $.ajax causes checkbox' onChecked/onUnchecked to not being triggered anymore

Ajay Jadhav

@jadhavajay

Hi Team, Is there any way I can use Semantic UI with Aurelia Framework?
Has anyone attempted it earlier?

Just like Semantic UI has partnered with React, Angular, Meteor, and Ember, etc.

Rory Osentoski

@rosentoski

anyone no if there is a "twelve wide small screen column" syntax

never mind it works just like that

Yevhenii Kurtov

@lessless

It happens because semantic sets "hidden" class on the toggle's checkbox: m.verbose("Modfying <input> z-index to be unselectable"),w.addClass(g.hidden)

fperezgaliana

@fperezgaliana

Hi! Have anyone tried to use Semantic UI sidebar in a website that uses jQuery plugin 'context-menu'? As soon as I open the sidebar, the context menus stop working until you reload the page... I've inspected the DOM before and after running the sidebar function and I can't see any difference that could affect the plugin...

Zak Patterson

@zakpatterson

hey - theming question. So I'm looking at the github example, and in the github theme, theme.config sets 'github' for the form element, but the file form.variables in the github theme is much shorter than the same file in the default theme. Where do all the other defaults come from?

ok sorry, i just figured it out. theme.less imports from default first, and then from the requested theme.

@import "@{themesFolder}/default/@{type}s/@{element}.variables";

/* Packaged Theme */
@import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.variables";

Vinayak Kulkarni

@vinayakkulkarni

Guys, I've cleaned up Discord channels into categories so that it's better for folks to chat and discuss issues / suggest workarounds / new features etc.

Join using this link: https://discord.gg/7vqmGxa

Jaime Sangcap

@jaimesangcap

Hi! Have anyone tried adjusting the modal height dynamically? I have form modal where one section is hidden by default, when the slider checkbox is on, the form shows the hidden section but the I can't scroll down to see the bottom part of the modal.

Indrek Siitan

@indreksiitan

@jaimesangcap - I can't remember having this problem with Semantic, but for other UI libraries, sometimes calling $(window).trigger('resize') has helped

Jaime Sangcap

@jaimesangcap

@indreksiitan amazing, it worked! you saved my day, thank you! :smile:

Indrek Siitan

@indreksiitan

you're welcome :)

Nufflee

@Nufflee

Hey everyone, I need some help, I have this code (https://pastebin.com/uDjRQ2Ux) which creates permanently visible sidebar but the thing is that it pushes all of my contents off of the screen (simple repro: https://codepen.io/anon/pen/LOBzBP ) - you can see that part of the lorem ipsum (outside the sidebar) is actually off screen - it doesn't wrap correctly. How can I fix this because I don't want to use an overlay. Thanks!

Indrek Siitan

@indreksiitan

can't figure out WHY exactly that happens

but WHAT happens is that the "pusher" div gets width:100% of the viewport

Nufflee

@Nufflee

What do you mean, "of the viewport"?

Indrek Siitan

@indreksiitan

viewport - screen viewable area

Nufflee

@Nufflee

I know what viewport is but how to make the div get width: 100% of the viewport? You mean just add 'width: 100%' to it?

If that's what you meant, nothing changed. @indreksiitan

Indrek Siitan

@indreksiitan

i have not used this sidebar/pusher myself

but from what I now quickly read on the semantic site, this is actually correct behaviour

Nufflee

@Nufflee

I know but I want to get around it.. I guess I'll just do it on my own.

Indrek Siitan

@indreksiitan

it's meant for a sidebar that's hidden by default and toggleable

and then, for the duration of showing the sidebar, it pushes the whole content to the right, out of the viewport

you want a permanently visible sidebar?

in that case, yeah, just roll your own using flexbox or something

Nufflee

@Nufflee

Okay, thanks!

rohitdesigner

@rohitdesigner

anyone here ??

can anyone please help

Indrek Siitan

@indreksiitan

just ask the question and if anyone is here and can answer, they will

haelexuis

@haelexuis

Can someone help me? Semantic-Org/Semantic-UI#5976

Indrek Siitan

@indreksiitan

probably you need to have your own custom media queries for this

grid isn't Semantic's strong suit, I personally actually use the grid and display utilies from Bootstrap

most default responsive layouts handle everything under 768px as one mobile

now iPhone X is a first exception, which is 812px in landscape mode

haelexuis

@haelexuis

Ah, thanks :)

Indrek Siitan

@indreksiitan

but you can have something like @media (max-width: 767px) and (orientation: portrait) and @media (max-width: 850px) and (orientation: landscape)

Yevhenii Kurtov

@lessless

how to get active tab name?

David Pineda

@dpineiden

hello! in a dropdown, how to set a class or id to the selected item?

and obtain the value from the selected item?

romu

@romu70

hello, SUI newbie here. I'm testing SUI, and I'm trying to switch the active theme among the ones provided in the development package. When I build, no problem, the gulp build-xxx commands run flawlessly. But, at run time, several themes require the octicons.eot asset which is not present in the SUI build output folder. Any idea?

Jeff Dickey

@jdickey

Has anyone ever gotten SUI working in a Ruby/Roda app? I'm having no end of trouble; I've used it for back-end APIs for years but this is my first app-with-front-end using it. Help?

ByeongSu Do

@bsdo64

hello, is semantic ui document website available now? I couldn't access the website.

Indrek Siitan

@indreksiitan

works for me just fine

Philip Metzger

@philmetzger

hey, I am using semantic-ui react Forms, when i submit my form, is there an easy way to get the data there or do i have to add handlers to save the data i the state?

from the docs im guessing thats the best way?

because it brings me to my next question how to best do validation

Where communities thrive

People

Repo info

Activity