I'm using Bootstrap 5 and I'm vertically center aligning this div and also hiding this section when the screen size is md and smaller. But for some reason it vertically center aligns only if I don't have the " d-none d-md-block". Once I add the " d-none d-md-block" in, it doesn't center vertically anymore. Any suggestions would be appreciated. Thanks.
<div
class="
d-flex
col-md-5
align-items-center
justify-content-evenly
px-5
bg-secondary
d-none d-md-block
"
> ```
d-flex sets display: flex in CSS
d-md-block sets display: block in CSS .. you're overriding the "flex".
Change your d-md-block to d-md-flex. (Also delete d-flex as you don't need it.)
Related
I have a simple div container block as below block that leaves a large gap at the top.
<div class="container">
...
</div>
I have tried adding different margin options such as mt-0, even mt-n5 (for negative margin), etc. but nothing seems to get rid of the top margin
<div class="container mt-0">
...
</div>
I don't know if I'm missing something or if this is a bug, paper-fab buttons always "force a new line". So, I can't get several paper-fab buttons aligned horizontally. I have tried <span>ing them:
<span>
<paper-fab mini icon='arrow-forward' on-click='onClickForward'></paper-fab>
<paper-fab mini icon='arrow-backward' on-click='onClickBackward'></paper-fab>
</span>
and they are stacked vertically.
Just set display to inline-block
<style>
paper-fab {
display: inline-block;
}
</style>
I have some jQuery UI buttons that look like this:
How can I add vertical spacing between the rows? Modifying the CSS properties margin-top and padding-top didn't work.
Here is the HTML that exemplifies a single button:
<div>
<input type="checkbox" class="tool_toggle" id="tool_#" checked /><label for="tool_#">... tool name...</label>
... more inputs ...
</div>
This HTML input tag is simply repeated 11 times. The buttons wrap around as they should in the div container.
You can do it by setting line-height to the element that contains the buttons.
You need to specify that the buttons are display:inline-block before you can add margin-top or padding-top. This is because inline elements can not have top or bottom margins or padding.
You didnt post enough code to tell for certain so this is a guess. Post your CSS or make a http://jsfiddle.net/ if you want a proper answer
I have problems to set the width of my XUL button. I have this code:
<button label="Ok" width="16" maxwidth="16" height="16" maxheight="16"/>
By with that code, the size of my entire window is changed and not only the button.
And when I write that :
<button label="Ok" width="16" height="16"/>
Only the height is changed. Why is that?
XUL uses the flexible box model for positioning. The width and height attributes define the intrinsic size of the element, not the size at which they are displayed. Your button is apparently placed in a vertical box (not necessarily the actual vbox element, rather any element with orient="vertical"). By default, the align attribute of a box is assumed to have the value stretch - so a vertical box will always stretch the elements inside it horizontally:
<vbox>
<!-- this button is stretched horizontally to match the width of its container -->
<button label="Ok" width="16" height="16"/>
</vbox>
You can set the align attribute explicitly to avoid this:
<vbox align="center">
<!-- this button is centered inside its container -->
<button label="Ok" width="16" height="16"/>
</vbox>
I have to add image on the header and background I added header image using following code
<div data-role="header" data-nobackbtn="false" data-theme="a" style="height:30px;background-image:url(test.jpg);background-repeat:no-repeat;">
the image perfectly fixed in the portrait but when the screen changed to the landscape, image not fixed perfectly there will be some blank space added after the image. So how to set the image same for both portrait and landscape screen orientation. This problem occur in Android,iphone ,blackberry ,etc. For more clarification please check the image header.
actually when set the width: auto or 100% is not working ,because the image has some fixed width for example I set image width as 360 px in portrait ,when change to the landscape the image width still same thats the problem. We can't set the width large for landscape because we can't say that all platforms landscape mode screen size is same. that may be varying in Android,iphone etc.
You can set a div tag to hide overflow, then set a regular img tag inside the div and set both to have a width of 100%...
<div data-role="header">
<a data-icon="arrow-l" data-rel="back" href="#" style="z-index:1001;">Back</a>
<div style="overflow:hidden; position:relative; width:100%; height:45px;">
<img src="test.jpg" style="width:100%; height:auto; position:relative;">
</div>
</div>
Some Notes:
the "height:auto;" sytle on the image can be removed if you are ok with distorting the aspect-ratio of the image when it scales.
the "z-index:1001;" style on the back button link is necessary because the header is given a z-index of 1000 (so the div around the image is also given a z-index of 1000 unless specified).