Hello folks,

in SRMobile demo, icons at bottom navigation are without a padding (icon position = top). Is it possible to define a padding around these icons?

What css sections needs to be modified?

Thanks, Tomas

asked 07 Oct '14, 17:17

Tomeo's gravatar image

Tomeo
162249
accept rate: 3%


Hi Tomas,

You're editing the correct file, however, I've seen that your is a modified version. It differs from my version. There is a CSS entry on the line 481 of your style.css; this entry overrides our changes. You should remove it.

Problematic CSS Entry

Thanks

link

answered 10 Oct '14, 10:05

Serdar's gravatar image

Serdar ♦♦
100k4
accept rate: 14%

edited 10 Oct '14, 10:06

Hi Tomas,

You can edit the following CSS decleration from "style.css" to adjust padding.

#style.css #line: 385

.fs-tabpanel-footer .ui-btn-inner, .fs-tabpanel-header .ui-btn-inner  {
   padding: 0px !important;
   height: 50px;
   line-height: 50px;
   font-size: 12px;
}
link

answered 09 Oct '14, 10:18

Serdar's gravatar image

Serdar ♦♦
100k4
accept rate: 14%

edited 10 Oct '14, 06:50

formspider's gravatar image

formspider ♦♦
138210

Hello Serdar,

thanks for the reply.

I tried to modify .css file stored in "\mobile\css\style.css", but no effect visible.

I tried also to add that section into custom.css under \app\my_app directory, which is also called from FS application. Unfortunately no success.

Tomas

link

answered 09 Oct '14, 10:48

Tomeo's gravatar image

Tomeo
162249
accept rate: 3%

Hi Tomas,

When you edit the "padding" section, you should see the space between icon and text expanded.

Can you explain what you tried in detail please? And it will be helpful if you explain what you want you to achieve in case of any misunderstandings.

Thanks

link

answered 10 Oct '14, 08:27

Serdar's gravatar image

Serdar ♦♦
100k4
accept rate: 14%

Hi Serdar,

a picture below displays what I need: ( to apply a custom style's to tab navigations )

alt text

I tried: 1. Edit style.css file stored in "\mobile\css\style.css" 2. Create my custom css file, saved it into \app\my_app directory and reference it for the FS Mobile app. No success, so maybe I did something wrong.

Tomas

link

answered 10 Oct '14, 09:15

Tomeo's gravatar image

Tomeo
162249
accept rate: 3%

Please use the following CSS as a replacement for the previous one.

.fs-tabpanel-footer .ui-btn-inner, .fs-tabpanel-header .ui-btn-inner  {
    padding: 10px !important;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
}

This should be the effect after the change:
SRMobile


Please be aware that your custom CSS file doesn't override the default settings.

Thanks.

link

answered 10 Oct '14, 09:25

Serdar's gravatar image

Serdar ♦♦
100k4
accept rate: 14%

Hi Serdar,

I'm probably editing a wrong css file.

Is it a 'style.css' under \webapps\fsmagd\mobile\css\ directory?

Tomas

link

answered 10 Oct '14, 09:42

Tomeo's gravatar image

Tomeo
162249
accept rate: 3%

edited 17 Oct '14, 15:36

Hi Serdar,

thanks, I missed that section too.

This file will be overwritten with a next FS Mobile release?

If I would like to have own custom styling, where would be the best place to put it?

Thanks, Tomas

link

answered 10 Oct '14, 10:46

Tomeo's gravatar image

Tomeo
162249
accept rate: 3%

Yes, it is very likely. It is a best practice to keep the style.css file as it is and create a new custom CSS file like you already did.

However, it may not be possible to take our specific example to a different CSS file because of it containing the keyword, "!important" . For this specific example you'll possibly need to make the changes again in the next version.

(10 Oct '14, 11:04) Serdar ♦♦
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×19
×5
×1

Asked: 07 Oct '14, 17:17

Seen: 1,719 times

Last updated: 17 Oct '14, 15:36


© Copyright Gerger 2017