semantic-org / semantic-ui Goto Github PK

for example: http://screenshot.su/show.php?img=020e2ad16a6ff85c2a957355f1dee106.jpg

google chrome
ver 29.0.1547.66 m (last)

the accordion example on the page
http://semantic-ui.com/modules/accordion.html
is not working

Hi,
I've used this lib for the first time, I love the design and feel!

I've found a couple of problems, this is related to the modal:

To show the modal I use:

$('.ui.modal.signoff').modal('toggle')

This is the inspected HTML:

<div class="ui dimmer page visible active">
<div class="ui signoff modal transition visible active" style="margin-top: -198px;">
...
</div>
</div>

After closing the modal, this is the HTML (no more classes on the modal div!):

<div class="ui dimmer page hidden">
<div class="" style="margin-top: -198px;">
....
</div>
</div>

Alex

Hi,
I'm displaying a radio group inside a modal and the radios are not selectable (clickable). Might be a z-index problem?

<div class="ui dimmer page visible active">
<div class="ui signoff modal transition visible active" style="margin-top: -198px;">
            <i class="close icon"></i>
            <div class="header">
              ...
            </div>
            <div class="content">
              <div class="left">
                <img class="ui image" src="images/avatar.jpg">
              </div>
              <div class="right">
                <div class="ui header">...</div>
                <div class="ui form">
                  <div class="grouped inline fields">
                    <div class="field">
                      <div class="ui radio checkbox">
                        <input type="radio" name="example" checked="checked" value="1">
                        <label></label>
                      </div>
                      <label>A</label>
                    </div>
                    <div class="field">
                      <div class="ui radio checkbox">
                        <input type="radio" name="example" value="2">
                        <label></label>
                      </div>
                      <label>B</label>
                    </div>
                    <div class="field">
                      <div class="ui radio checkbox">
                        <input type="radio" name="example" value="3">
                        <label></label>
                      </div>
                      <label>C</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="actions">
            ...
            </div>
          </div>
</div>

There is a small offset between normal and hover icons in the secondary menu.

Active style of secondary menu disappear while scroll on the page UI Definitions.

It would be awesome if font-awesome-ish icon styles were added.

E.g.

• Rotated/Flipped Icons
• Stacked Icons
• Spinners

There is a gap between the buttons and the text is not horizontally centered.

I may be not that experienced with UI but let me show what happens when I try to pass onHide function into the modal.
At first, I initialise it with these params. And I can see that the params were passed successfully:

        debug: false
        performance: false
        onHide: ->
            console.log "Hided!"
        onShow: ->
            console.log "Shown!" 

But if I try to show it:

$('.ui.modal').modal('show')

I get a modal with default params. E. g. with debug: true and without callbacks.

What am I doing wrong?

As mentioned in MSDN (like http://msdn.microsoft.com/en-us/library/ie/hh772233(v=vs.85).aspx), -ms- prefix is not needed.

<a class="item">
  <i class="empty star link icon"></i>
  text
  <div class="right floated date">Sep 05, 2013</div>
</a>

should be

<a class="item">
  <div class="right floated date">Sep 05, 2013</div>
  <i class="empty star link icon"></i>
  text
</a>

So that it shows the text and dates like in the feed view.

Please rework the whole codebase, especially the examples, to make the project semantic, as it states itself to be.

Where is the semantic in styling a DIV as a button? Use the BUTTON-element instead. It has a special purpose and meaning. And purpose and meaning are what drives semantics. Not the naming of a class.

Do you have Modal module in your Semantic UI?

Thanks!

The font in the black menu items, The font Neutraface is not found and defaults to a serif font.

#example .page .menu, 
#example .page .of {
  font-family: 'Neutraface';
}

In the second example of dimmer documentation to close it you have to click out of the centered div, and could mislead the user.
I think would be better if close when you click anywhere.

I wnat to talk about the possibility of adding a select dropdown with input search, some like Select2, Selectize or Choosen... but restyled to fit to the apperance of semantic-ui.
With an animation when the dropdown appear.
Would be epic. I think would be very useful.

I was wondering if you are planning to provide multi-screen support, something like ink's:

http://ink.sapo.pt/layout#nav-screens

or twitter bootstrap responsive utilities:

http://getbootstrap.com/css/#responsive-utilities

(I think I like ink's approach better...)

hi

thanks a lot for your work i love semantic-ui

is there a special reason for choosing fontello ?

I hope you will add autocomplete to your project soon... Thanks!

It would be just great :)

I was checking the grid examples, I redimensionated the browser, and this is the result:

The Dropdown and Dimmer hide and show events are being enqueued and executing multiple times.
To reproduce that try clicking the dropdown or dimmer button multiple times.

Does you have any plans to add any kind of AJAX-validations support for the form validation module? I think, it would be great.

i want to say well done ... Good Job 👍 I think it would be nice to add more specification such as

• Supported Browser
• CSS version
• Possible Dependency (eg HTML5)
• Mobile Compatibility
• Performance
• etc

The hand cursor only shows if the mouse hovers over the red dot, but the checkbox can actually be toggled on the whole element. Thus the hand cursor should be shown when the mouse hovers the element instead of only the red dot.

The search field in the menu is not vertically centered. Although the text for "search" is on the font baseline, I think the search field would look better if it is centered.

The border corners in the table segments in modules/accordion...

...should look like that of the colored segments in elements/segment.

The tables on the doc pages of the other modules use celled definition table segments instead of colored table segments. Do the definition tables supersede the colored tables? It would be nice to have an example of a colored table segment in collections/table.

To make inline validation perfect (the last example here http://semantic-ui.com/modules/form.html) according to the UX, the scenario should be like that:

1. I enter 'wrong' data, no error is showed.
2. I move focus to the other input and in case of wrong data in previous one the inline error appears.
3. I return to the input with wrong data and (this part works wrong now) as only as I enter correct data the error message disappears.
   Now check happens only when the input loses focus. But in case of error already shown check should happen after every sign typed.
   

Nexus 7 2012

should add a z-index:>10 to.ui.form.loading:after ...

Miscategorized

In both the sidebar and the main button on the homepage, this isn't very semantic.

There is a download icon available on Fontello.

Class stack you're using:

inverted circular red upload icon

What it should probably be:

inverted circular red download icon

When attempting to use the Slider/Toggle they appear to be static

JSFiddle example
http://jsfiddle.net/PPHkQ/1/

The left floated image causes a margin-top for the first p.

I want a menu that when I click an item, it scrolls to the part of the page it's pointed at.

Example: http://semantic-ui.com/elements/image.html

if you have a list of items, you probably have to work with UL followed by LI

and if you have a short piece of code inside your menu, you shouldn't use DIV, because W3C recommends SMALL tag to do this.

Firstly, I think this is awesome.

Little issue. The clickable area in links on the top of your site are as small as 7 px wide. It'd be easier if the anchors filled the container. Thanks!

Left border in the first column cells of the celled table adds 1px additionally to the 1px table border.

.ui.celled.table tbody td {
  border: 1px solid #E0E0E0;
}

<div class="field">
  <label>Username</label>
  <div class="ui labeled icon input">
    <input type="password" placeholder="Username">
    <i class="user icon"></i>
    <div class="ui corner label">
      <i class="asterisk icon"></i>
    </div>
  </div>
</div>

How the corner label icon looks if the icon i in the input field and the class icon in the div are removed:

<div class="field">
  <label>Username</label>
  <div class="ui labeled input">
    <input type="password" placeholder="Username">
    <div class="ui corner label">
      <i class="asterisk icon"></i>
    </div>
  </div>
</div>

Also: input type should not be "password" for the username.

The icons on the last example (Inverted) on this page are cropped on top and left side.http://semantic-ui.com/elements/icon.html

Hi, I think fixed menu should be above of loader, but only if loader not in modal window.

This project looks amazing. I can't find any info on browser support. Did I miss it or has it not been decided yet? Will it be similar to bootstrap? http://getbootstrap.com/getting-started/#browsers

If it hasn't been decided yet, can I vote for IE8+ support as that is our clients requirements.

or width should adapt itself to the device-width ?

It would be great if you'll make your project available in Nuget.

Thanks in advance!

In the conditional buttons there is no the chance to choose the word of inside.
Imagine that someone wants to put "and" instead, or just a word in another language.

Here the ribbon label has a small gap in interaction with segment.

In element.html (UI Elements) the ribbon label has no gap in interaction with items > item.

Should look like the combobox "Gender" in section Types/Selection, I think. :)