ququplay / jquery-mobile-flat-ui-theme Goto Github PK

icons and borders of buttons are sharp edged (especially radio and checkbox look strange). The font is not smooth too. Also icons in circles seem to be not centered. chrome win8 and android lg p500 same thing.

is it normal or is this just an early version?

Hi!

I'm on JQM 1.3.1 and my buttons are markedly different from those on the demo page. They retain some sort of shadowing. Also, they show a default icon (a + sign) in the background when using the flat icons.

I think this is a similar issue to #7 and the issues are actually present in the fiddle posted there: http://jsfiddle.net/pe54u/

Just started using the flat ui theme for mobile but there is a limited number of data-icons? Is there an extension that can be used?

There are double scroll-bars being show in Flat UI theme. Could you please fix it.

Steps to reproduce:

1. Download from GitHub
2. Open index.html and see.

So jQuery Mobile people is about to release the public 1.4, right now there is a pre-release with a lot of changes. Among the most important this:

• No generating of inner button markup.

might be a problem, riight?

Invalid CSS after "...ckground-color:": expected pseudoclass or pseudoelement, was " primary_color{..."
(in /Users/Tyler/fieldharmony/app/assets/stylesheets/application.css)
(sass):10348

It doesn't like this part :
html background-color: primary_color{border-color:#2c3e50;color:#fff}

Line 4120, 4136, 4152, 4168, 4184, 4200, 4216

All the ui-page-theme-a,b,c,d,e,f,g declarations.

I wrapped it like this:

html{background-color: primary_color{border-color:#2c3e50;color:#fff}}

With curly braces and it would compile - but I get the issue where the only usable theme is A, and when data-theme="a" is applied to the content or page div - that's the only thing that will work for the entire page. You cannot change buttons, collapsible divs etc to other themes...

popover.
jquerymobile version 1.2

Will you debug for v1.2?? or only work on and after v1.3?

See an example of this at my Github Page http://rrevi.github.io - click on any of my posts and you should see then link to the post turn green when it is active (it only last a second or two). Not matching the theme selected (theme C)

I'm implementing this theme for a client and he has a "call now" button on one of the pages. There's no corresponding telephone icon for that in the Flat UI icon set. Any chance of getting that added?

Using bower to install the theme will place the files in a misspelled folder.

I've tried a number of different data-theme settings (b,c,d,e,f) none of them effect the panels background colour. The only one that works is "a"

Hi,

 May I know what is the alternatives way to use the glyph icons (which are in WOFF font) in browsers that are not supporting WOFF?

using data-split-icon on a split button list results in the icon rendered to the right instead of at the center. I had to do the below to center it. it is easier to notice if the list element data-theme is different from the data-split-theme

.rem-list-item .ui-li-link-alt .ui-btn-icon-notext .ui-btn-inner .ui-icon {
top: 51%;
}

.rem-list-item .ui-li-link-alt .ui-btn .ui-icon {
right: 52.5%;
}

Configuration : jquery 1.10.2, jqm 1.3.2 and latest version of jquery-mobile-flat-ui-theme
Problem : Slider handle does not change when modifying data-theme. it seems that ".ui-slider-handle" always surcharge ".ui-btn-up-x" theme

when inserting a line with:

<> href="#" data-role="button" data-icon="flat-volume" data-iconpos="notext" data-theme="b" data-inline="true">Volume <>

• with "a" inside <>

it only shows a green round circle. why is the icon not shown?

Adding svg versions before woff and ttf declarations in the css fixes the problem.

.ui-alt-icon.ui-icon-carat-r:after,
.ui-alt-icon .ui-icon-carat-r:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE9JREFUGJWdj8sNwCAMQx+wGJuRbsZm9EAQlfkcasmHxE9RDF3m3sqA5l6gKHNRKAEVCED2Xfa5DoAbNIAjpD9cZcw2S6P/of7wKPC9sg1eyBEYSwB/E4QAAAAASUVORK5CYII=');
}

If I wanted to apply some swatch styles (like setting the border-bottom-color of .ui-header to be the highlight_color of the swatch, or setting the border-top-color of .ui-footer), how would I go about modifying the build_swatch.styl file?

Thanks,
Matthew

The font icons do not seem to display correctly when data-mini="true". Also the icon keeps the shadow. I am using JQM 1.3.1

Is'nt it?

Hi,

Using your theme in an assignment for school and loving it!
We're trying to generate some radio buttons, but they just won't show up correctly.
Any idea what we're doing wrong?

Code: http://pastie.org/9758669

Screenshot:

I tried making footer area fixed but I am unable to do it. I checked the markup after the html is generated. I observed that the footer is not getting this css attribute top:window height-footer width. Kindly look into this issue.

The selected theme is not applied to <a href="#" data-role="button"> but is on regular buttons. See the following example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/jqm.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <a data-iconpos="notext" data-role="button" data-icon="home" title="Home">Home</a>
      <h1>A</h1>
      <a data-iconpos="notext" data-role="button" data-icon="flat-menu"></a>
    </div>

    <div data-role="content" data-content-theme="b" role="main">

      <a href="#" data-theme="b" data-role="button">Yes</a>
      <a href="#" data-role="button">Yes</a>

      <div data-role="collapsible" data-theme="g" data-content-theme="g" data-collapsed="false">
        <h3>Section 1</h3>
        <button data-icon="flat-mail">Yes</button>
        <a href="#" data-role="button">Yes</a>
        <div data-role="fieldcontain">
          <div data-role="controlgroup" data-type="horizontal">
          <button>Yes</button>
          <a href="#" data-role="button">Yes</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

The .icon-bars and .icon-edit default image icons are not rendering.

It's because they are not referenced in the /* supporting original icons */ area in the CSS.