I tried to develop ui table control with multi select option.
The label of each column is sap.m.Text:
But when i re size the column width, parts from the label text are hide:
It's all because of the "sapUiSizeCozy" class for the multi select option (the checkbox)
When i don't use this "sapUiSizeCozy" class the label text will be OK and wrapped, but, there will no be checkboxex:
I add this css class to the sap.m.Page control
Any help?
I need that the label will wrapped + the checkbox in each row
Thanks!
Edit:
Please see an example in:
Plunker
You can in view.xml file remove the:
class="sapUiSizeCozy"
And re size the Product Name" column to see that the column is wrapping
sapUiSizeCozy sets a fixed height to the table header. The label text is then verticaly centered by sapUiSizeCozy by setting lineheight to the height of the header.
This results in the effect that the label is wrapped but the second row is cut of by the fixed header height.
You can fix that with the following css (see Plunker):
<html:style>
.sapUiSizeCozy .sapUiTable .sapUiTableColCell>* span{
line-height: normal;
vertical-align: middle;
display: inline-block;
}
</html:style>
Related
I'm trying to make an input text look like exactly like a span. I want my user to be able to type text without noticing he's in a field.
I've almost succeeded, the last problem I've got is about the width of the input.
The input text is wider than the text it's replacing.
Here's the jsfiddle. (You may click on "Texte" to type yours).
Here's the interesting css part :
input {
background-color: transparent;
padding: 0px;
border: initial;
font: inherit;
margin: 0px;
}
Here is the idea try fixed width for the inputs
Demo : http://jsfiddle.net/nyitsol/eotd8p4n/17/
also you may try use the same width of the span for the input
$('span.width').width(); // returns a width value
using this get the width of the span and put it into the input box using JavaScript.
EDIT:
try this, if you want to grow the input based on text limit then you have to increase the size as well.
http://jsfiddle.net/nyitsol/eotd8p4n/25/
var input = $('<input onkeypress=\"this.style.width = ((this.value.length + 1) * 8) + \'px\';\" type=text>');
I am having 3 row textarea tag. But my label tag is present in the 3rd row of the text area. But I wanted it in the first row. How to do it. Please help me and let me why it is in the last row ?
The problem follows here.
My code is in the following.
http://jsbin.com/zisem/2/edit
Add the following style to your label
label {
vertical-align: top;
display: inline-block;
}
I am using dojo 1.7.2 and I have a datagrid. In one of the columns I have a long description that I want to show or hide when a "see more" link is clicked. I got all of that working with a formatter but when the description expands the datagrid's outer container does not get taller (in other words the rows below just get pushed down out of site. Is there anyway to change the height of the grid when I click on my show/hide (can the grid be redrawn? If so how?)
Update: I have created a js fiddle that shows what I want to do. You will see there is hidden text and when you click, it shows, but the rows at the bottom are pushed out of view:
http://jsfiddle.net/erayK/
Because I have to include some code, here is the formatter I used:
function formatLink(value){
// value 0: title, value 1: description, value 2: url
return ''+value[0]+'<br /><div style="display:none;" id="' + value[0] + '">'+value[1]+'</div>show or hide';
}
I found an acceptable solution, I can override the dojo styling that cuts off the stuff at the bottom and add a scrollbar using:
.dojoxGridContent {
overflow: auto;
}
I would like to be able to remove the "space" at the top and the bottom of a text inside of a container.
The div must be as close as possible to the text inside.
This text is the result of a input and can be changed by the user.
I guess that I should work with the line-height, but how?
Any advice would be greatly appreciated!
Used to line-height
.some_css{
line-height: px; // according to your text size of design
}
Use the CSS padding property to set space within the borders of the element:
padding:0;
Additionally as Terric has pointed out, if the child has a margin, remove it:
margin:0;
you can either use padding: 0' or try line-height:px
what padding do
with zero padding
and line height
As explained in the title, I needed to "dynamically" remove the space around text.
In fact, every fonts have different structure and don't render in the same way on every browser...
I found a compromise for this :
.text { line-height: 70% }
As explained here, if we use a percentage, we could apply any font-size to our text, the line-height will always be the same.
I can change the font-size with jQuery, the line-height will always be properly applied to the text and to the surrounding element.
I dealt with a case function for every font to apply a different line-height. In my case, this is a working solution...
var fontFamily = $( "input" ).val(); // Here, the font-Size is defined dynamically by the user... It could be Arial, Verdana, Comic etc...
var lineHeight;
switch ( fontFamily ){
case "Arial Black": // if the user has selected the arial black font...
lineHeight = "70%"; // we define a line-height that will be correctly applied to the text
break;
case "Verdana":
lineHeight = "78%";
break;
default:
lineHeight = "66%";
}
$( ".text" ).css("line-height", lineHeight); // we apply the line-height to the text...
Note that the user can also change the font-size with another select element...
Hope this could help...
I am using Gxt-2.2.3's combox box, when it is rendering in IE7 there is no problem with the alignment, but when it comes to Firefox-4.0.1 have got some selection arrow alignment issues as follows.
By ran the application is firebug mode , came to know that there some default style is applied to this div 'element.style' with value 'padding-left:80px'.
So can any one suggest me why this incompatibility in browsers, and how do i override this style.
code:
private ComboBox<TestModel> comboModel = new ComboBox<TestModel>();
comboModel.setFieldLabel(wrapAlignmentSpan("State"));
ListStore<TestModel> store = new ListStore<TestModel>();
store.add(getModels(new ArrayList<TestModel>()));
comboModel.setDisplayField(TestModel.STATE);
comboModel.setValueField(TestModel.STATE);
comboModel.setLabelStyle("font-weight:bold;width:120");
comboModel.setWidth(100);
comboModel.setStore(store);
and finally i am adding this one to 'FormPanel' as follows:
mainPanel.add(comboModel);
Thanks in advance.
The issue was because of the 'FormLayout' 'label width', there was a 'FormLayout' with the 'label width' of '30px'. So after increasing to '120px' the issue got resolved.
LayoutContainer left = new LayoutContainer();
MdbFormLayout layout = new MdbFormLayout(120);
layout.setLabelAlign(LabelAlign.LEFT);
left.setLayout(layout);
return left;
finally added 'Combo Field' to 'left' container as follows,
left .add(stateField, new FormData(150, -1));
It is because of the label width of the 'FormLayout'. Don't set any label width to the combo field. If it is required check the width of the label text and then set the label width as follows.
//'100' should be calculated based on the width of the label text
formLayout.setLabelWidth(100);