If the menuitem text is a big string, the menuitem becomes too wide and don't look much good.
For example
<div dojoType="dijit/Menu">
<div data-dojo-type="dijit/MenuItem">
A Big String as Menu item. The menuitem looks ugly as it becomes too wide.
</div>
</div>
Is it possible to set a fixed width to the menuitem and the text wraps automatically ?
You could set a max-width and normal whitespace wrap on .dijitMenuItemLabel Setting them on .dijitMenuItem won't work.
.dijitMenuItemLabel {
max-width: 100px;
white-space: normal;
}
Since you said that long buttons are really ugly, i'm wondering how you feel about a menu that has buttons with different heights. I'm thinking that won't work as wel, but that's for you to decide.
Related
I have a textfield and a button on the same row.
I would like the textfield to take up all available space, and the button to only take up space in relation to the text on the button.
Visually I can solve this by putting the button in column 12.
However this only works when the browser is in fullscreen, as resizing the browser shrinks the button.
Is there any way to stretch the textfield to fill all available space (as in picture 1) without putting the button in column 12, so that the button doesn't shrink when resizing the browser?
Yeah, you can do it, check the example
.wrapper
{
display: flex;
}
input {
flex: 1 1 auto;
}
<div class="wrapper">
<input />
<button>confirm</button>
</div>
While justify-content creates space between the elements, flex expands the elements so they take all the space. The flex: 1 1 auto is the great choice for the forms like here because it doesn't change the size of the button, but the input.
Here is deeper explanation if you need:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
and one more for even deeper understanding:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
I have a button with a flexible width. I would like to let the text wrap to 2 lines to keep the button's width as small as possible. Below are some examples.
Short words should still be wrapped to 2 lines to keep the button width small:
My
Button
A long description should wrap to the smallest resulting width:
My button with
very long text
A long word should just stay on one line, and the button will be larger:
Abcdefghijklmnopqrstuvwxyz
I've only managed to make the button wrap if I give it a width, but I want the width to be flexible. Is that possible?
My last resort would be to parse the text with js and add a <br> element, but if a more elegant CSS solution exists I would prefer that.
Yeah you can do it like this:
index.html:
<button>
Hello world!
</button>
style.css
button {
width: min-content;
padding: 1rem 2rem;
}
index.html:
<button>
Hello world! #######################
</button>
Give it a min-width if you don't want it to be too small.
I encountered something very strange today. When adding the style overflow: hidden to a div, if its content has a header, it gets some extra blank space which seems like margin or padding. The amount is small, so I usually would not have even noticed, or cared, but the problem is that I'm making an animation, and that margin/padding is messing it up. For hours I thought it was the animation which was wrong, but I finally managed to narrow it down to this.
Here's the code with overflow:
<div style="overflow:hidden">
<ng-content select="wizard-step"></ng-content>
</div>
The ng-content renders this:
<h5><strong>testing bootstrap header</strong></h5>
<search-select #select [placeholder]="'Busca audiencias...'" (selected)="onSelected($event); select.text = ''" [template]="template" property="name" [items]="catalogAudiences | filterAudiences:audiences"></search-select>
<div class="mt-3">
<div *ngIf="!audiences?.length" class="alert alert-primary">
No has agregado audiencias.
</div>
<audiences-list (remove)="onRemove($event)" [readOnly]="true" [audiences]="audiences"></audiences-list>
</div>
And it looks like this:
I want you to notice the arrows which show the extra space I'm talking about. To compare, this is what it looks like if I remove style="overflow:hidden":
I know it might be hard to tell, but it's almost like if the "testing bootstrap header" is getting some unwanted margin whenever that div has overflow: hidden, which messes up my animation. How can I fix this?
I'm using Bootstrap 4 and Angular 5 if that's of any help.
Chances are, the h5 (the "testing bootstrap header") has a top margin either from browser defaults or Bootstrap, that's being affected by the div's overflow: hidden (which causes it to establish a block formatting context that blocks child margins from collapsing with their parent margins). See collapsing margins in the spec.
If removing the top margin fixes this, that's your answer.
I have a bunch of tabular/key-value data, of which I always show one item and the rest when the user clicks on the first, like this jsFiddle:
<div data-role="collapsible">
<h3><div class="ui-grid-a">
<div class="ui-block-a">Customer:</div>
<div class="ui-block-b">Mario's Plumbing</div></div></h3>
<ul data-role="listview">
<li><div class="ui-grid-a">
<div class="ui-block-a">Phone:</div>
<div class="ui-block-b">1-800-MUS-ROOM</div></div></li>
...
</ul>
</div>
However, when jQuery Mobile adds an icon to the header item ("Customer: Mario's Plumbing"), the value field, i.e. "Mario's Plumbing", doesn't align with the value fields in the <ul> list, i.e. "1-800-MUS-ROOM".
I think jQuery puts the icon side-by-side with the "Customer: Mario's Plumbing" box---this is compatible with what I see: the misalignment looks roughly like 100% of a button width for the key field and 50% of a button for the value field, which I would expect given my use of a ui-grid-a (which does a 50/50 split). I would want the icon to be part of the left 50%, i.e. inside rather than beside that box. Can I do that? How? It might be easy CSS and me being a CSS retard :)
It looks like the jQuery mobile element styles are not playing nicely together, in this case the collapsible block and the grid layout styles.
The collapsible block adds the icon and the style which pads the header.
.ui-btn-inner {
padding:.6em 20px;
}
The additional rule, pads the left even more (to move the text away from the icon)
.ui-collapsible-heading .ui-btn-inner, .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner {
padding-left: 40px;
}
but this pushes all the header text left by 40px.
The only way I could find to correct the mismatch is to add an additional rule to move the second block to the left. By adding the following rule, the text lines up again.
.ui-collapsible-heading .ui-btn-inner .ui-grid-a .ui-block-b {
margin-left:-10px;
}
It seems to work fine at different page zoom levels in my local Chrome browser testing but I have not tested on a mobile device.
Edit: Also, there is a typo in the example and the fiddle, you have un-block-b and not ui-block-b for Mario's Plumbing.
I've just started using Twitter Bootstrap (I'm new to it so I don't fully grasp it quite yet!) and I'm trying to create a two-column form with some specific visual elements.
The complete width of the form is approx. 80% of the width of the viewport and within here are two (roughly equally spaced out) columns of labels and associated textboxes. Some of the textboxes need to have a small icon affixed to the right-hand side of the textbox and for that icon to remain fixed to the righ-hand side of the textbox when the user resizes the browser window (to remain like this at least down to 1024x768 resolution). I'm also trying to achieve all of this with a "responsive design".
I can get it looking good at higher resolutions, but I know I'm doing something wrong as the icons are displaying "inside" the textboxes when the user resizes the browser window.
This first image shows how the form should look (roughly) at all sizes:
But when resizing the browser window, it does this:
I'd like that little envelope icon to remain fixed to the right-hand side of the textbox at all times. Unfortunately, when the browser window is shrunk even further, it moves to the next line:
I'm using ASP.NET MVC to generate much of this form, so there's lots of #Html.TextBoxFor calls going on within the mark-up, however, I've posted up a JSFiddle with a portion of the relevant rendered mark-up that highlights the problem:
http://jsfiddle.net/qYTSY/1/
I'm sure I've taken an entirely wrong approach with this, however I'm no designer so I'm struggling to tweak the current mark-up to achieve what I'm after. Can anyone help please?
In jsfiddle I added a class:
.controls-row-with-icon {
width: 28em;
}
...and then obviously changed the two divs to:
<div class="controls controls-row controls-row-with-icon">
That "pins" the mail icon just to the right. Not sure if it "breaks" anything else though?
Note: in jsfiddle the two columns seemed to overlap each other - not sure if it would do that in your production version though? I couldn't get the rh column to "fall under" the lh column when the viewport was smaller - but guess that's working ok in your production code?
Rob
EDIT
See comment
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.row{
/*min-width: 62em;*/ /* add this is viewport should be fixed */
}
.controls-row{
width: 30em;
background: #ccc;
}
.row-fluid .span5{
margin-left: 0;
margin-right: 2em;
width: 30em;
}
.row-fluid .offset1{
margin-left:0;
margin-right: 0;
}
Well, after some twiddling around, I believe I've found a solution!
Here is an updated JSFiddle:
http://jsfiddle.net/qYTSY/32/
which highlights the answer (ignore the first column - I've fixed that up separately.)
Many thanks to both LiverpoolsNumber9 and Sherbrow for their help in guiding me towards a solution.
The crux of my solution was to remove the span3 class on the span element around the input elements that needed the icon appended to them (leaving this span in place caused all sorts of weird and wonderful problems), but then also wrapping the input element and the icon element in an extra div and using the input-append and add-on classes in order to ensure the icon is placed and fixed to the right of the input box.
So this mark-up:
<div class="controls controls-row">
<span class="span3"><label for="Contact_EMail">EMail</label></span>
<span class="span3"><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
<span class="offset4"><i class="icon-envelope" id="emailicon"></i></span>
</div>
Became this:
<div class="controls controls-row">
<span class="span3"><label for="Contact_EMail">EMail</label></span>
<div class="input-append">
<span><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
<span class="add-on"><i class="icon-envelope" id="emailicon"></i></span>
</div>
</div>
Although I've found a solution I have to confess that, where CSS/Styling/Twitter Bootstrap is concerned, I still feel a lot like this!