I need to place the icon of my sap.m.Button on top of the text.
I found this blog post: Button with text UNDER the icon
but unfortunately, this method doesn't seem to work anymore.
Is there a convenient way of placing the icon on top of the text using CSS?
You can achieve it using custom class & CSS
VIEW
<Button class="newBtn" icon="sap-icon://sys-help" text="Default Button" />
CSS
.newBtn .sapMBtnInner {
height: 4rem; /* Increase it to 6rem */
}
.newBtn .sapMBtnText>.sapMBtnIcon {
display: contents;
line-height: 3.8rem; /* Add this line when you are using height as 6rem */
}
.newBtn .sapMBtnInner.sapMBtnText {
padding-left: 0.75rem;
}
.newBtn .sapMBtnIcon {
font-size: 1.7rem; /* Icon size */
}
.newBtn .sapMBtnContent {
line-height: normal;
}
Related
enter image description hereText inside button is extending outside of the button. Is there anyways I can make the text scale based on the button/screen size? I already tried doing auto and searching youtube and google. Also used media query.
I already tried doing auto and searching youtube and google.
#media(min-width: 400px) {
.purplebutton {
min-width: 350px;
}
.buttontext {
font-size: 16px;
}
}
#media(min-width: 600px) {
.purplebutton {
min-width: 450px;
}
.buttontext {
font-size: 17px;
}
}
#media(min-width: 800px) {
.purplebutton {
min-width: 550px;
}
.buttontext {
font-size: 20px;
}
}
Expected result is the text to fit inside the button and size of font adjust according.
Actual result is the text extends outside the button
Instead of using absolute scaling units (px) for font-size use relative scaling font-size such as em, rem or vw.
Try using word-break property to the button like this
word-break: break-all;
I have a quick question, I know that I can edit a placeholder text for an input field using CSS. But I was wondering how I can add padding to the actual text (the text that the user types in). I have provided an image below, I have added padding to the placeholder text but am struggling to add padding to the actual text for the input field so that it is aligned with the placeholder text.
Here is what I have tried:
.form TextInput {
padding-left: 10px;
}
This obviously isn't working and I was just wondering if anyone else has a solution?
Image link
Edit: I am not trying to move the input field itself, just the text inside. Just like I did with the placeholder, but only this time I want to move the text to match the position of the placeholder.
Link 2
Padding on the input; for users typing in the field or a preset value parameter:
.form input[type="text"] {
box-sizing: border-box;
padding-left: 10px;
}
Padding on the placeholder:
.form input::placeholder {
padding: 10px;
}
You have to give css to the input field as follows
.form input[type="text"]{
padding:10px;
}
Check this fiddle here
1 - Padding for input, where user can type:
.form input.TextInput {
padding-left: 10px;
}
2 - Padding for placeholder of input:
.form input.TextInput::-webkit-input-placeholder { /* Chrome/Opera/Safari */
padding-left: 10px;
}
.form input.TextInput::-moz-placeholder { /* Firefox 19+ */
padding-left: 10px;
}
.form input.TextInput:-ms-input-placeholder { /* IE 10+ */
padding-left: 10px;
}
.form input.TextInput:-moz-placeholder { /* Firefox 18- */
padding-left: 10px;
}
Use css prefixes for cross-browser compatibility.
Amateur with both CSS and vaadin here, trying to implement a responsive UI in Vaadin, but having issues with setting widths of UI objects; everything seems to break responsive CSS. Heres an example of what I'm describing:
CssLayout filterTypeLOptimiseBLayout = new CssLayout();
filterTypeLOptimiseBLayout.setResponsive(true);
filterTypeLOptimiseBLayout.addStyleName("flexwrap");
filterTypeLOptimiseBLayout.setSizeFull();
Label filtTypeLabel = new Label("Filter Type Filler");
filtTypeLabel.addStyleName("filtTypeLabel");
filtTypeLabel.setSizeFull();
filtTypeLabel.setResponsive(true);
filterTypeLOptimiseBLayout.addComponent(filtTypeLabel);
And the corresponding responsive CSS block applied to filtTypeLabel:
/* ---- Filter Type Filler Label ------*/
//Basic inherited CSS
.filtTypeLabel {
padding: 5px;
}
//Mobile
.filtTypeLabel[width-range~="0-300px"] {
font-size: 12pt;
margin: 5px;
}
//Small Browser
.filtTypeLabel[width-range~="301px-600px"] {
font-size: 14pt;
margin: 10px;
}
//Big Browser
.filtTypeLabel[width-range~="601px-"] {
font-size: 16pt;
margin: 20px;
}
With the previous code, I achieve scaling of the button font and margin as expected, but I'd like control over the width of the label as well. Using filtTypeLabel.setSizeFull(); causes anything on the same line as the label to wrap around to the next line as the label occupies all space horizontally. Calling filtTypeLabel.setWidthUndefined(); instead breaks the responsive scaling, and filtTypeLabel.setWidth("5%"); breaks it too. Setting max-width and min-width in the CSS also breaks it.
Is there any way to apply a set width to a Responsive CSS enabled object?
Width-range check works for specific component, not for your window size. So if your component always has the same size, this check will show the same result all the time. You need to create such component, responsive and with width-range styles, which will change its size depending on window size. And all your responsive children must have child styles.
CssLayout filterTypeLOptimiseBLayout = new CssLayout();
filterTypeLOptimiseBLayout.setResponsive(true);
filterTypeLOptimiseBLayout.addStyleName("flexwrap");
filterTypeLOptimiseBLayout.setSizeFull();
filterTypeLOptimiseBLayout.setResponsive(true);
.flexwrap {
.filtTypeLabel {
padding: 5px;
}
}
//Mobile
.flexwrap[width-range~="0-300px"] {
.filtTypeLabel {
font-size: 12pt;
margin: 5px;
}
}
//Small Browser
.flexwrap[width-range~="301px-600px"] {
.filtTypeLabel {
font-size: 14pt;
margin: 10px;
}
}
//Big Browser
.flexwrap[width-range~="601px-"] {
.filtTypeLabel {
font-size: 16pt;
margin: 20px;
}
}
I've managed to change the Logo the way I want it using Logo using CSS but I'm struggling to figure out how to change the hover color of it.
I want to change the TEST color on hover from blue to something else
http://test.peterstavrou.com/
At the moment my CSS code is
header#top #logo {
letter-spacing: 2px;
font-size: 35px;
}
your Logo-Text is a link so you should use css-syntax for styling links:
a#logo:link { color: #fff; } /* a Link that has not been clicked yet */
a#logo:visited { color: #fff; } /* a link that has been clicked before */
a#logo:hover { color: #ff0; } /* a link on hover/rollover */
a#logo:active { color: #ff0; } /* a link that is just clicked */
Just do something like:
Solutions 1 Find the logo hover css and change the color property value to whatever color you want
color: red!important; /* change the property value to the color you want */
Solution 2 Create another hover CSS and force a change as shown below, if the above doesn't work
#logo:hover {
color: red!important;
}
Note: Make sure the code above is at the very bottom of your css file. that way, it will override the previous hover property defined, even if it has important
Add this below the code for header#top #logo { ... } that your sample is showing in the CSS.
header#top #logo:hover
{
color:red;
}
I know about how to stylize the placeholder from here css tricks
But I need to know about how to apply to a specific text area.My text-area has class "message".
Thanks.
Actually I used padding.But was interested about thee styling of placeholder with a css3 seelctor.
any help?
All you need is .message { padding-top: 10px; } to achieve the result you're after.
It will apply to any <textarea> that has the class of message
EDIT
If you don't want to apply padding to the element, try this instead. It literally just targets the placeholder.
.message::-webkit-input-placeholder {
padding-top: 10px;
}
.message::-moz-input-placeholder {
padding-top: 10px;
}
.message:-moz-input-placeholder {
padding-top: 10px;
}
.message:-ms-input-placeholder {
padding-top: 10px;
}
Can be seen in action here, I set up 2 <textarea>'s to show this - http://jsfiddle.net/andyjh07/tan7k4rf/
This what you are looking for?
<textarea placeholder="Placeholder text!" class="message"></textarea>
<textarea placeholder="Placeholder text!" ></textarea>
.message::-webkit-input-placeholder {padding-top: 10px;}
.message:-moz-placeholder { /* Firefox 18- */padding-top: 10px;}
.message::-moz-placeholder { /* Firefox 19+ */padding-top: 10px;}
.message:-ms-input-placeholder {padding-top: 10px;}
http://jsfiddle.net/92gnt7qt/3/
Use this CSS:
textarea {
padding-top: 14px;
font-size: 1.0rem;
}
textarea::-webkit-input-placeholder {
padding-top: 0px;
}
textarea::-moz-placeholder {
padding-top: 0px;
}
textarea::-ms-input-placeholder {
padding-top: 0px;
}
Just apply CSS for that class...
.message{padding-top:10px;}
Or
padding:10px;
If you want to apply padding on all sides
AND apply it to text area:
<textarea class="message"></textarea>
You Can Try this .Its working Fine and Tested !!!
<body>
<textarea placeholder = "Enter Your Stuff Here !! Area" class "message"></textarea>
</body>
And you can Add css to class as Follows:
.message {
padding-top : 12px;
}
Give your text area an ID and use that to assign css rules.
e.g.
(html)
<textarea id="thisOne" style="message">
(css)
#thisOne -moz-placeholder {
padding: 5px 0 0 0;
}