Inline Block Display Issue [closed] - css

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am creating a dashboard and in the dashboard I got two boxes that I wanted have in the same level at the top. I am using the display "inline-block" to group them in boxes; however, the result is different instead the bottom part is in the same level but the top is not. See screenshot below:
https://www.mediafire.com/convkey/8e14/xdh672yojc8owe86g.jpg
I set the height of each box to "auto". You can see on the screenshot that the first box is not aligned equally to the second box, is there a way to have the two boxes in the same level or aligned equally at the top? I tried using table-cell display but it has compatibility issue on other browsers such as IE. Thanks

Use the verical-align: top; CSS property on the element which contains your inline-block elements. ;)

Related

Display a div above a grid grow [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
I have a display grid with multiple rows and multiple columns, I am trying to make a div display when I hover over one of the grid boxes, but right now it is being cut off by a grid row. I want it to lay over the design.
I have tried position: absolute and z-index, but that does not seem to work. What other ideas can I try?
in addition to using absolute and z-index you should probably position the div you want to display over the others in the largest parent div. If you are able to provide your html and css I can be more precise

Overflow-y not working with wrapper mobile [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
On the mobile version of the website, you can scroll to the right to the navigation, which should actually only be accessible via click. How can this be changed?
(URL removed)
I have already tried many different solutions that I have found, but nothing works so far.
I am looking for help in this individual case.
Thank you very much :)
By moving your .main-nav element with transform to the right you extend width of the visible content, and since your scroll properties are default it will enable you to scroll the entire visible content, including that menu.
What you want to do is clip everything that is outside of your html or body element.
CSS
html {
overflow-x: hidden;
}

Z-Index Positioning with Avada Footer [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I can't seem to figure out how to get the leaf image in my footer to have a higher z-index (I tried in the inspector, not in my stylesheets). I'd like it to be on top of the section above it and on top of the section below it. I'd be willing to change it to an pseudo element if that would work better.
https://bhr-caterers.nk-creative.com/
for it to be appeared on top of the section above you don't need to change the z-index, because your element is after the above element. you just have to let it show the overflow content so add
overflow:visible
to footer tag with this classes: "fusion-footer-widget-area fusion-widget-area"
for the section below it you need to add
z-index: 1
to the footer tag with id: "footer".

IE 11 issue with Flex [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I've been looking through here and other forums, trying to fix this IE bug with no luck. Basically, the gray buttons below "FIND THE RIGHT TOOL" (using "cards" in Zurb Foundation, with the Flex grid) are displaying oddly in IE11--as if they have no width set:
http://www.mindtools.io
Here's how it's rendering in IE11: http://imgur.com/a/VwWIl
Any help would be greatly appreciated--thank you!
I can get the "cards" to be the right width by setting #find-a-prog to width 100% and .disorder to width: 100%. But there are other issues in my view of IE too, like the button bumping up into the cards and the #find-a-prog aligning to the right of the startchange div.
EDIT: corrected a mistake. Also I would suggest making the hero container display block and centering the items in it a different way, maybe with margin: 0 auto;

DevExpress ASPxDropDownEdit with scrollable DropDownWindowTemplate [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have made use of the DevExpress ASPxDropDownEdit and DropDownWindowTemplate.
I have copied the example from the DevExpress demo site to setup my page - link to demo
Now the problem I'm having is when the Drop Down gets too many values, it extended outside of the page and i cannot select values lower down in the drop down box.
Am I able to place a scroll bar in the DropDownWindowTemplate so I can fix the height?
I have tried setting the Height of the Grid within my DropDownWindowTemplate as well as setting the DropDownWindowHeight on the ASPxDropDownEdit.
Include the Div element into the DropDownWindowTemplate and set its style.height property to some value. If you set the div's style.overflow attribute to Auto, this Div element will show scrollbars when it is necessary. Finally, you will have to include the required content to this DIV.

Resources