I want to get rid of the frame that is around an Input in SAPUI5 framework. I want to make an input field elevated but the frame around the input field makes it not like desired.
I have tried it using CSS like this:
.cityInput{
border-bottom-color: #FFFFFF;
color: #FFFFFF;
background: none;
min-height: 27px;
border: none;
outline: none;
box-shadow: 5px 5px 7px #808888;
}
I want to get rid of the two yellow lines that surrounds the input field.
Thanks.
I am assuming that you want to get rid of the default (silver/grey) border around the input box. If this is the case then I would suggest making the border color same as your background. Making border=none, on the input class, directly does not work.
.cityInput .sapMInputBaseInner {
border: 1px solid #fdf6b1;
}
Related
How I can change these tabs at the bottom from the design? I just can't find the prefix needed to color the tabs to match my design.
Assuming that those tabs are part of a QTabWidget, you can either modify the stylesheet in Designer with something like this:
QTabBar:tab { color: white; border: 2px solid #00FFFF; background-color: gray;}
Or you can do it via code like this:
ui->tabWidget->setStyleSheet(QStringLiteral ("QTabBar:tab { color: white; border: 2px solid #00FFFF; background-color: gray;}"));
You would obviously need to change the colors in the example to the colors you would want. You should also read Customizing QTabWidget for more examples and the full reference of what is possible.
I have a Template constructed out of many Cells as part of a Form. I wrote several Types which have borders background colours and so on, so that i , in the end, could apply them to the cells at the edges and construct a box around the whole Information by putting them together. To make it clear here an example of what i try to do:
if you had 9 cells in form a cupe the middle top one would just have a border on the top the top left one would have borders on the left and the top and so on. That works well for the "straight" parts, in this example the middle parts of every side.
But the corners just don't appear neither the background color or the borders.
What i tried is basically that . I wrote the following code for the bottom right corner:
.brechtsunten {
background-color: #81a0e9 !important;
border-right: 2px solid !important;
border-bottom: 2px solid !important;
border-color: #183b8b !important;
}
And it does nothing , and by nothing i mean it doesn't even appear in the style filter of the inspector section if i open the form extern in my browser, so i get nothing i could work with like a syntax error message.
You have to specify the border property if you use border-bottom
Example
border-bottom-width: 33px;
The correct way to write your CSS
background-color: #81a0e9 !important;
border-right-width: 2px;
border-bottom-width: 2px;
border: 0px solid #183b8b;
}
This seems to have the solution I need...
Border radius on Focus input field
Where I want the focus border to match the border radius used for the box itself. As it is right now, the box has curved corners but the focus does not so it looks odd.
I tried...
*:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
and...
.field-box:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
but neither work so I'm thinking something at a parent level is overriding it. When I check for the css in inspect, I don't see it show up so I can't confirm that is the case. I just know that I can make other changes to the form box but not the focus border itself. Anyone know how to address or if there is a way to identify what might be overriding it?
I have a frame in qt qith some components in it. When I change the stylesheet the components in it also change, but i don't want this, as i'm changing only the border of the frame.
border-width: 1px;
border-style: inset;
border-color: #515c84
border-radius: 9px;
Also the border gets two colors and i don't know why.
Can anyone help me please?
The children widgets inherit the parent frame stylesheet. If you want to change the view of the frame only, use this stylesheet:
#frameObjectName {
border: 1px solid #515c84;
border-radius: 9px;
}
Where frameObjectName is the name of the frame.
The border gets two colors, because it's inset style. Use solid border style to get one color border line.
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%;
}