custom styling not working - help!

custom styling not working - help!

Hi,

My app is nearly ready to roll but there is one problem that is slowing me down and driving me crazy.

I have a form with 2 select widgets for the user to choose hours and minutes. Esthetically and logically it makes sense to have these side by side and so I'm using the side-by-side widget. The problem is that no matter what custom code I assign to the select widgets, their width remains the same and they overlap. The css is taken into consideration in App Framework but not in the emulator.

Any help on this would be greatly apreciated.

 

10 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

Hmm. That is curious.

There is a 'width' style you can put on each of the inputs. That might help manage their widths better.

 

Or, instead of using the side-by-side widget, you could drag in a row, and then drag a second column into that row. Then put those inputs into each column.  You'll need to change the min-height of the row, but that is easy to do in the styles pane.  It will default to 100px, but once it has the widgets inside you can just turn off the min-height.

 

Thanks for your input Chris,

Using the width style gives the same result as above; it looks ok in the App Framework but not in the emulator or on the telephone (Samsung.

I've tried with the row and column method you suggested but the result is the same.

I've even tried using the online App Starter (http://appstarter.app-framework-software.intel.com/) to see if that would generate the code correctly - still the same result. 

What ever I do the select widget remains the same width.

Could this have something to do with the way it's being handled to have that nice down arrow on the right of it?

 

 

 

I have been experimenting further with this.

I created a fresh "tab view" app, put in a side-by-side widget with my 2 select widgets inside, set widths and max-widths -> same result

I then converted to bootstrap -> the widths of the select widgets are as they should be; side by side and not overlapping.

I also tried with JQuerymobile - idem

So there is definately something strange going on with the way App Framework is handling this widget (and perhaps others too). I think someone has set an arbitary width somewhere which ignores any width style added. (and may I say that they should be shot for that - just kidding, well.not really lol). IMHO a select widget should either adjust its width to the width of the longest entry in the options list OR according to those defined by the end developer (i.e.: me).

This is very frustrating as I like the style of the App Framework but if no one can provide me with a solution (or hack) quickly then I will have to roll with bootstrap (and spend time tweaking it because it's messed up the footer) and its icons which aren't as nice as those in App Framework (no icon for statistics for example :-(  )

I am guessing you are not using the "native" styling options for the AFUI but are using its "standard" look and feel.

Please see this recent discussion as it may be related. https://software.intel.com/en-us/forums/topic/557242

I would be curious if you get better results using one of the native styles. If you want to poke around to sort it out, there is probably just some errant (or possibly missing) CSS for the appframework generic style.

Dear Anne,

Try and use a jQuery widget in your html.

It works with App Framework.

Hi Barry, thanks for your input,

Quote:

Barry Johnson wrote:

I am guessing you are not using the "native" styling options for the AFUI but are using its "standard" look and feel.

Please see this recent discussion as it may be related. https://software.intel.com/en-us/forums/topic/557242

I would be curious if you get better results using one of the native styles. If you want to poke around to sort it out, there is probably just some errant (or possibly missing) CSS for the appframework generic style.

This is my 1st App, I'm more experienced in creating websites with php, mysql databases and funky css and I initially though that my lack of experience and, I must admit it, aversion to javascript would be the biggest hurdle.  I chose the tabbed app template which had the "Default" style tab set and I hadn't noticed that there was a 2nd option for Device Native, Android light, etc. I've tried playing with these but my problem remains. The reason I ran with this in the 1st place was because I liked the styles in the emulator for the different devices. Unfortunately the form was one of the last parts of my project, otherwise I think I may have chosen another option from the offset.

I've had a look at the discussion you mentionned I saw that there is a "wide-control' class in the code shown; I'm convinced that this is the root of the problem but poking around hasn't helped me find a fix for it and removing the classes didn't produce a very good result.

 

 

Hi Michael, thanks for you input.

Quote:

Michael O. wrote:

Dear Anne,

Try and use a jQuery widget in your html.

It works with App Framework.

I'm not quite sure I fully understand. Do you mean use the jQuery framework for the whole app or just for this widget (is that possible?)

I have created widget using jquery widget factory API which is custom and would like to use that in my XDK appdesigner sample project. 

Could you please explain how to import my widget code and using my stateful widget in the app

 

This is a old question and I am not sure what version it was.

However did you try this:

Left content of the side-by-side has 30% and the right has 70% with a custom style class .DifWidth

@media all and (max-width: 300px) {
  #afui .Difwidth > .leftContent {
    width: 30%;
    text-align: left;
  }
  #afui .Difwidth > .rightContent {
    width: 70%;
    text-align: left;
  }
}

The version for this code 3357

 

Leave a Comment

Please sign in to add a comment. Not a member? Join today