Is it possible to assign custom css properties to UI elements through tss or other means?
I was trying to do something like this in app.tss:
".myView[platform=mobileweb]": {
-webkit-box-shadow : '10px 10px 5px 0px rgba(0,0,0,0.75)',
-moz-box-shadow : '10px 10px 5px 0px rgba(0,0,0,0.75)',
box-shadow : '10px 10px 5px 0px rgba(0,0,0,0.75)'
}
Titanium Mobile Web doesn't really support this. DOM nodes don't have unique ids or class names that you can use to reference specific DOM nodes.
It does, for example, apply a class each UI element, so you could add a box shadow to all buttons. Since Titanium UI elements are comprised of multiple DOM nodes, you'll have to figure out the exact DOM structure of the UI element you want to change using the browser's web/dom inspector.
You won't be able to define your custom style using TSS. Instead you'll have to add it to the splash.css since that's the only place that arbitrary CSS is loaded.
Related
I'm trying to make all links on my page have a custom underline similar to this.
Here's what I have so far of a menu that's going to use this feature:
CodePen
The underline, instead of appearing under each link, appears under the "toolbox" div (the link objects' grandparent).
I've tried just making the first CodePen but with the features SCSS allows you (& and nested rules), but I seem to be missing something and won't even show the underline. I'm guessing it has something to do with my use of the parent selector.
How do I make my current code work correctly? If the issue is with my use of parent selectors in general, what is the correct selector to use in this case?
(Stack Overflow is making me put this)
You are using position: absolute in ::after therefore the underline will have absolute position not related to the <a>. Just add position relative to <a> thus inclosing the absolute ::after content to it.
.navbar {
background-color: #191919cc;
padding: 10px;
border-radius: 10px;
a {
position: relative; // here
margin: 0 10px;
}
}
codepen link: https://codepen.io/ashwin-chandran/pen/BaZjQLz
I need a component exactly like below picture.
image code is here but i need that codes for typescript.
and also copy codes not working!
any body can help with an example in https://codesandbox.io/.
thanks a lot
Recently I used react-multi-carousel with typescript.
Maybe that carousel's parent style is like this.
display: flex;
Carousel doesn't work with that style so you should change the parent style.
It's not a problem caused by Typescript
display: block or add this style.
min-width: 400px; max-width: 400px;
it works for me.
I'm just getting into both Laravel and SASS and I took the opportunity to rewrite my old html template into something re-usable and SASS the CSS rules.
In my HTML template, I had the borders such as follows:
input[type="text"]{
border-style:solid;
border-color:red;
border-width:1px 1px 4px 1px;
}
<input type="text" />
So I would have a border-bottom of 4px and rest would be 1px, in the same style and same color. I wanted to override Bootstrap 4's $border-width property so I went ahead and changed it to 1px 1px 4px 1px, and boom. It didn't work.
After inspecting the SASS files, I've noticed that they're not used the way I thought they'd be, but instead they look something like:
border: $border-width solid $border-color
So that got me thinking, there are probably several ways to resolve this, one way I went ahead and done so far is:
$border-widths:1px 1px 4px 1px;
input[type="text"].form-control{
border-width:$border-widths!important;
}
So I'm leaving the default $border-width variable as is, and instead creating my own variable and then selecting the input and overriding the border-width property only. Which looks, not right because:
This is my _variables.scss override file and I kind of want it to stay that way.
I could do this with just CSS override the same way, but then it'd defeat the whole purpose.
I have to explicitly use !important otherwise I can't override Bootstrap 4's rules.
So, there must be another way, I guess. But what exactly?
I ended up simply keeping the !important for overriding and just made myself another scss file, and written the rules there:
_variables.scss
$border-widths: 1px 1px 4px 1px;
_custom.scss
.border-thick-bottom{ border-width:$border-widths!important; border-style:solid; }
I'd like to use the theme styles to generate different CI for sub companies of our main company. I would like to insert every sub-companies logo into the top naviagtion bar. The plan was to have a seperate theme style for each sub company and within each style have a custom css code which sets the background image to a referenced static file (or theme file). Unfortunately the custom css code does not seem to evaluate the substitution strings so the images can not be rendered. e.g.
div.t-Header-logo {
background-image: url(#APP_IMAGES#COMPANY1_LOGO.png);
background-repeat: no-repeat;
width: 250px; /*or your image's width*/
height: auto; /*or your image's height*/
margin: 0;
padding: 0;
}
Is there any way to achive different logos per theme style?
Thanks for your support
replace the #WORKSPACE_IMAGES# reference with it's resolved name in the CSS file.
e.g. #WORKSPACE_IMAGES#add.gif becomes-
http://apex.oracle.com/pls/otn/wwv_flow_file_mgr.get_file?p_security_group_id=441224701954687600&p_fname=add.gif
Get the resolved name for your workspace by viewing page source, copy and replace #WORKSPACE_IMAGES# with the same. It will work.
Note: make sure that the image file you have uploaded is not specific to an application.
I am working with editable slick grid and copied the code from here:
Code
Demo Example
I have included required JS files and the CSS. But when the grid loads, the LongText fields acts as Text field and remains uneditable.
See below image for more information.
I do not see any JS error on the console. What could be the reason for this behavior??
Upon further investigation, my friend found out that the pop-up which shows the textarea, does comes up but the its style is set as disply:none . This style is applied to the div which actually shows the pop-up. If we change the style for this div to diplay:block I can see the pop-up.
element.style {
z-index: 10000;
position: absolute;
background-color: white;
padding: 5px;
border: 3px solid gray;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
top: 489px;
left: 505px;
display: none;
background-position: initial initial;
background-repeat: initial initial;
}
Update: I just came to know the issue is due to wrong version of jquery being used. Please check this link for working example:
problem: On index.html page, if I change the jquery version from 1.7 to 1.9, the pop-up on description field does not appear. I am using following CDN for jquery. I cannot switch back to lower version of Jquery as I am using version 1.9 for other purpose in my project.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
To answer my own question, I am now using latest version of slick grid (2.2.2 at the time of publishing this answer) which supports jquery 1.9 as well. I must give credit to #BelowTheRadar for his suggestion.