I am trying to use dijit.InlineEditBox.
I have put the following code in my HTML, using the example in the dojo docs:
<script type="text/javascript">
dojo.require("dijit.InlineEditBox");
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
function editableHeaderOnChange(id, arg){
alert("details changed with id " + id + " and arguments "+arg);
}
</script>
...
<span id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])"
autoSave="true" title="My Text">click to edit me</span>
I am using tundra theme.
It works, however it doesn't look so good. The widget has its own style, which doesn't fit my CSS.
I used firebug to locate the source of the problem. The widget creates many nested div/span elements, each has it's own style (element style in firebug):
<span
id="dijit__InlineEditor_0"
class="dijitReset dijitInline"
style="margin: 0px; position: absolute; visibility: hidden; display: block; opacity: 0;" ...>
<input type="text" autocomplete="off"
class="dijit dijitReset dijitLeft dijitTextBox"
id="dijit_form_TextBox_0"
style="line-height: 20px; font-weight: 400; font-family: Trebuchet MS,Helvetica,Arial,Verdana; font-size: 14.5167px; font-style: normal; width: 100%;">
...>
</span></span>
(showing only the relevant parts...)
to get the visual that I want, which will not break to a newline,
I need to change the width of dijit_form_TextBox_0** to 50%, and the positioning of dijit__InlineEditor_0 to
display: inline**;
or to change the positioning of everything (most of my layout is floated, so position: absolute doesn't fit)
I cannot address those span elements in my css to change the properties, because the element.style has priority, of course.
I don't understand the logic in this system...
why is dijit generating the style directly inside the element?
how can I change these properties?
Thanks
Tom
This will give you everything you need to create your own theme, just like Tundra.
http://docs.dojocampus.org/dijit-themes
Added:
Dijit will try to use your inline styles like width and height to determine the proper settings for its own internal elements. So you can write
<span style="width:200px" id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])" autoSave="true" title="My Text">click to edit me</span>
and see if it works. Not sure about stuff like fonts and line-heights, that sounds like it should be up to the theme. Maybe it copies those into inline styles, for whatever reason. Just try changing it and see what happens.
I'm not an expert on the logic of things either. I've dabbles a couple of times with it with some success. All I can tell you is it's not impossible. Sorry for the poor help.
Related
I'm having some difficulties styling mdl-textfield.
Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field.
Effectively, this is my starting point, as taken from the component list.
https://jsfiddle.net/2aznyc4n/1/
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
I am able to set the size and color of the floating label by adding into the label in the html
style="font-size:x-large; color:purple"
So is it some kind of bug that this has no effect when the label goes floating, if this is set in the css? If I set the style in the html and the css, then both of them suddenly has an effect. I just cant wrap my head around this.
If all possible, I want to avoid having styling in my html.
I have been digging through the source code, with no success in figuring out the styling of the mdl-js-textfield color and height.
Customization of MDL is a little bit tedious. At the beginning you can choose your primary and accent color and have a set of useful and beautiful componets, but when you need customize something a little bit, difficulties come out.
I digged for MDL source code in order to find what classes added color and font-size styling. I solved the need to adjust color and font-size of input text floating adding this hacking code in my css.
.mdl-textfield{ input[type="text"]{ font-size: 24px; color: #color500;} }
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
font-size: 14px;
top: -5px; //Manages floating label fly
}
.mdl-textfield__label{ font-size: 24px; top: 20px; color: #color500;}
Normally the customization should be done with the custom CSS theme builde.
But if you prefer to use your own css you should use !important.
.mdl-textfield__input {
color: black !important;
}
For the pleaceholder text you need to use vendor prefix CSS:
::-moz-placeholder { /* Firefox 19+ */
color: red !important;
}
::-webkit-input-placeholder {
color: red;
}
I really struggled lots specifically with the bottom-border-color after the animation but thankfully after some research I could deduct a solution mentioned over here (it's prohibited to duplicate answers, so I rather put a direct link to it):
https://stackoverflow.com/a/43512625/1920145
Hope it helps many more people.
http://codepen.io/anon/pen/KwKOaz
Changing only the background-color significantly changes the style on a button element, specifically the border style.
This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.
Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.
When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.
Also note, that styling control elements, though works, not covered by stable standards yet.
For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.
Sometimes CSS styles are inherited. However, you are applying styles to your body which is everything in HTML. Personally I don't apply anything to body other than maybe reset or normalize CSS. That said, you can use CSS selector operators and\or id/classes to minimize:
http://www.w3schools.com/cssref/css_selectors.asp
Example:
html
btw don't write html like this just easier to read
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
css
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
I'm using Bootstrap's btn-mini class for "mini" buttons and am looking for something analogous to create a "mini" select element, where the select button (i.e. the part you click to show the list of options, not the list of options itself) is the same size and style as a mini button.
When I apply the btn-mini class to a select element, the font style of the select button is the same size as a mini button, but the size of the select button itself is unchanged from the default size.
Is there a different Bootstrap class I should use? Or another way to do it?
P.S. I'm working on OS X Chrome, but naturally hope there is a cross-browser compatible solution.
Just in case any Bootstrap 3 users come across this old question, here's the BS3 way:
<select class="form-control input-lg"></select>
<select class="form-control"></select>
<select class="form-control input-sm"></select>
<input class="form-control input-lg">
<input class="form-control">
<input class="form-control input-sm">
There is no input-xs, though, so you'd have to make that yourself if you wanted smaller.
.input-xs, select.input-xs {
height: 20px;
line-height: 20px;
}
HTML
<select class="btn btn-mini">
<!-- options -->
</select>
<span class="caret"></span>
CSS
select.btn-mini {
height: auto;
line-height: 14px;
}
/* this is optional (see below) */
select.btn {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding-right: 16px;
}
select.btn-mini + .caret {
margin-left: -20px;
margin-top: 9px;
}
The last 2 rules are optional, it will make <select> look like <button>, I've also added a caret to it. See this fiddle.
For Bootstrap 4, to set height we can use form-control-sm class with form-control.
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
<select class="form-control">
<option>Default select</option>
</select>
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
And to set width of these we have to use grid column classes like .col-sm-*, .col-md-*, .col-lg-*, etc.
So put the select code in:
<div class="row">
<div class="col-md-3">
... select tag code ...
</div>
</div>
and it will look like this:
You can call the last one a "mini" select element.
This is not a final answer, but I wanted to share what I've gotten so far for anyone else curious about doing this.
As suggested by jackwanders, I've gone ahead and created a custom CSS class:
.select-mini {
font-size: 11px;
height: 20px;
width: 100px;
}
This font-size and height rules more or less get the select box to be the same size as a mini button, but the text isn't quite aligned in the same way (it's slightly shifted up). Note you need to use height not line-height to override a height rule for select elements that Bootstrap sets elsewhere. (The width rule is just to change the widget and can be whatever you want.)
My CSS-fu isn't good enough to quickly make the mini select look fully consistent with the mini buttons, and from what I can see select's behave oddly when it comes to CSS anyhow, but hopefully this will be helpful as a start to others. Meanwhile, still open to better answers!
Based on btn-xs class I've prepared this:
.input-xs{
height: 20px;
line-height: 1.5;
font-size: 12px;
padding: 1px 5px;
border-radius: 3px;
}
Note that width is not limited!
Please check this fiddle to see it in action.
Pavlo answer is better. But when mouse cursor is over caret click doenst` work. Just one thing must be added into caret class to fix it:
select.btn-mini + .caret {
margin-left: -14px;
margin-top: 19px;
pointer-events: none;
}
So it's detailed here on how to remove the padding on buttons by overriding the class on the page: Can the button padding be adjusted in Jquery Mobile?
But how do I take this:
.ui-btn-inner {
padding: 0;}
And selectively apply it to one button, ie:
<button data-icon="false" onclick="alert('clicked me')">Button Name</button>
Doing anything like this doesn't work:
<button style="padding:0" data-icon="false" onclick="alert('clicked me')">Button Name</button>
Thoughts? Creative solutions?
Thanks
Just set a new class for that button and then change subclass as below.
HTML:
<a href"#" data-role="button" class="myClass">Text</a>
CSS:
.myClass .ui-btn-inner{
padding: 0px;
}
I think I have finally found a solution (been trying to figure it out for a while now)!
Use the 'cascading' part of CSS to help you. If your button uses theme 'a' for instance, you can apply the padding rules of .ui-btn-inner to only buttons with theme 'a'. Just prefix the class you are trying to change, with the themed property.
HTML:
<a href"#/mypath" data-role="button" data-theme="a">Touch Me</a>
CSS:
.ui-btn-up-a .ui-btn-inner,
.ui-btn-hover-a .ui-btn-inner,
.ui-btn-down-a .ui-btn-inner
{
padding: 0px;
}
As you can see, this means you have to create the rule for each state of the button, otherwise the padding will return for the split second when you touch the button.
Just apply a different theme (such as 'b') to the buttons that should keep their padding. You can go totally nuts with buttons using this type of CSS inheritance.
You can have an unlimited number of themes. I go to theme roller and create a default theme for every letter of the alphabet. Then, just override them with CSS to my heart's content.
This was a big sticking point when I was trying to use jQuery Mobile for a work project. They already had a UI design and I was tasked with making jQuery Mobile match it exactly.
I just wanted the icon to show with no border or background so I used your example, but the icon was shifted up so I used this to reposition it:
.ui-btn-up-mytheme .ui-btn-inner,
.ui-btn-hover-mytheme .ui-btn-inner,
.ui-btn-down-mytheme .ui-btn-inner {
margin-top: 2px;
border: none;
}
The html markup:
<a href="schedules" data-rel="back" data-icon="arrow-l" data-iconpos="notext"
data-theme="mytheme" data-shadow="false" ></a>
I'm transitioning a website from plain html to ASP.Net.
I have two forms in the website frmRegister and frmLogin
I have css for the each of these like this...
form#frmRegister .floatRight input{
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
border: 1px solid #a1d19d;
font-weight: normal;
}
form#frmRegister .textRow input, form#frmRegister .textRow textarea, form#frmLogin .textRow input, form#frmLogin .textRow textarea, form#frmRegister .textRow select{
width: 90%;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
border: 1px solid #a1d19d;
}
but because asp renames the forms to aspNetform, the styles are not applied.
I tried adding aspNetform to the css but then every form gets given the same style.
I'm using master pages btw.
Don't style your CSS by ID. Use CSS classes instead.
<form id="myForm" runat="Server" class="someClass">
in css:
.someClass {background-color: blue; color:red; }
Although technically, I've never applied css to a form, so I'm not 100% sure the above will work. If I need to do that, I nest a div within the form, and apply the style to the div. So I'd change
<form id="myForm" runat="Server" class="someClass">
...
</form>
to
<form id="myForm" runat="Server" >
<div class="someClass">
...
</div>
</form>
Try giving the style based on the class name, instead of the ID.
I don't work with web forms, so there may be a better solution, but you could just address your forms via CSS classes rather than ids.
E.g., add a class frmRegister to that form tag, and then address it in CSS like this:
form.frmRegister .floatRight input{ width: 100%;
....
Have you tried the ClientID property of your controls?
Also on your css you can do something like:
form#<%=myControl.ClientID%>{
/* css in here */
}
Yes, forms represent a special element in a webforms app. Better to just define a class and apply that to your form, or even putting a div within the form and styling that.
Also, one big advantage over regular HTML is that you can stick all this in a master page. This way, you can tweak your overall page layout only in one place (the master page) and have those changes reflected on every page.
Are you embedding the styles in the pages/master page or is it in an external file? If you add the styles to the master page it will affect all of its child pages.