I am using Bootstrap 4.5.0. I reduced the height of Bootstrap modal by half. Now when I click the close icon on top right corner, a weird looking (I don't know what it is) squarish looking border/frame appears. This is how that ugly thing looks like:
How do I get rid of this? Given a choice I would prefer "Pure CSS" solution. Thanks.
Update:
This is what I used but did not work.
.close {
color: ghostwhite;
opacity: 1;
border:0px solid #fff;
outline:none;
}
As per Umesh's comment below, this fixed it for me:
.close:focus {
outline: 0;
border: 0px solid #fff;
outline: none;
}
Related
I have a QTabWidget with six tabs, and all the tabs have an icon -
but the icons are not in the center of the tab:
What I've done so far :
tabWidget->setStyleSheet("QTabBar::tab {width: 40px; height: 40px;}"
"QTabBar::tab:selected {background: lightblue;}");
tabWidget->setIconSize(QSize(40, 40));
tabWidget->addTab("widget", QIcon("iconPath"), ""); //<--for all six tabs
And:
tabWidget->setTabIcon(index, QIcon("iconPath"));
Any ideas why this is happening, and how I can fix it?
I too have been struggling with this issue. Here is how I resolve it.
Background:
I was attempting to get a left side tab menu going, which used icons as its indicators (what the users would see), however I had a problem:
My icons, which were set using the currentTabIcon in the Property Editor, were aligning to the bottom (which is expected since I am using the West orientation. Normally, the North orientation would be selected and the icons would be on the left).
I had this as my stylesheet:
QTabBar::tab:hover {
background-color: #212121;
}
QTabBar::tab:selected{
background-color: #313131;
}
QTabBar::tab {
background-color: #111111;
height:70px;
width: 70px;
border: none;
}
Now, attempting the suggested solution found in this post whereby I set the margins did not have the desired effect, infact it had no effect at all.
Solution:
After playing around with some of the CSS properties, I discovered that setting the padding-top and padding-bottom gave me the desired result.
adding the lines:
padding-top: -15px;
padding-bottom: 15px
Resolved the problem for me, however this needs to be changed according to your needs.
My final stylesheet resembles:
QTabBar::tab:hover {
background-color: #212121;
}
QTabBar::tab:selected{
background-color: #313131;
}
QTabBar::tab {
background-color: #111111;
height:70px;
width: 70px;
border: none;
margin: 0px;
padding-top: -15px;
padding-bottom: 15px
}
If somebody has the same problem like me with the icons in the tabs, I found a solution after days and days search for this, and its so simple :D
Just add this to the stylesheet for the TabWidget:
tabWidget->setStyleSheet("::tab {margin: 0px;}");
************
I found this link some time ago and have used the styles with the AJAX Tab Container control with changes over the years in different projects:
http://www.c-sharpcorner.com/uploadfile/raghavau/css-style-sheet-for-ajax-tabcontainer-control-in-Asp-Net-2-0/
The link is just for reference but the problem I'm having is in IE 11.
It works ok in FF and Chrome.
The problem is, while viewing in IE, the left and right sides (images) of the tab have a greater height. This leaves and empty gap at the bottom of each tab where the inner portion is.
Picture three images. Left and right are 20px and the inner is 17px and all aligned at the top. And I have checked, all images have the same height.
There is also a visible dashed box around the active tab's text and the bottom of this dashed box happens to align with the bottom of the repeated inner image. Active, hover, and inactive styles are all the same except for the image.
Here is some css to view for the inactive tabs but it does the same thing on all tabs whether inactive or not.
/*Header*/
.Tab .ajax__tab_header {
color: #4682b4;
font-family: Calibri;
font-size: 14px;
font-weight: bold;
margin-left: 0px;
white-space: nowrap !important;
}
/*Body*/
.Tab .ajax__tab_body
{
border:1px solid #b4cbdf;
padding-top:0px;
min-width:900px;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
color: #666666;
background:url("../images/tab_Inactive.gif") repeat-x;
height:20px;
display:block;
line-height:20px;
}
.Tab .ajax__tab_inner
{
color: #666666;
background:url("../images/tab_left_inactive.gif") no-repeat left;
padding-left:4px;
}
.Tab .ajax__tab_outer
{
color: #666666;
background:url("../images/tab_right_inactive.gif") no-repeat right;
padding-right:4px;
margin-right: 2px;
}
I have been looking everywhere for a solution and even a coworker who knows styles better than I do is at a loss as to why it does not work properly in IE 11.
Thanks for any suggestions.
EDIT: First the dotted box around a selected tab is solved. Just needed to add outline: 0px;
And after closer inspection, it looks like the middle image background is not smaller, but the position is not on the bottom like it should be. Adding background-position: bottom; did not help.
Finally found the solution and wanted to post it for others.
When I noticed the image was not smaller but it was raised, I looked closer at other elements. All that was needed for IE 11 to behave was vertical-align: bottom; Adding this to all the tab styles (hover, active, inactive, inner, outer, tab) did the trick.
I'm currently building my website and I've run into a problem. Here is the webpage.
I want to add 3px underlines to only the links, like this:
The line height of the text is 56pt, so the border-bottom is far too far away from the links. text-decoration: underline is too thin, and way too close.
They need to be about half this distance. As negative padding doesn't exist, how should I go about fixing it?
Now used to this code (This is demo)
Css
.HomeText p a {
color: red;
text-decoration: none;
position: relative;
display: inline-block;
vertical-align: top;
}
.HomeText p a:hover:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
border-bottom:solid 1px red;
}
Demo LInk
Try adding the following:
display: inline-block;
height: 1.2em;
Haven't tested extensively, but seems to close the gap nicely in modern browsers.
Answer 1: Accept that css has limitations and work round them.
Answer 2: The only way I can thing of doing this is a using a span displaying it is a block and adding a border and padding to the bottom - this process will open up a whole other can of worms though floats blocks inline text etc. So I would go back to answer 1.
did you try this?
a {
border bottom: 3px red;
}
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.