I need to create a a 2x2 grid for a mobile website where the cells are text areas. The problem is that when I do this there doesn't seem to be a way where the text boxes all join together at the inner-most corner. All I am able to achieve is two separate text boxes on top of two other separate text boxes none of which are touching vertically of horizontally. I have tried to manipulate the margins, padding, and borders, but nothing works. Thanks for your help!
Working example: http://jsfiddle.net/Gajotres/cGt2J/
CSS used:
.ui-input-text {
border-radius: 0 !important;
margin:0 !important;
}
Related
I have a menu of small menu items tightly packed together.
After upgrading to Material 14.0.5 the matTooltip appears to have an outer active area of about 3 mm outside its borders. In other words, the tool tip does not hide if I point mouse cursor outside the menu item/element and the pointer is still close to the tool tip - witin about extra 3mm outside the tool-tip borders. In my case the tool tip keeps covering the neighboring items and prevents accessing them if my cursor is close to the tool-tip. I would need to have the too-tip hide as soon as the cursor leaves its borders. It worked fine for me before the upgrade as there was no such area around the tool-tips. Is there a way to reduce the active area around the matTooltip to zero? I tried changing the margins and padding but it did not help.
This appears to work:
::ng-deep .mat-tooltip {
margin: -4px !important;
}
I have a CheckBoxGroup that shows 8 items. The default presentation is vertical, which does not really look good in my layout.
But if I set the presentation to horizontal using
checkBoxGroup.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
then the 8 items do not have enough space. So I am forced to use the vertical style but I am not at all content with that.
Is there a way to show a single CheckBoxGroup horizontally, but using 2 (or more) rows?
Edit:
I have found a quick-fix to the problem by styling the checkboxes to be floating to the left (with horizontal presentation of the group). It now shows 6 Checkboxes on the first line, and 2 on the second line. It is still not beatiful, but better than the other 2 options. I am still looking forward to receiving a better solution! (if there is none, then so be it but at least I then know that it is not possible)
This should be doable with flex box, since CheckBoxOptions are spans in div. So we need to add flex css rules for the checkBoxGroup.
First add stylename
checkBoxGroup.addStyleName("my-flex-checkboxgroup")
Then in your theme
.my-flex-checkboxgroup {
display: flex;
flex-wrap: wrap;
width: XXXpx
height: auto;
}
You need to set the width XXX so that four columns fit
E.g. if you have
CheckBoxGroup checkBoxGroup = new CheckBoxGroup();
checkBoxGroup.setItems("Option 1","Option 2","Option 3","Option 4","Option 5","Option 6","Option 7","Option 8");
You need rougly 500px or so, but if captions are longer, more naturally.
This worked for me atleast.
If I add too many/too long captions to a vaadin7 timeline, they will only be displayed partially (i.e. the part we have space for is displayed and the remainder is truncated)
How can I increase this area in order to allocate enough space for all?
timeline.setGraphCaption(container, h.toString());
You need to add these rules in your scss file:
.v-timeline-widget .v-timeline-widget-modelegend{
background: inherit;
}
.v-timeline-widget-legend-label{
height: auto !important;
white-space: normal !important;
}
Before:
After
3 points:
While these rules may not met criteria of well-written CSS or good practice rules (I am looking at you !important), they do the trick. Still, better approach would be to get your hand dirty by editing Vaadin Timeline addon sources.
As you surely noticed text background has changed. That's because we override default background which was designed for only one line (you should provide your own background image)
Bottom of the widget is cut off by few pixels. Well, the only way to fix it is to jump into DOM and css and try fix it. Doable but I haven't tried.
When putting multiple charts tooltips from upper charts are hidden behind others.
I found some tips on how to it but nothing helped.
Is there anyway to keep tooltips on top of charts?
The example is here: http://jsfiddle.net/Zw3uM/
Thanks a lot!
This is pure html : Any div element loaded after ( meaning appearing after on the html page) will always be in front.
In order to get the first chart tooltip be in front of the second : load the second in first and set its y position on the page using an absolute or relative position in css :
I've change their order, putting the container2 in first in html:
<div id="container2" style="height: 200px"></div>
<div id="container1" style="height: 200px"></div>
Then set the position of container2 to be under the first one (thanks to the top style attribute) :
div[id="container2"] {
position:absolute;
top:200px;
}
Here is the result : http://jsfiddle.net/Zw3uM/3/
You can use tooltip pisitioner:
http://api.highcharts.com/highcharts#tooltip.positioner
The problem is due to each highchart container having its own stacking context. This is because the highcharts-container has both position: relative and z-index: 0 (css dynamically applied by the highcharts library).
So the z-index of the tooltip has meaning only in its parent highchart container.
To fix this we need to override the (z-index: 0) rule for the highcharts-container using the following:
.highcharts-container
{
z-index: auto !important;
...
}
This way all hightcharts-containers & their children would share the same stacking context and their z-indices would apply the desired effect.
You can check the fix here: http://jsfiddle.net/w5bLo1cw/4/
am using jquerymobile for representing a two column radiobuttons in my project, the problem am facing is the contents of the block-a is lengther than the contents of the block-b so am getting a difference of div size the output is at (http://i40.tinypic.com/r0tt85.png) if u can lookat my out put the second question 6th option is small when compare to all the other ones the block size is based on the content how can i make same size for all the blocks without based on the content any help please needed
If you want all blocks to be the same height, you can set the height in CSS:
.ui-bar {
height: 100px !important;
}