WebListbox Design Hacks

Sorry. Missed some of the pseudoselectors:

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
    content: "" !important;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    content: "" !important;
}

Thanks! I was about to try “after” on the second one. Just seemed like what it should be!

2 Likes

Yes and no. In principle, the old webstyles only mimic the CSS behavior. Granted that it was “xojo-style” and easier to implement and you didn’t have to care about “real” CSS.

On the other hand, it was a bit confusing for someone knowing CSS to use these (nested) Xojo Web Styles. But I agree that some kind of editor would be nice. Ultimately many Xojo developers are using the tool for dealing with it in an easy and fast way. Plus the IT of business customers wants to be able to make a few changes on their own, but might not know anything about CSS.

Well this CSS stuff is driving me batty.

@Anthony_G_Cyphers - I followed your instructions and made the table background the color I wanted. But there’s still a border showing at the bottom but I have every single darn border item in the bootstrap file commented out!

But what’s worse is that as soon as I add rows to the table - boom! - the white background is back! So what precedence is set where in the CSS file? I have to learn a completely new language just to set up an incredibly simple web app in Xojo. This is not “easy” nor “rapid” development…

Trying to pull all of this together, I have this in the App.HTMLHeader property, but it will work just as well in your custom theme:

<style>
	.XojoListBox .DTFC_ScrollWrapper,
	.XojoListBox .table,
	.XojoListBox .dataTables_wrapper tr.buffer {
	  background-color: #f00 !important;
	}
	table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
	    content: "" !important;
	}

	table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
	    content: "" !important;
	}
	.table-bordered thead td, .table-bordered thead th,
	.table-bordered td, .table-bordered th {
	  border: 0 !important;
	}
</style>

This sets the background of the cells to red, removes the sort arrows, and removes cell borders.

1 Like

As with most things Xojo (and RAD in general), it’s relatively easy to build something with the defaults. When you start customizing is when you need to know more and do more. There’s a reason I work tirelessly on GraffitiSuite. :wink:

Thanks. So here’s a question…

What order of precedence is there with CSS? In one spot there’s a Striped-Table setting. In another you have the .XojoListbox settings. Is it possible that settings in one spot in the file will override the settings in another spot? And if so, how is that determined? First item setting the style? Last item? Does there even need to be a bootstrap file if you are just making changes to one control (like I said - it’s a really simple webpage used in a signage application).

It’s top-down based on loading order. So you have that block in the <head /> tag of the HTML document. We use !important to override anything that comes after it. Without that, the next thing that loaded which applied to the same set of CSS selectors (say .XojoListBox .DTFC_ScrollWrapper) – even in the same stylesheet file – would override those CSS property values, and so on down the line. Once you get to the actual element, say a <td /> HTML element, it can also have a style attribute that might look like <td style="background: #fff">Cell Text</td> which would override everything that came before it with the exception of CSS values that are flagged as !important.

CSS is inherited, and a lot of fun.

OK. Thank you. I guess that’s why it’s called “cascading…” It all rolls downhill!

In the middle of reading @Jeannot_Muller article on all this. So guess I just have to read up more on it…Sure seems like someone in Xojoland could make a lot of money off making an app that allows you to generate all this stuff from an easy to use GUI. Seems like it’s something Xojo could actually do in the IDE. Could still be bootstrap based, but at least make the IDE so that you can set properties of the listbox (or whatever control). Then the IDE writes out the CSS. It’s doing that to an extent anyhow if you don’t have a custom bootstrap file loaded. Seems like a fairly easy and straightforward thing to add to the IDE…

1 Like

Actually, if you don’t provide a custom Bootstrap theme, it just loads up their own default. They do load some CSS in <style> blocks on the page and there’s custom stylesheets for some components like the ListBox or DatePicker, but for the most part it’s all in the theme file.

I, too, would like to have back the old WebStyle class from Web 1.0 with some additional functionality. That’s why I built GraffitiStyle and made a WebStyle Converter. To make things a bit more manageable at runtime.

1 Like

Hmm… Maybe I’ll have to check out your classes.

It seems like it would be very simple to add properties to a control that then have methods under the hood that write out the CSS file. That to me is the whole point of an environment like Xojo. I don’t have to learn Objective-C or Switft to make an iOS App. I don’t have to learn HTML to make a web app. Etc…

Famous last words.

You might if you want to do heavy customization or building new custom components. Just look at declares. That’s not Xojo code. Like I said, default is easy, customization can be hard…regardless of language or environment.

Oh I agree. That’s why I would argue to have both. Declares are really powerful and allow Xojo to be expanded far beyond what it can normally do. Same with plug-ins. That’s the great thing. But I can still write a damn cool app w/o any extra help…

Web 1.0 was pretty close to that. I didn’t have an easy ability to use external CSS AFAIK. But seems like they went too far the other way.

And yes. I agree something that “seems” simple is generally not. :smiley:

1 Like

It wasn’t as easy to completely change the entire application’s CSS in Web 1.0, no. I played with it by removing the default Xojo stylesheet on page load and adding my own custom stylesheet. Fun to mess with, not great in practice.

Web 1.0’s style was terribly outdated, had some glaring issues in implementation, and needed a change. The Bootstrap path does a lot for all of us by allowing for easier customization of nearly every component on a page just by downloading a different theme or modifying the default using something like Bootstrap Build.

1 Like

Agreed. I do think it’s a very powerful and good thing to have this ability. But not having “easy” hooks doesn’t help those who don’t have the knowledge or need the power. Writing in assembly language is very “powerful” but it’s not for the faint of heart. Powerful does not equate to useful for the masses. Xojo so wants to be a tool for the masses that is easy to use and easy to deploy. They missed it here. Hopefully someone from Xojo is reading this.

1 Like

I actually disagree. It’s so easy to get up and running with Xojo that it’s ridiculous compared to most other similar tools, and that’s part of what brings users to the table, especially citizen developers/hobbyists. Customization is possible, and really not that difficult, it just requires a bit of research and play.

2 Likes

I have seen many people complaining about this. And yes, it is a true fact that this functionality is now missing (as Web 1 had this style editor). But as far as I understood it Xojo has plan to bring more customization via the IDE back, one way or the other, either via a style editor and/or more settings for all the controls. But as so often it isn’t finished yet.

I agree that we could debate about the latter point, as often things are announced but will be released only months after, if at all :frowning: . But I don’t understand those voices (not you) arguing that they are moving to XY, because in Xojo Web 2 they have now to deal with CSS.

I’m not aware of any alternative to Xojo Web where you would not need to deal with CSS, HTML, JS etc.

The contrary is true: in most alternatives you have to deal heavily with all those components and this in different toolsets. Is it perfect yet? Not at all, but I think they are on the right path. I only hope they will keep the momentum. I would even argue that it is good that they are first concentrating on the existing bugs (what they obviously do) before investing time into better styling options. Because w/o fixing some bugs such a styles editor won’t help a lot, it might even make since worse, as some CSS hacks are currently more helping to bypass obvious core issues than anything else.

4 Likes

@Jeannot_Muller I would totally agree with you. I’m not turned off at all that Xojo is using Bootstrap and CSS. Makes sense. And if I was a CSS Ninja then I would be as happy as a pig in slop! But I am not so it does make it difficult and I have to learn something else that takes me away from my actual development. Being a one man, part time show, it’s incredibly difficult to write code for a desktop app, a web app, an iOS app, keep my documentation updated (it’s years old now), update my website, handle customer sales, handle customer issues, fix bugs, etc (Let alone attempting to convert my main Web1.0 app with custom javascript controls to a Web2.0 app). Now I have to learn yet one more thing that takes my time for a web app that has like 3 controls on it. I just want to make the listbox basically invisible on the page and instead show just the text I put in the lines of the listbox. I could do it in 10 or 15 minutes on a desktop app but it’s taking me days with a web app because of all this.

Still I’ve invested everything into Xojo. I’m too deep in to pull out and go somewhere else…

1 Like

@Jon_Ogden I hear you. I’m in the same boat. That’s why I have repeated many times in the forum that Xojo Web 2 (at my perception) is already good enough for some business requirements, but still has a lot of potential (polite from for saying lack of functionality). I personally will for instance not migrate any of my web 1.0 apps to web 2.0. Firstly because no one will pay me for this work, secondly because it is a different beast. Most likely it will never be possible to migrate all features from Web1 to Web2 without changing some logic and some design components.

I fully agree that developing for multiple platforms with Xojo still has a lot of challenges. It is just not copying and pasting and then you are done. But at least it is still much easier than developing all those platforms in different tools and languages. That’s even more time and money consuming.

Still I’ve invested everything into Xojo. I’m too deep in to pull out and go somewhere else…

Same here. But I still prefer that Web2 and the truth is finally out, rather than still having to work with web 1.0. Web 1 was fantastic, but I understand the reasons (like you) why they had to start from scratch with this new version. I honestly think the Xojo would themselves have preferred this move to be smoother and easier, but the web technologies are developing themselves at an incredible pace.

2 Likes

So my saga with Web Listboxes continues…

@Anthony_G_Cyphers - the changes for the background color you suggested do work. But as soon as I write data to the listbox everything changes again. The color goes back to white, striped rows, etc.

And the Listbox cannot accept anything in its Style property. @Greg_O_Lone why is this and how do you customize a Web Listbox? I haven’t heard back in my private message to you on this so asking it publicly.

Talking further with @Jeannot_Muller it appears that Xojo’s listbox uses an additional CSS file outside of bootstrap. Not sure why…

I simply what a “transparent” listbox. I don’t want to see any “listbox” elements like borders, sort arrows, grid lines. I simply what it to disappear and only show the text I enter. Why is this so difficult? It should not be that hard.