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;
}
Related
I've added a new link to my navigation bar, and for more visibility, have added a "New" marker to this link for improved visibility. This "New" marker is 0.8rem compared to the link's text being 1rem. I mention this because if the "New" marker is changed to be 1rem, then this issue does not occur.
The issue itself:
When hovering over the "Order Now" link (see Codepen), you might notice that the container height is stretched by maybe a pixel or 2 from the bottom - it's somewhat hard to see in this example but tried to make the colours as obvious as possible. It's most obvious when looking at the blue underline that there is a small gap between the active link (About us) and the hovered link. This only happens when hovering over "Order Now", and as mentioned, is rectified when setting the font size of "New" to 1rem (or removing "New" completely)
Codepen with minimum example: https://codepen.io/ftahir192/pen/PoPXjEv
This is the css for the "New" marker:
.new-marker {
color: red;
font-size: 0.8rem;
}
There's nothing special going on with that aside from the differing font size. I've tried:
Setting absolute positions on the container
Setting relative positions on the links itself
Playing with line-height - this fixes it but seems more of a hack.
It's a minor nuisance but still a nuisance nonetheless and something I haven't been able to get to the bottom of. Any tips would be very much appreciated
You can fix that by adding line-height its not a hack, the <i> tag inherits the <a> tag line-height attribute value (which is 60px), line height will fix it for you:
.new-marker {
color: red;
font-size: 0.8rem;
line-height:1rem;
}
setting the min-height:70px is the reason for this issue. My suggestion is you should change to height: 91px or any other hardcoded value. and avoid using min-height.
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
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.
Let's assume that we have the following code:
<div style="margin-bottom:100px;">test</div>
<div style="margin-top:100px;">test</div>
I noticed that sometimes it creates 100px of margin between elements and sometimes it's 200px (when we use certain settings that I'm not familiar with). I can't find any information about that in the specification. What does this depend on?
If we have h1 and p in a blank document then the margin of h1 will be combined with the margin of p. They will not add up. Whichever is larger will be used.
This is happening because your margins are allowed to collapse. Certain margins may overlap (mostly block elements) and form a combined margin defined by the larger of the two values defined in the computed element style rules - that's what is happening here. This section from the CSS Box Model document explains it in detail.
Edit: As a point of interest, you can get around this (ie. break the collapsible margins) without breaking things (much?)in a couple of ways
Making the elements width: 100%; display: inline-block
Putting a height: 0; width: 0; overflow: hidden block in between the elements and putting a dot or something in it.
I forked ashley's fiddle to demonstrate. There are probably other methods but these are a quick a dirty way to get around collapsible margins if you need to.
I'm trying to make a button span the width of a column.
e.g. here: http://davidnhutch.com. Notice how the light grey buttons are only as large as the text they contain? I'd like each button to span the width of that column, but can't for the life of me figure out how to do it. I've done quite a bit of looking around but am still kinda new to this.
Any ideas?
You will have to make them block elements to be able to set a width:
.button {
display: block;
width: 100%;
}
Generally, these buttons are so-called "inline element". The browser renderer has very complex algorithms of layouting these elements. It's like Typesetting but with objects on your screen instead.
CSS and HTML together influence how the algorithm works: determining the width and height, color, etc. of objects. Also their position and how text flows, or how long buttons are.
There is a limitation, however. You cannot use anything that's like a variable width for inline elements.
Adding width: 100%; display: block as others suggested makes some buttons perfect: but only when they start at the left or right of the containing box. If it's after a sentence, then it (should) display as:
<---width of container--->
Text
<----------button-------->
However, the button is not after "Text" anymore, but is put below it. This is because it's now a so-called "block element". It is like a full paragraph, instead of elements in a text line.
If this is what you want; fine and problem solved. If this is not what you want, and instead want:
<---width of container--->
Text <-------button------>
This is not possible. CCS4 would be cool if it adds inline-width: 100% or inline-height, and solve a lot of problems. However CSS4 does not exists yet.
Adding width:100% to .button seems to work for the center and right buttons at the bottom of the page.