I have a view in which I am using some drop downs like
Access Link
I am unable to show border bottom, I have tried to give border-bottom or border definition manually in that elements CSS but couldn't fix. Any help
It is not that it has no bottom border, but it is just not being shown by your browser.
Your button has a height of 40px. But it is also contained in a div that has a height of 40px and a box-sizing of border-box.
Based on this, when using border-box with box-sizing, the height allocated to the content (in this case, your button) is reduced after considering the border and padding attributes of the element (in this case, your div). I just do not know why the content appears to be being rendered in a way that it overlays the bottom border of your container div.
Note that the box-sizing property in your CSS is applied to all elements, including :before and :after pseudo elements.
You can resolve your issue and show the bottom border if you do any of the following:
Reduce the height of the button element (e.g., set .ms-choice to have height of 38px).
Increase the height of the container div (e.g. set to 42px). This will just mis-align your dropdown menus with your search input.
Change the container div to have a box-sizing of content-box.
Change the background-color of your button to transparent and put the white background color on your div.ms-parent.form-control. (I added this option to show that the button' is actually being rendered such that it overlays the bottom border of the containing div.)
Related
Here's my code: https://play.tailwindcss.com/6e1ovq2LZC?layout=preview (set your browser's zoom to 500%)
this is how the input with the buttons look like
As you can see, the left border of the first button is overlapping with the border of the text input, while the border of the second button is laying flat against the border of the first button. This causes problems with alignment, such as adding margin directly to the buttons' classes (ml-2) as you can see next.
left margin of the buttons
Changing the borders' width does nothing as far as I can tell. When removing the border the elements will still act as if there is a border there for the placement of items.
The problem is that buttons are positioned as absolute and .left-0 pushing it all the way to the left.
Try to use .left-px class or set manualy as left: 1px;
Since you need border 1px wide
Hovering over an element in Chrome inspector shows its height and width:
Under "styles" it also shows the computed height and width.
My question is: which "height" and "width" is this? Does it include the border?
That width and height popover does not include margin or position.
The width and height shown in the popover is the width and height added with the padding and border of the element.
The full individual amounts are be shown in the computed section but with some basic addition, you should be able to see that the popover values are width + l-r padding + l-r border and the same for the height.
As shown, the core width and height are enclosed within the padding and border which is surrounded by a solid line.
Looks to include the border. Right click > inspect element > change the border width manually, and this becomes apparent.
I've read that setting the padding property of an element increases both the height and width of the element. This is true when used on an element that is not nested inside any other element. But as soon as I set the padding property of a nested element,say a paragraph nested inside a div, only the height of that nested element increases and the width remains the same.Should it not increase the width too?Also when I specify very large values for padding of the nested element, it expands out of the container element. Can somebody please explain me this behaviour?
You must search google for CSS BOX Model?
The padding area extends the content area with the empty area between
the content and the eventual borders surrounding it. It often has a
background, a color or an image (in that order, an opaque image hiding
the background color), and is located inside the padding edge. Its
dimensions are the padding-box width and the padding-box height.
The space between the padding and the content edge can be controlled
using the padding-top, padding-right, padding-bottom, padding-left and
the shorthand padding CSS properties.
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
According to http://www.maxdesign.com.au/articles/inline/, the section called "Inline elements and padding" says
While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content.
So in accordance with that, it seems that it is never ever any point to use padding vertical(top,bottom) for inline elements.
Is that correct?
Well, the padding box is the area covered with the background colour, and the border is painted around that, so changing the padding top and bottom can change what the inline element looks like even if it has no effect on the surrounding content.
I have a list of items, like a menu, where the current item has a background image that is kind of like a big pointer to the right. This background image pointer thing should escape the bounding box of the div it's contained within. Here is a screenshot of how it appears in Chrome and FF, which is as i expected it to appear:
I've set up a jsfiddle with the code, minus the background image thing as I can't be bothered uploading it anywhere. But I've set the background colour so you can see what I'm referring to
The code is here: http://jsfiddle.net/V8TNm/
So in Chrome and FF, the yellow background of the active item will stretch past the grey gradient box. But in IE9, it's cut off.
Any ideas why, and what an easy fix may be?
Simply add position:relative.
#nav_mod_list div.current {
position: relative;
}
http://jsfiddle.net/V8TNm/3/
The selector #nav_mod_list div.current has a width of 210px as well as padding and margin where as the container is 200px. Change the 210 to 200 and remove the margin and padding.
Edit:
You could also just remove width property altogether. That way it will simply extend the width of the container.