Jump to content

Search the Community

Showing results for tags 'css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


There are no results to display.


  • Welcome to Smart Mobile Studio
    • News and Information
    • Pre-Sales Questions
    • Smart In the Media
    • Smart Contests
    • Meta
  • Smart Mobile Studio Discussion
    • General
    • IDE
    • RTL
    • Code
    • Client Server
    • Platform
    • Graphics
    • Deployment
    • Suggestion box
  • Smart Mobile Studio support
    • Support
    • Bug report
  • General Discussion
    • Pascal
    • Delphi
    • Javascript
    • HTML/HTML5
    • CSS
  • Resources
    • Website
    • Download Smart Mobile Studio

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL



Company name


Found 12 results

  1. lynkfs


    Styling of visual elements. There are some 280 separate css properties which can be used to style each and every visual dom element. The following statement produces such a list var styles := browserapi.window.getComputedStyle(Panel.handle); (280 entries) If we disregard the properties which have a vendor prefix (-webkit, -moz etc) we still end up with some 230 properties for each visual element. And although many of these have default property values, the complexity is just too great to do styling on this level. Each and every css framework (including Smart) tries
  2. lynkfs


    Usually I try to steer away from external frameworks. They seldom provide exactly what is needed and are difficult to modify. An exception may be the ionic framework. It is an open source ui toolkit with some nice elements in it. The good thing is that their components subtly change depending on which platform they are used on. The following code uses 2 Ionic components : a button and an extremely elegant selector var iobutton : TIonicButton := TIonicButton.Create(self); iobutton.setbounds(100,100,100,35); iobutton.color := 'primary'; iobutton.fill := 'outline'; iobutto
  3. lynkfs

    responsive grid

    This post is about using the css-grid for responsive content. It happens often that the contents of a container need to re-arrange itself depending on the size (width) of the container, as in Using a css-grid for that purpose, the code is pretty minimal at just 5 lines : //container (w3panel) cards.handle.style.display := 'grid'; cards.handle.style['grid-template-columns'] := 'repeat(auto-fill, minmax(180px, 1fr))'; //set minmax to just a bit bigger than the card-width cards.handle.style['grid-gap'] := '50px'; cards.handle.style['justify-items'] := 'center
  4. lynkfs

    css styling

    Browsers are certainly talented as multi-language processors. They have to understand html, css, javascript, svg and lately web-assembly as a fifth language. XML and Json are format specifiers, but could be borderline categorised as languages as well. Smart elevates javascript to great heights, but sort of leaves the other ones at the periphery. Especially css. Css can be used for a) component styling including colours, fonts etc, b) visual layout of pages/forms and reacting responsively to screen size and orientation and c) interactivity in various forms. Some of this overlaps with
  5. Hi. I have this css .TW3Button { display: inline-block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; cursor: pointer; border: 1px solid #018dc4; -webkit-border-radius: 3px; border-radius: 3px; font: normal 16px/normal Verdana, Geneva, sans-serif; color: rgba(255,255,255,0.9); -o-text-overflow: clip; text-overflow: clip; background: #007FFF; -webkit-box-shadow: 3px 3px 4px 0 rgba(0,0,0,1) ; box-shadow: 3px 3px 4px 0 rgba(0,0,0,1) ; text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
  6. Hi, Bug #1 - tw3panel vs tw3button I've encountered a discrepancy with how the css is applied to different components. In this example the :active selector in the css doesn't work on the button but does work for other selectors like :hover. :active also works on tw3panel for example. :active -> green :hover -> red normal -> blue Bug #2 - toggle button As a work around of not being able to use :selected in the past I was using two css classes and switching the StyleClass of the component onClick to create essentially a Toggle Button. This has now broken for s
  7. Someone posted a technique for injecting CSS, and while I normally dont go around correcting - the code posted was so bad that it could easily break the application. Smart has classes for css that are easy to use. Always check the RTL folder, and search in the class-browser. So if you are looking for CSS stuff, then search "CSS" in the class browser. Quick intro A stylesheet is just an object, like everything else in the DOM (document object model). The browser will take your css-files (if listed in the html) and load them in, then they turn up as objects you can access. Bu
  8. There is an issue that is very obscure with the IDE/RTL which seems to glitch out only when Project Options is not entered. The Exact steps to reproduce are shown in the demo but are also outlined here: Create New Project Add the code into InitializeObject: writeln("entered intialize object of form"); var s := #' .TW3EditBox { color: #0000ff; }'; writeln("After multi-line css"); browserapi.document.styleSheets[0].insertRule(s, 0); writeln("After insert rule css"); Compile and Run Error will show, now go to Project > Default Project Options
  9. Hi there, I've been attempting to restyle the TW3Dialog component so that it fits more in theme with the rest of our program. However since the changes in the last alpha( the construction of this component has changed somewhat. This is what i have so far: but i can't seem to get the text to center correctly. I have tried using things like TW3Dialog > TW3Label { text-align:center; } or TW3Dialog > p { text-align:center; } or TW3Dialog > * { text-align:center; } Here is the code that i found in the external css relevant to the TW3Dialog Box
  10. Hi, Given that TW3CheckBox is made up of two components being : TW3CheckMark and TW3CheckBoxLabel, How would one go about styling this component? Can we set styles for the sub components and go from there? Just a bit confused by the cross over between CSS and SMS for this component. Thanks!
  11. lynkfs

    Component styling

    For myself I've adopted the following recipe for component styling 1) Compose new components using any of the standard components, like w3Panel, w3Label, w3Button etc. The uptake is that this way new components auto-style according to the project theme and switching themes changes component styling automatically. Overriding properties where necessary of course. 2) Avoid themes outside the ones provided in SMS. I find external css files hard to read and comprehend, and I tend to steer away from them. The uptake is no external dependencies and also styling can be done in BEM format,
  12. I have made a custom control and I'm trying to set the css so that it persists across compiles. If I set the options to create a seperate css file, then after a compile I can edit this and it runs correctly, but each time I recompile, it regenerates the css. I'm guessing the only way may be to copy the theme file I'm using (ios.css) and create a new theme. Is this currently the correct way to do this or is there a way to either output an inline style or have a 2nd css file ?
  • Create New...