It's probably very simple question, but for some reason I can't find a problem in my code. I have a Sencha Touch app. I define a itemCls in particular list class definition:
xtype: 'list',
store: 'Tenders',
itemCls: 'tenders',
onItemDisclosure: false,
itemTpl: [
'<div class="name">{name}</div>',
'<div class="description">{description}</div>'
].join(''),
And then I have some custom CSS definition where I'm trying to customize this particular list (not all lists in the application):
.tenders {
padding: 0.7em 0.7em;
}
.tenders .name {
padding: 0em 1.5em 0em 0em;
font-size: large;
font-weight: bold;
}
.tenders .description {
font-size: small;
font-weight: light;
padding: 0em 0em 0em 0em;
}
.tenders .x-item-selected {
background-color: green;
}
However selected item is not green. I can see in Chrome debugger the following classes attached to the selected item in the list:
<div class="x-list-item-first x-list-header-wrap x-list-item x-stretched x-list-item-tpl tenders x-list-item-relative x-item-selected" id="ext-simplelistitem-211" style="min-height: 50px !important;">
<div class="x-unsized x-list-disclosure x-item-hidden" id="ext-component-436" style="display: none !important;"></div>
<div class="x-innerhtml" id="ext-element-563">
<div class="name">Name</div>
<div class="description">Description</div>
</div>
</div>
I also can see that .tenders { padding: 0.7em 0.7em } style is being applied, but not the .tenders .x-item-selected.
Any idea what am I doing wrong?
use:
.tenders.x-item-selected {
background-color: green;
}
to make your code more important that standard Sencha css either use the full path
.tenders.x-list-item.x-item-selected.x-list-item-tpl
or
background-color:green!important;
Do not add a space between tenders and x-item-seleced as they are on the same level, while name and description are inside the tenders div
Related
I am creating a web application using React and Ruby on Rails but my style components are not showing up. It worked fine when I had the first two style components but after making the third nothing works even when I removed the third component. After running rails my screen is now completely blank.
This is my code
import styled from 'styled-components'
const Section = styled.section`
background-color: #d74234
min-height: 550px;
padding: 100px 0;
color: #fff;
`;
const Header = styled.h1`
color: #fff;
font-weight: 700;
font-size: 40px;
line-height: 52px
`;
const Subhead = styled.p`
font-size: 18px;
font-weight: 500;
`;
const Button = styled.a`
display: inline-block;
text-decoration: none;
font-weight: bold;
cursor: pointer;
border-radius: 0;
background: #fff;
color: #333 !important;
padding: 10px 20px;
font-size: 18px;
width: 100%;
box-shadow: 0px 0px 0px 3px #473228,
-6px 6px #ef5f17,
-6px 6px 0px 3px #473228;
`;
const Jumbotron = () => {
return (
<Section className="home-section--1">
<div className="container">
<div className="row">
<div className="col col-sm-12 col-md-5">
<div className="pt-4 mt-4">
<Header>Curiosity Voyage!</Header>
<Subhead>Where all your random questions are answered</Subhead>
<div className = "cta-wrapper">
<Button className= "btn fancy-btn">Explore</Button>
</div>
</div>
</div>
<div className="col col-sm-12 col-md-7">
<div className="pt-4 mt-4 text-center">
</div>
</div>
</div>
</div>
</Section>
)
}
export default Jumbotron
I tried two solutions and neither worked, I included a backtick just before the semi-colons and also tried adding curly braces just before the styling.
I took a look at some info on Visual Studio and the styled-components within the section tag and got this message
const Button: 'StyledComponent<"a", any, {}, never>
and all of the tags have the same message, so it seems like it's not reading the styled-components within the Jumbtron. Can anyone help me with this please?
Could you provide more information, add code of your components, show how you added styles.
Also do you have any errors in browser console? maybe you can check some error logs
I have two buttons at the centre of my page with this css design.
button{
outline: none;
text-align: center;
border-radius:15px 50px 30px;
}
.button:hover {background-color: #3e8e41}
.button:active{
background-color: #3e8e41;
box-shadow:0 5px #666;
transform:translateY(4px);
}
#javaBtn{
color: #fff;
box-shadow:0 9px #999;
background-color:#2ECC71;
border: none;
padding: 15px 30px;
cursor: pointer;
font-size: 12px;
}
#layoutBtn{
color: #fff;
box-shadow:0 9px #999;
background-color:#2ECC71;
border: none;
font-size: 12px;
padding: 15px 20px;
cursor: pointer;
}
My html:
<div align="center">
<img src="yalda.jpg" class= "mainPic">
</div>
<div align="center">
<button class="button" id="layoutBtn">Layouts</button>
<button class="button" id="javaBtn">Java</button>
</div>
<div align="left">
<img src="me.jpg" class= "myPic">
<p><font color="white"> <i>some text</i></font></p>
<a href="&" target="_blank" class="fa fa-linkedin" ></a>
<button class="googleBtn">some text</button>
</div>
I am trying to create another button with a different css design but my third button inherits the css design from the first two and looks kinda like them. What can I do about it?
The third button looks like your first two buttons because you did not create a style that is specific to it. Your first rule applies to all of the buttons on the page:
button {
outline: none;
text-align: center;
border-radius:15px 50px 30px;
}
Unlike your second two rules, here you wrote button and not .button. This means that it will select all elements of type button, not all elements that have class="button".
Additionally, if you want your third button (I am assuming that this is the one with class="googleBtn") to look very different, then you must create a style rule that selects it, like so:
.googleBtn {
color: red;
/* replace this with your style rules */
}
Side note: the HTML align attribute, and the <font> element have been deprecated for years. Please do not use this to format your page.
First, you have to declare a CSS rule for .googleBtn with different styles in the rule. Also I noticed that the two rules in your CSS, #layoutBtn and #javaBtn, styles are exactly the same. Instead, you can define one rule for both #layoutBtn and #javaBtn with that style of button and another for .googleBtn.
I'm trying to implement font-size scaling based on width of container (I want my long h1 to be in one line).
Here is my HTML with bootstrap 3:
<div class="someclass">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="responsive-headline">LONG TEXT IS
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</h1>
<ul class="breadcrumbs">
...
</ul>
</div>
</div>
</div>
</div>
CSS styles:
.responsive-headline {
margin: 0px 0px 3px;
color: #fff;
text-transform: uppercase;
font-size: 32px;
letter-spacing: 1.7px;
line-height: 1.4;
}
Ok. Let's start from FitText.js library:
jQuery(document).ready(function($) {
$('.responsive-headline').fitText();
});
Result font-size: 114px;! What?
Add some parameters:
$('h1.responsive-headline').fitText(1.2, { minFontSize: '18px',
maxFontSize: '32px' });
Result font-size: 32px;. Better but not what I want, I need smaller font-size. Also tried to add width: 1000px; display: block; white-space: nowrap; to h1 without success.
Second library that I tried is FlowType.js. Add some code:
jQuery(document).ready(function($) {
$('h1.responsive-headline').flowtype();
});
Result font-size: 32.5714px;. Little bigger than default.
And with parameters:
$('h1.responsive-headline').flowtype({
minFont : 12,
maxFont : 32
});
Result font-size: 32px;.
Why my h1 becomes bigger but not smaller?
Might it be because you are calculating the font-size on (document).ready?
If you're looking for a more dynamic sizing "responsive", maybe try the resize() method?
https://api.jquery.com/resize/
My appologies if im misunderstanding.
I've got some Bootstrap css styling issues on several Kendo TreeView widgets I'm rendering.
Basically, I have a wizard which the user will navigate through, and on one of the pages I'm display two Kendo TreeView widgets. The user will be able to drag items from the left "source" tree onto their own customized data tree.
Right now the datasource is the same, but that doesn't matter.
The important thing is that the sprite folder image on my left navbar tree is getting hidden every time I navigate to my wizard page which contains the dual treeviews.
I'd like to style of the TreeView so it doesn't interfere with another tree widget in my sidebar. The sprite folder icon is getting hidden in my sidebar tree once I click on the "+" icon which changes my page.
Here is the reportmaint.html page which renders when I click on the "+" icon in sidebar.html (see screen image below). Keep in mind that the reportmaint view contains the left and right TreeViews:
<section data-report-wizard id="reportmaint-view" class="mainbar" data-ng-controller="reportmaint as vm">
<section class="matter">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-12">
<div class="widget wlightblue">
<div data-cc-widget-header title="{{vm.wizardStep}}" subtitle="" allow-collapse="true"></div>
<div class="widget-content">
<div class="clearfix">
<!-- Wizard steps 1 thru 4 omiteed for brevity -->
<div id="wizard4" class="reportwizard">
<div class="row-fluid">
<h3>Choose KRIs</h3>
<h4>Selected: {{vm.selectedItem.text}}</h4>
<div class="col-sm-6"> <!-- kendo TreeView widgets -->
<span id="treeview-left" kendo-tree-view="tree"
k-options="vm.treeOptions"
k-datasource="vm.kriDataSource1"
k-on-change="vm.onTreeSelect(kendoEvent)"
</span>
</div>
<div class="col-sm-6">
<span id="treeview-right" kendo-tree-view="tree"
k-options="vm.treeOptions"
k-data-source="vm.kriDataSource2"
k-on-change="vm.onTreeSelect(kendoEvent)">
</span>
</div>
</div>
<div class="buttons">
<button class="goto5" ng-click="vm.wizardStep='Report Dimensions'">Next</button>
<button class="cancel-btn backto3" ng-click="vm.wizardStep='Report Dimensions'">Back</button>
<button class="cancel-btn close-popup">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
css code in reportmaint.html :
<style scoped>
#treeview-left, #treeview-right {
color:#000;
}
.k-textbox {
width: 11.8em;
}
.demo-section {
width: 700px;
}
.reportwizard {
width: 510px;
height: 323px;
margin: 0 auto;
padding: 10px 20px 20px 170px;
}
.reportwizard h3 {
font-weight: normal;
font-size: 1.4em;
border-bottom: 1px solid #ccc;
}
.reportwizard ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.reportwizard li {
margin: 7px 0 0 0;
}
textarea {
vertical-align: top;
}
label {
display: inline-block;
width: 90px;
text-align: right;
}
.required {
font-weight: bold;
}
.accept, .status {
padding-left: 90px;
}
.valid {
color: green;
}
.invalid {
color: red;
}
span.k-tooltip {
margin-left: 6px;
}
</style>
and my sidebar.html with css code which styles the left TreeView "reports" menu :
<div style="float:left;">
<span id="treeview" kendo-tree-view="tree"
k-options="vm.treeOptions"
k-data-source="vm.reportsTree"
k-on-change="vm.onTreeSelect(kendoEvent)">
</span>
</div>
<style scoped>
.k-treeview .k-plus, .k-treeview .k-minus, .k-treeview .k-plus-disabled, .k-treeview .k-minus-disabled {
background-image: url("../../Content/kendo/2014.1.624/Uniform/sprite.png");
background-position: -161px -192px;
width: 10px;
height: 11px;
cursor: pointer;
margin-left:-10px;
}
#treeview_tv_active > div > span.k-icon.k-plus {
background-image: url("../../Content/kendo/2014.1.624/Uniform/sprite.png");
background-position: -176px -192px;
width: 10px;
height: 11px;
}
#treeview_tv_active > div > span.k-icon.k-minus {
background-image:url("../../Content/kendo/2014.1.624/Uniform/sprite.png");
background-position: -177px -211px;
width: 10px;
height: 11px;
}
#treeview {
color: #fff; /* white */
}
</style>
Again, once I click on the "+" sign I navigate to reportmain.html. This is when the sidebar treeview styling inadvertently changes; and the background-image folder icon gets hidden.
thanks.
Bob
I am trying to change jQuery UI dialog's default styles to something similar to this -
I got it to close changing some CSS in jQuery UI.
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
.ui-widget-content {
background: #F9F9F9;
border: 1px solid #90d93f;
color: #222222;
}
.ui-dialog {
left: 0;
outline: 0 none;
padding: 0 !important;
position: absolute;
top: 0;
}
#success {
padding: 0;
margin: 0;
}
.ui-dialog .ui-dialog-content {
background: none repeat scroll 0 0 transparent;
border: 0 none;
overflow: auto;
position: relative;
padding: 0 !important;
}
.ui-widget-header {
background: #b0de78;
border: 0;
color: #fff;
font-weight: normal;
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.1em .5em;
position: relative;
font-size: 1em;
}
HTML :
<div id="popup-msg">
<div id="loading">
<h2>Loading...</h2>
<h3>Please wait a few seconds.</h3>
</div>
<div id="success" title="Hurray,">
<p>User table is updated.</p>
</div>
</div>
THIS IS FIDDLE
But when I add this style its apply to all my dialogs. Can anybody tell me how can I avoid from this problem.
Thank you.
See https://jsfiddle.net/qP8DY/24/
You can add a class (such as "success-dialog" in my example) to div#success, either directly in your HTML, or in your JavaScript by adding to the dialogClass option, as I've done.
$('#success').dialog({
height: 50,
width: 350,
modal: true,
resizable: true,
dialogClass: 'no-close success-dialog'
});
Then just add the success-dialog class to your CSS rules as appropriate. To indicate an element with two (or more) classes applied to it, just write them all together, with no spaces in between. For example:
.ui-dialog.success-dialog {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
You can specify a custom class to the top element of the dialog via the option dialogClass
$("#success").dialog({
...
dialogClass:"myClass",
...
});
Then you can target this class in CSS via .myClass.ui-dialog.
The solution only solves part of the problem, it may let you style the container and contents but doesn't let you change the titlebar. I developed a workaround of sorts but adding an id to the dialog div, then using jQuery .prev to change the style of the div which is the previous sibling of the dialog's div. This works because when jQueryUI creates the dialog, your original div becomes a sibling of the new container, but the title div is a the immediately previous sibling to your original div but neither the container not the title div has an id to simplify selecting the div.
HTML
<button id="dialog1" class="btn btn-danger">Warning</button>
<div title="Nothing here, really" id="nonmodal1">
Nothing here
</div>
You can use CSS to style the main section of the dialog but not the title
.custom-ui-widget-header-warning {
background: #EBCCCC;
font-size: 1em;
}
You need some JS to style the title
$(function() {
$("#nonmodal1").dialog({
minWidth: 400,
minHeight: 'auto',
autoOpen: false,
dialogClass: 'custom-ui-widget-header-warning',
position: {
my: 'center',
at: 'left'
}
});
$("#dialog1").click(function() {
if ($("#nonmodal1").dialog("isOpen") === true) {
$("#nonmodal1").dialog("close");
} else {
$("#nonmodal1").dialog("open").prev().css('background','#D9534F');
}
});
});
The example only shows simple styling (background) but you can make it as complex as you wish.
You can see it in action here:
https://codepen.io/chris-hore/pen/OVMPay