hello

I'm trying to apply a custom style to what eventually becomes a div in the html

<row height="20">
  <cell name="headermenu" columnSpan="3" hAlign="Full">
    <textLabel label="Prototype"/>
  </cell>
</row>

That is the xml from my panel, I've given my cell a "name" as I was under the impression that I as long as I created an entry in our custom CSS file with the same name but prefixed with DIV# it should apply the style to that.

div#headermenu {

background-color: rgb(255, 255, 229) !important;
 .x-panel-noborder {
    border-style: solid !important;
    border-top-color: rgb(255, 255, 229) !important;
    border-right-color: rgb(255, 255, 229) !important;
    border-bottom-color: rgb(255, 255, 229) !important;
    border-left-color: rgb(255, 255, 229) !important;

} }

However when I run the app, my custom style isn't being applied.... have I missed something obvious? I know the CSS file is in the right place and is working as other styles suck as prompts etc are working.

Simon

asked 05 Oct '15, 04:33

apacheuk's gravatar image

apacheuk
1391225
accept rate: 0%


Hi Simon,

Given cell names aren't directly written to HTML, so you cannot use cell names for custom styling. Instead, it is possible to use panels for that. Just insert a panel to cell, named headermenu, use panels name for styling.

Regards, Serdar

link

answered 05 Oct '15, 06:51

Serdar's gravatar image

Serdar ♦♦
100k4
accept rate: 13%

Unfortunately, it is the same as cells. You cannot use row names for styling either.

However, it is possible to change styles of "all" cells or rows under a panel.

e.g. let panel name be "mainPanel"

#mainPanel tr.x-table-layout-row {
  /* custom style for rows */ 
}

#mainPanel td.x-table-layout-cell {
  /* custom style for cells */ 
}

Regards, Serdar

link

answered 05 Oct '15, 07:13

Serdar's gravatar image

Serdar ♦♦
100k4
accept rate: 13%

Ah.... makes sense when explained like that :)

What about rows? can you apply styling to individual rows?

link

answered 05 Oct '15, 06:57

apacheuk's gravatar image

apacheuk
1391225
accept rate: 0%

edited 05 Oct '15, 07:00

ok, that fine...

next question, assuming I've gone with your first suggestion and created a panel called "headermenu" and included it, it doesn't appear to apply the border styling, based on my CSS entry for DIV#headermenu

Simon

link

answered 05 Oct '15, 08:17

apacheuk's gravatar image

apacheuk
1391225
accept rate: 0%

ok figured it out... my fault :)

I wasn't giving the border a size, soon as I added something like border-bottom-width: 1px it started to style correctly.

link

answered 06 Oct '15, 04:47

apacheuk's gravatar image

apacheuk
1391225
accept rate: 0%

I'm going to highjack this old thread as I think its all related...

Using FS1.9 I'm trying to style a DIV using the above method. I have my panel designed/named and I'm including it in my main app panel Its just a coincidence I've named the button group and the panel the same thing "listRRAFilter" same result if I change to a different name

<panel > <tableLayout > <row > <cell width="20"> <radioButton value="ALL" buttonGroup="listRRAFilter"/> </cell> <cell width="50" > <textLabel label="All" text-align="Left"/> </cell> <cell width="20"> <radioButton value="APPROVED" buttonGroup="listRRAFilter"/> </cell> <cell width="60"> <textLabel label="Approved" text-align="Left"/> </cell> <cell width="20"> <radioButton value="ARCHIVED" buttonGroup="listRRAFilter"/> </cell> <cell width="80"> <textLabel label="Archived" text-align="Left"/> </cell> </row> </tableLayout> </panel>

Then I "include" that panel in my main panel. However when I apply the following custom CSS to it I get a scroll bar along the bottom of the panel. Its like its sized the panel then applies the CSS and because I want to add a 1px border to the panel it applies this after, so now it doesn't fit and so gets a scrollbar.

DIV#listRRAFilter { border-style: solid; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-color: #ffdd99 ; background-color: rgb(255,250,236) ; }

I would attach an image to show exactly what I mean but security measures at work mean I can't.

Any ideas?

Simon

link

answered 21 Oct '15, 03:29

apacheuk's gravatar image

apacheuk
1391225
accept rate: 0%

edited 21 Oct '15, 03:32

couple of images to show what I mean, the first is with the left and right border not applied, the second shows what happens when they are applied

alt text

alt text

link

answered 22 Oct '15, 15:25

apacheuk's gravatar image

apacheuk
1391225
accept rate: 0%

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:

×22
×6
×1

Asked: 05 Oct '15, 04:33

Seen: 1,529 times

Last updated: 22 Oct '15, 15:25


© Copyright Gerger 2017