I created a RadioGroup and it turned out 79 pixels tall, even though I tried setting the height to "fit to content" or "fill parent". There is lots of space between the two options, so I would like it to be shorter but it is ignoring the height option. Any ideas?
Thanks for any pointers or suggestions.
You can reduce the padding between the items with:
.app-RadioGroup-Item {
padding: 0px;
}
Although I suggest 2 or 4px (it's currently 8px).
If you want to mess with the actual size of the items, you can style the input element, something like:
.app-RadioGroup-Item input {
height: 12px;
width: 12px;
}
Note you'd probably want to tweak more than just the height and width, and this doesn't look very good. I'd suggest sticking to only styling the padding if that's enough for you.
Related
I try to reduce the size of a cell in an sap.ui.table around the input field.
In the screenshot below you see marked in green what I want to reduce.
As you can see I managed to reduce the font size and for "debugging purpose" I changed the background to red.
My Style.css:
.test_maybe_he input {
font-size: 0.75em !important;
background-color: #ff0000 !important;
padding-left: 0px !important;
margin-left: 0px;
}
I tried a minus margin, but it only moves the content of the input field and not the input field itself to the left.
My view itself has the class sapUiSizeCompact, still I think there is too much space around and since I have a lot of columns it does not fit to the screen.
Maybe someone has had the same issue and wanted to make a larger table editable and found a solution to reduce unnecessary space. Maybe as a sidemark, it doesn't need to work on a non desktop screen, too. (I try to move from a webdynpro abap to this sapui5 app.)
I appreciate your tips and hope to learn. Maybe some jQuery is necessary to do it?
Here the Plunker it's a little rough and not tailored to the exact point, but it should bring across the point.
I am not sure the standard CSS classes will help you because the padding is generated on a very low level. sap.ui.table.Column doesn't have the property class or styleClass, so you cannot hook up there. sap.ui.table.Table is too high level. Applying a standard CSS class there will affect the table itself, not its columns and cells.
What you can try is giving your table a custom CSS class.
<t:Table id="table0"
...
class="myVeryCompactTable">
then you can remove the padding in your CSS file
.myVeryCompactTable.myVeryCompactTable .sapUiTableCellInner {
padding: 0;
}
I used myVeryCompactTable twice to increase specificity (so I don't need !important). You can ofc use other ways to increase the specificity.
Result looks like this
Given an element with a certain left and right padding, it seems to not be possible to set its width to anything less than the sum of the two.
A quick Google search would have you believe salvation lies with the box-sizing property, and while that would indeed make sense (given how the box model works), it surprisingly enough does not change anything.
What have I missed?
In this minimal working example, the red element should not be visible. I'd like to avoid cluttering the HTML with extraneous elements if possible.
The red area appear because of the text inside it. you have 2 options either to remove the text or to set the font size to 0 like that:
#c
{
background: red;
width: 0em;
font-size: 0em;
}
I'm mostly a C++ programmer who's getting involved in HTML5 and Javascript. I'm having some trouble with my layouts and am asking for advice and some criticism of how I'm doing it.
A reoccurring problem I'm having is unwanted scroll bars appearing when I add margin or padding. This is a mockup of a layout I'm working on for a Javascript application.
http://jsfiddle.net/Qy4Xz/
Each box uses class 'text-line' to produce a line that my controls go in. I wanted to add a margin so the costs box items would have some space around them. When I add a 5px margin to text-line, my geometry box has scroll bars in each left/right panel.
http://jsfiddle.net/LD5TS/
Here is where I'm adding the margins:
.text-line {
font-size: 1.6em;
box-sizing: border-box;
width: 100%;
margin: 0px; /* no margins */
}
This is probably a newbie mistake, but what am I doing wrong and how can I fix this? I run into this problem a lot, I've read a lot of material, but I'm missing something. If I'm making any other major layout mistakes can you point them out? Thank you!
Since the .text-line elements have width:100%; they will naturally overflow the container if they have margin too, since margin does by default not get included in the width value.
What you could do if you want both space around the content and have the element fill its parent in width, is removing the margin:5px and adding this code to .text-line:
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:5px;
What the code above does is including the padding in the width value, thus you can add padding and the element will still only get the width value you declared.
try to add padding instead of margin and it will work fine. To understand exactly what's happening, please take a look at css box model
I have a sidebar DIV on my web page that has buttons. I have the width of the sidebar set as follows:
width: 20%;
but when the browser size is reduce then there's sometime not enough space for the buttons. Is it possible for me to have the width as 20% but also specify a minimum in px?
Yes. This is pretty common, too. Have fun!
And protip: you can always just try and find out ;)
Yes. The W3C CSS recommendation generally does not require that units for different dimensions like width and min-width be the same. (Not quite relevant side note: You can even mix different units for dimensions like padding, e.g. padding: 2px 1em;.)
Using “min width”.
min-width: 20px; for example.
But if you want its width to always be at least the size of whatever is contained, consider using display: table-cell;
I have a select list, where some clients have entered insanely long options for them, which breaks the design. I'm wondering if there is a way to set a fixed width on the select widget, but still have the drop down menu it produces still be wide enough to display all of the option.
Since you don't specify what browser support you need, this may or may not be a solution. This works in most browsers IE9+
select {
width: 100%;
max-width: 150px;
}
Short and sweet. When expanded, the select will display the whole text (unless it exceeds the viewport!).
See the working example here.
You just need to apply width to your select box either inline or CSS. It will be as wide as you have specified but when clicked, it will show all options with whatever width.
I don't know if you can do it with css (browser independent), but here are 2 other solutions:
1. Instead of displaying "veeeeery looooooooooong teeeeeeeeext" you can display something like "veeeeery loooo...";
2. Build your select using divs and lists so when it is closed to have a specific width and when you press something like an arrow to display full width. (I am not sure you understand what I'm trying to say with this one....).
If the list you have (the entries in <select>) are user entered, and the user can enter, say 500 characters, they they definiteky will.
In this case, I would not go for a <select> list, but a custom list built with, say a <div>.
This is not difficult, all you need is
a div that contains the default
option,
a hidden div with all the options
When the user clicks the default option show the hidden div
On click of the items in the hidden div (that is now visible) make that the selected item in the first div
Perhaps there already jquery plugin for this. but i am not sure whether you are open to jquery, I am not a jquery expert anyway.
I know this comparitively more effort than having a select, but i think it is worth the effort. All the hacks - expand the div onmouseover, onclick etc do not look great, might still break your design, and depending on the amount of data the user can enter, would still not be effective.
In the custom list approach, you can wrap the elements, so that you are in complete control.
Add to the CSS something like this:
select {
border: 1px solid #838383;
border-style: outset;
font-weight: bold;
color: #3F3F3F;
max-width: 150px !important;
overflow: hidden;
}
option {
max-width: 120px !important;
overflow: hidden;
}
This works for me. Note there are no dots in front of the anchors.
Not sure if you're open to using jQuery at all but I usually use this method:
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
Is a bit choppy but looks better than cutting off the content