I am trying to find a way to display the checkbox and some text to the right properly. The default way the MVC View lays them out puts the checkbox below the label / text. So I tried to get them on the same line with this simplified code, but the text still rides up about half a line above the checkbox. How can you display a checkbox and some text to the right of the checkbox on the same line with proper vertical alignment for the text on the right? Thank you!
<div>
#Html.EditorFor(model => model.DriverDBARequired) Driver DBA Required
</div>
This must be a CSS issue. The standard site.css might cause that behavior:
label {
**display: block;**
font-size: 1.2em;
font-weight: 600;
}
If you change it to
display: inline
it should work. The following lines in the standard site.css can help you too:
label.checkbox {
display: inline;
}
Write your checkbox like something as:
<label class="checkbox">#Html.CheckBox("MyName", false) My text</label>
Related
I would like to customize typeahead / bloodhound's display of the results list by adding a clickable font awesome icon. The use case is to allow users to initiate editing of one of the result items, rather than selecting it.
Is this possible?
I have added this suggestion template:
suggestion: function(el){
return '<div><strong>' + el.value + '</strong>' +
'<span style=display:inline-block; float:right;">
<i class="fa fa-minus-circle"></i><span></div>'},
}
This displays the icon and makes it clickable, but the icon is displayed right next to the el.value.
The answer is to not use inline styles, instead add a new class definition:
.tt-suggestion span {
display: : inline-block;
float: right;
}
and the icon is displayed correctly, aligned at the end of the suggestion row.
Ok, this will probably be simple to resolve, but I am a graphic designer & not a developer so wondering if someone can help me out. I have played around with positions but not such luck.
So I have a header div with a backgroud image within it, but when I preview the html/css on ebay the background image within this div appears at the top of the browser (conflicting with the ebay standard header) & not being positioned relative to the container div it is placed in. So basically the bg image is outside the div. I need it to be contained with the div I want it in.
Any help would be appreciated. (This may be a repetitive topic, so sorry about that)
Code:
<div id="HeaderContainer">
<div id="BGHeader"></div>
</div>
#HeaderContainer{
position:relative;
}
#BGHeader {
position:absolute;
top:0;
height:420px;
width:100%;
background-image:url(imagehere.jpg);
background-repeat:repeat-x;
}
You should post your html and css. At least the relevant parts. But having not seen them I would say my best guess is you're using absolute positioning on the header.
You need to wrap that in another element that's relative positioned.
<div id="container">
<header>header here</header>
</div>
where your css is like so:
#container{
position:relative;
}
header{
position:absolute;
top:0;
left:0;
}
If I'm wrong about your needs or situation let me know and I can update.
I have a templated custom widget that inherits from dijit.layout._LayoutWidget, dijit._Container, and dijit._Templated which gives my widget native Widget support for resizing, etc. All I need is a TabContainer, which is sized to the size of widget. Here is my widget.
<div dojoAttachPoint="containerNode">
<div dojoType="dijit.layout.TabContainer" tabPosition="top" style="width:100%;height:100%" >
<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">
hello
</div>
</div>
</div>
Everything looks fine but I get a weird TabList.
I looked into the problem. All the pieces of the widget and TabContainer have the correct width and height values. Only The tablist has a loooong width (50'000 something pixels wide): I have read about similar issues such as this one: http://bugs.dojotoolkit.org/ticket/10495, but in my case all the elements have correct width and length. I have no idea how does tablist get this long width.
I have also tried many ways of adding and removing style="width:100%;height:100;" for the parent container and its parents. But none of the configurations fixed the problem.
Is there a way to fix this problem?
Just in case someone is looking for the solution, I had the same problem, and came to this question. Though I looked at the bug reports, it didn't apply in my case, I was not embedding tabcontainer inside table or setting doLayout to false. I tried setting tabcontroller but that didn't work either. Finally after debuggin, turns out you have to provide 'resize' method in your widget and resize tabcontainer inside it in the following way
widgetTemplate = '... ' + //Our tabcontainer declaration
'<div dojoAttachPoint="containerNode">' +
'<div dojoAttachPoint="widgetTab" dojoType="dijit.layout.TabContainer"' + 'style="width:100%;height:100%" >' +
'<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">hello</div></div></div>' +
'...' //Rest Of template declaration
//Since we are embedding widget inside template we need _WidgetsInTemplateMixin
dojo.declare("MyWidget", [dijit._Widget, dijit._TemplatedMixin,dijit._WidgetsInTemplateMixin], {
templateString: widgetTemplate,
.... //Rest of functions
resize: function(){
this.containerNode.widgetTab.resize() //Resize tabcontainer
}
});
Hope this helps
Try to add attribute to your TabContainer:
<div dojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController" ... >
http://bugs.dojotoolkit.org/ticket/10113#comment:11
Just rewrite your css like this:
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 30px !important;
}
#-moz-document url-prefix() {
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 31px !important;
}
}
If you want to remove the first one : "useMenu : false"
If you want to remove the second and the third : "useSlider : false"
I am trying to show a component,
<div dojoType="dojox.layout.TableContainer" cols="2" labelWidth="50%" colspan=2 id="durationPane" style="display: none;margin-left: 9px;" showLabels=false>
<div dojoType="dijit.form.DateTextBox" required="true" onChange="var x=arguments[0];x.setDate(x.getDate()+1);dijit.byId('toDate').constraints.min = x;" constraints="{datePattern:'MMM dd yyyy'}" label=" From Date :" id="fromDate" placeHolder="From Date" style="margin-bottom: 50px"></div>
<div dojoType="dijit.form.DateTextBox" require="true" onChange="var x=arguments[0];x.setDate(x.getDate()-1);dijit.byId('fromDate').constraints.max =x;" constraints="{datePattern:'MMM dd yyyy'}" label="To Date :" id="toDate" placeHolder="To Date" name="vpnReport._toDate" ></div>
</div>
dijit.byId('durationPane').show();
But it's not showing.
This is a recurring problem with some Dojo "animation" effects such as show, hide, wipeIn, wipeOut, etc. For some reason, if you want page elements to start hidden, so you can show them latter, you cannot initialize them with "display: none" or "visibility: hidden" in the CSS.
Three different workarounds (all of which imply you do not have "display:none" set in the "durationPane" style):
Add the following CSS to the duration pane: position: absolute; left: -999em; then, when you call .show(), also set style to left:0 - you only need to this the first time you call show, because on the next .hide() / .show(), everything works well. This is probably the worst solution because you have to make your element absolute, which can be messy.
Start with the element visible, and then hide it onload, e.g.
dojo.ready(function() { dijit.byId('durationPane').hide(); });
Start with the element visible, and the add the display:none also onload, e.g.
dojo.style('durationPane', { 'display' : 'none' });
This will do what you want. If anyone out there knows why Dojo has this strange behavior, and if there is a more elegant way to fix this problem, please let us know...
There is some drawbacks using textarea and input-text as input of text forms. textarea has a little annoying triangle in right-lower corner and input-text is a single-line input.
I try to have a input of text like the facebook update input form. The input auto resize after linebreaks. And the element or tag used was <div>. I said "used" because, after they redesigned Facebook, I can't figure-out which tag is used now. There is CSS property that enables the user to edit the text in a div element. I actually copied the CSS property, but now I lost it. Can someone tell me which CSS property it was? I have a weak memory that it began with the -webkit prefix though
If you use html5 you can use:
<div id="divThatYouCanWriteStuffIn" contenteditable>
<!-- you can write in here -->
</div>
If you couple this with the css:
#divThatYouCanWriteStuffIn {
min-height: 4em; /* it should resize as required from this minimum height */
}
To get rid of the 'annoying little triangle' in textareas:
textarea {
resize: none;
}
JS Fiddle demo of both ideas.
I know you can do this in javascript by doing getElementByID('mydiv').contentEditable='true';, but I do not know how this would be done in CSS
The Facebook update input field is a TEXTAREA element. The trick is to use the resize property:
textarea { resize:none; }
That will make the triangle disappear.
You should be able to add your style to a textarea like you do with tags like p, h1, h2 etc..
So you can target all textareas or ones with specific classes or ids on them
Example:
textarea {
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
line-height:140%;
color:black;
margin:0 0 5px 5px;
padding:5px;
background-color:#999999;
border:1px solid black;
}
This example will target all textareas on the page.
Change textarea to .nameOfClass or #nameOfId if you want to target a class or an id.
Hope this helps.