I have this piece of code:
<div dojoType="dijit.layout.ContentPane" style="width:200px;margin:0;padding:0;" doLayout="true"> <button dojoType="dijit.form.Button" style="width:100%;" doLayout="true"><span style="width:200px;"> </span></button></div>
I think it is clear what I try to do.
Do you know how I could make the button take 100% of it's container's width?
Thank you.
Alright,
I got the answer at an IBM's forum, someone told me to override the dijit style:
.dijitButtonNode{
width:100%;
}
and that did the job
:-)
if you need to change the width for a single instance, changing the CSS class wouldn't be a good idea... you can make it programmatically by applying the style to the domNode of your widget... like myButtom.domNode.style.width = "100%";
if sticking with declaration, add a specifier class:
<button data-dojo-type="dijit/form/Button" type="button" class="myButtons"></button>
then, in css:
.myButtons .dijitButtonNode
{
width:100%;
}
Related
When I try add badge on mat-button-toggle-group only half of it is displayed.
please find the following
<mat-button-toggle-group #filtergroup="matButtonToggleGroup" value="myCase">
<mat-button-toggle value="myCase" matBadge="8" matBadgePosition="after">
My Cases
</mat-button-toggle>
<mat-button-toggle>
My Team
</mat-button-toggle>
</mat-button-toggle-group>
https://stackblitz.com/angular/emrqojllmka?file=app%2Fbadge-overview-example.html
How can I make it display in a right way?
To avoid the cut-off you will need to override the overflow property on mat-button-toggle-group:
<mat-button-toggle-group #filtergroup="matButtonToggleGroup" value="myCase" style="overflow:visible">
However, the badge will still be overlapped by the adjacent button toggle. To get around that you need to raise the z-index of the badge class:
.mat-badge-content {
z-index: 1;
}
G. Tranter's answer worked perfectly with the exception that the CSS had to use ng-deep
:host ::ng-deep .custom-mat-badge {
.mat-badge-content {
z-index: 1;
}
}
You can use *ngIf="toggleValue" and also specify the css class you are using.
I have a situation where I need to access a div which is dynamically generated by jQuery mobile.
How can I access this using CSS ? I need to change UI of the inside div.
Following is the HTML structure.
<div id="myCreatedDiv">
<div class="jQueryMobileCreatedDiv">
/* I need to access this div */
</div>
</div>
Note: Above structure I found in chrome's element inspector
My original code is as follows
<div id="one" class="myDiv" ui-body-d ui-content">
<input name="anyName" id="jQueryTextBox"/>
</div>
It would be very helpful if anyone can help me for the same.
Thanks in advance!
You can acces div inside .jQueryMobileCreatedDiv is like this:
var divInside = $('.jQueryMobileCreatedDiv').children("div");
Use this CSS selector:
#myCreatedDiv > div { /* Your CSS here */ }
You can use it.
$('#myCreatedDiv').find('#one');
or
$('.jQueryMobileCreatedDiv').parents('#myCreatedDiv').find('#one');
You can use the class of the generated div
#myCreatedDiv > .jQueryMobileCreatedDiv {
}
How can I use the attribute expanded when I style it using CSS?
I got a dropdown which is
expanded="false"
and when it's open it becomes
expanded="true".
There is no class so I was wondering if I can use that attribute for styling?
Thanks
div[ expanded="true"]{
color:red;
}
<div expanded="true">huujioujo</div>
Yes, you should be able to:
div[expanded=true] { color: red; }
However, there isn't a expanded HTML attribute that I know of? It would be better to just add the class .expanded instead of using expanded="true".
I've got a problem when using scriptaculous Effect.Appear() as a menu option, I wanted to create a flash-like menu but with pure css and scriptaculous.
I've got my desired outcome which is when I hover over a box, a text (with display: none;) appear above it and the box changes height and background color. Now the problem is that when my mouse move extremely fast and crazy over the box, the text remains (as if it was selected).
What I want is that as I hover the text appear, and if my mouse of out, the text disappear.
My codes
function ShowEffect(element){
new Effect.Appear(element,
{duration:0.3, from:0, to:1.0, queue: 'front'});
}
function HideEffect(element){
new Effect.Appear(element,
{duration:0.2, from:1.0, to:0, queue: 'end'});
}
The Divs
<div class="lefty" style="width: 90px; margin-right: 2px;">
<div style="display: none;" id="clicker2text">ABOUT US</div>
<div style="width: 90px;" onmouseover="ShowEffect('clicker2text')" onmouseout="HideEffect('clicker2text')"></div>
</div>
Any help is appreciated :)
Instead of using the onmouseover attribute on the div use an event observer like this
$$('.lefty').invoke('observe','mouseover',ShowEffect);
$$('.lefty').invoke('observe','mouseout',HideEffect);
But I think this will work better as you are watching for the events that bubble up to body and then acting on it if is the right element.
$$('body').first().observe('mouseover',function(e){
if(e.findElement().hasClass('lefty'))
{
ShowEffect(e.findElement());
}
else
{
//trigger for all of the menus just to make sure the are hidden
//instead of stuck on
$$('.lefty').each(function(element){
if(element.visible())
{
HideEffect();
}
});
}
});
This should give you some ideas - see if it solves your problem.
I have code that looks like this:
<h4 class="tableTotals">Total Selected: R<div id="bankTotal">##,##</div></h4>
The output that I want should all be in ONE line but as it turns out the div tags displays it's content in a new line, which I don't exactly want. So the output looks like this:
Total Selected: R
##,##
When I actually want it to display like this:
Total Selected: R##,##
Does anybody know how to stop the div displaying on a new line?
Thank for any push in the right direction!
Use <span> instead of <div>
div is a block element, and h4 is a header meant for single line.
Style your div to be displayed as inline-block
#bankTotal { display: inline-block; }
Demo
Using inline-block does not have to chang the div completely into as inline element just like span . Furthermore, you can still have block properties.
<div> is a block element and will put a return before and after the <div>
You should use instead.
<h4 class="tableTotals">Total Selected: R<span id="bankTotal">##,##</span></h4>
Using CSS:
#bankTotal{
display:inline;
}
div displaying on a new line ?
<div id="bankTotal" style="display:inline">##,##</div>
or
<div id="bankTotal" style="float:left">##,##</div>
but better :
<span id="bankTotal" >##,##</span >
display:inline property of css for displaying the div "inline",
or u could use <span> tag instead of <div> tag ..
<h4 class="tableTotals" style="display:inline;">Total Selected: R<div id="bankTotal" style="float:left;">##,##</div></h4>
Here I have added a style to position the DIV manually to where you want it to be. Please note that I didn't put it in its exact position so just fiddle with the margin PX.
<h4 class="tableTotals">Total Selected: R<div id="bankTotal" style="margin-left:50px;margin-top:-10px;">##,##</div></h4>