I'm trying to implement a navigation toolbar down the left side of my application with rotated buttons. When I rotate the buttons using css transform:rotate, border container still does all of its layout calculations as if the buttons were not rotated so they end up overlapping and in the wrong position vertically. Before I dig into understanding the dijit/layout/utils module well enough to solve this, I'm wondering if anyone already has a solution I'm just not seeing.
Thanks!
Fiddle here http://jsfiddle.net/eric_isakson/2bkKk/6/
JavaScript:
require(["dojo/_base/window", "dijit/Toolbar", "dijit/form/Button", "dijit/layout/BorderContainer"], function(win, Toolbar, Button, BorderContainer) {
var bc = new BorderContainer();
bc.placeAt(win.body(), "last");
var tb = new Toolbar({region: "leading"});
bc.addChild(tb);
var b1 = new Button({label: "button1"});
tb.addChild(b1);
var b2 = new Button({label: "button2"});
tb.addChild(b2);
bc.startup();
tb.startup();
b1.startup();
b2.startup();
});
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}
.dijitBorderContainer {
width: 100%;
height: 100%;
}
.dijitButton {
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
display: block;
}
Here is the desired appearance:
If i understand you right, you want your Buttons horizontal?
Then you only need to delete the rows for the rotation.
.dijitButton {
display: block;
}
Regards, Miriam
Related
How do I make the ion-menu-button (hamburger menu button) larger?
The ion-menu-button component creates an ion-icon with font-size set to 26px. There is no attribute to set size and CSS seems to have no impact.
[UPDATE]
I reported this as a bug to the Ionic team and they "fixed" it here: https://github.com/ionic-team/ionic/issues/18667 although i still don't see how to modify the size.
setting:
ion-icon {
--font-size: 100px !important;
font-size: 70px;
}
does nothing
Sorted it out on my own. There was a
.sc-ion-buttons-md-h {
display: flew;
}
wrapper that was limiting the size of the button. Once i removed that:
.sc-ion-buttons-md-h {
display: block !important;
}
and used ion-grid to place button on the left side of my header, i could then use:
ion-menu-button {
font-size: 50px !important;
}
to set the size of my menu button.
I've got an inline-block element that contains a very long word. When I resize the viewport until I reach the breakpoint of the text wrapping to the next line, I get a substantial amount of space. However, I would like the inline-block element to wrap immediately to the width of its contents.
I found it hard to explain exactly what's going on, so below an animated gif to illustrate my issue:
Upon resizing the viewport:
To be clear, the image above is me continuously resizing the viewport.
Does anybody know a way to achieve what I'd like? Even with CSS hyphenation the white-space still remains (which I don't want).
JSFiddle. Resize the frames to see what I mean.
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
The inline-block indeed extends on resizing as your animation shows, so that it keeps place for the long word to go into that space again.
One simple solution would be to add text-align: justify, but I'm afraid it may not exactly be what you want (see demo).
Another one would be the use of media queries, as #Parody suggested, but you would have to know the dimentions of the containing div, and that would not be very scalable as you mentionned.
The word-break: break-all suggested by #yugi also works but causes the words to to collapse letter by letter, regardless of their length.
The only way to achieve the exact behavior is (as far as I know) to use javascript. For example, you would have to wrap your text into a span element inside the div, and then add something like this :
var paddingLeft = parseInt($('#foo').css('padding-left')),
paddingRight = parseInt($('#foo').css('padding-left')),
paddingTop = parseInt($('#foo').css('padding-top')),
paddingBottom = parseInt($('#foo').css('padding-Bottom')),
cloned = $('#foo span').clone(),
cloned_wrap = document.createElement('div');
$(cloned_wrap).css({
paddingLeft : paddingLeft,
paddingRight : paddingRight,
display : 'inline-block',
visibility: 'hidden',
float: 'left',
});
$(cloned_wrap).insertAfter('#foo');
cloned.appendTo(cloned_wrap);
$(window).on('resize', function(){
$('#foo').css('width', cloned.width() + 1);
$(cloned_wrap).css('margin-top',- $('#foo').height() - paddingTop - paddingBottom);
}).resize();
Please see the jsfiddle working demo. (← edited many times)
That's quite a lot of code, but it works ; )
(PS : I assumed jquery was available, if not, quite the same is achievable in pure JS)
I don't think this is possible only with CSS for the one element. The reason for your behavior is that the width of the element is still 100% of its container. The only way I could think to accomplish this is by doing something a little bit "creative"...try setting the style to inline so you get the shrink-wrap behavior, but to get around the background color issue, also put it in a container that shares the same background. That should work.
If im understanding you correctly you could use the #media type to decide what css to use depending on the width of the screen
here is an example of what i mean
#media(min-width:0px) and (max-width:200px){
div {
display: block;
background-color: black;
color: white;
padding: 5px;
}
}
#media (min-width:200px){
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
}
I am still very appreciative of #lapin's answer (which I accepted and awarded bounty to), I found out after the fact that it didn't quite work on multiple elements next to each other (that has nothing to do with #lapin, I just didn't mention it in my original question as I thought it would be irrelevant information).
Anyway, I've come up with the following that works for me (assuming the elements it should be applied to are .title and .subtitle):
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $(document.createElement('span')),
bar = $(document.createElement('span'));
inner.addClass('inner');
bar.addClass('bar');
el.wrapInner(inner)
.append(bar)
.css({
backgroundColor: 'transparent'
});
});
function shrinkWrap() {
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $('.inner', el),
bar = $('.bar', el),
innerWidth = inner.width();
bar.css({
bottom: 0,
width: innerWidth + parseFloat(el.css('paddingLeft')) + parseFloat(el.css('paddingRight'))
});
});
}
shrinkWrap();
$(window).on('resize', function() {
shrinkWrap();
});
Basically what I do is:
put the text in an inner wrap element
create an additional absolutely-positioned background element
get the width of the inline inner wrap element
apply said width to the background element (plus padding and whatnot)
The CSS:
.title, .subtitle {
position: relative;
z-index: 500;
display: table;
padding-left: 10px;
margin-right: 10px;
background-color: red;
}
.title .bar, .subtitle .bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: -10;
background-color: red;
}
Bootstrap 3:
I'm trying to float a button center halfway outside the panel-footer. But the whole layout is responsive so I need to have it when the screen size is resized or smaller it is still correct.
I created a bootply with my attempt that is close but doesn't stay when the screen is resized.
Thanks,
Nate
Bootply Trial
Is this what you wanted to get? http://www.bootply.com/114327
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.bottom-btn {
left: 50%;
bottom: -17px; /* half of the button height */
margin-left: -77px; /* half of the button width */
/* instead of bottom and margin-left, you can use translateX as well. */
}
play with css position property and use margin to get exact position. see the comments for the .bottom-btn class.
Please refer to the image below:
It's cutting off some of the table data because of the width. My table width is more than 1000 px. I know The default document size for ABCpdf is 612 by 792.
Using the code below to set document width and height
double w = doc.MediaBox.Width;
double h = doc.MediaBox.Height;
double l = doc.MediaBox.Left;
double b = doc.MediaBox.Bottom;
doc.Transform.Rotate(90, l, b);
doc.Transform.Translate(w, 0);
doc.Rect.Width = h;
doc.Rect.Height = w;
I want to display all tabular data. Do I need to modify my table size? Or do I need to modify the document page size of the pdf?
How could i resolve this issue?
Thanks,
Siva
After reviewing the HTML, I think that I can give you a few tips on how to resolve your issue:
1- Use the Gecko Engine for PDF Rendering:
doc.HtmlOptions.Engine = WebSupergoo.ABCpdf9.EngineType.Gecko;
The Gecko Engine provides better Css compliance when rendering in ABCPdf.
2- In your Css you have overflow-x set to scroll for the inner-container. This causing the behavior that you are seeing. I would add the following Css to the bottom of the Css:
#media print
{
.outer-container {
background-color: #ccc;
position: absolute;
top:0;
left: 0;
right: 300px;
bottom:40px;
overflow: visible;
width: 100%;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;
overflow-x: visible;
}
table
{
width: 100%;
}
}
Notice the #media print which makes the css only effective during print and would not affect that way it shows on the screen.
3- Finally, you can try playing with the browser width:
doc.HtmlOptions.BrowserWidth = 1200;
The only problem with the BrowserWidth property is that it will affect the zoom on the document. All the text fonts will appear smaller.
Good luck...
You haven't specified if you are converting an HTML page to PDF- but I assume you are. If that is the case, have you looked at the browser width property? Look into the XHTMLOptions object properties- it will help you fine tune the rendering:
http://www.websupergoo.com/helppdfnet/source/5-abcpdf/xhtmloptions/
Well, my application requires me to disable the entire grid , on a button click.
I tried to use
var grid = dijit.byId('myGrid');
grid .set('disabled',true); , but it's not working.
I basically need to 'grey out' all the contents of the grid , so that the user cannot select any row. Thus, just changing the CSS doesn't help me.
Please reply.
Thanks,
Sonia
I actually don't know, but I have a rather ghastly way to do it myself. I create a partly transparent overlay over the grid when it's disabled.
So I'll have this CSS:
.gridOverlay {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
z-index: 99;
display: none;
background: rgba(0,0,0,0.02);
}
.disabledGrid { color: #DDD; }
.disabledGrid .gridOverlay { display: block; }
And my button's click event will be something like this:
dojo.connect(dojo.byId("btn"), "onclick", function()
{
//dojo.byId, not dijit.byId, to get the outer DOM node
var grid = dojo.byId("myGrid");
if(!dojo.query(".gridOverlay", grid).length)
{
dojo.create("div", {"class": "gridOverlay"}, grid);
}
dojo.toggleClass(grid, "disabledGrid");
});
Like I said, ghastly, but for my use it actually did the trick. YMMV :)