I've two radio buttons with Drop down and I need to put the drop down
in parallel to the second radio button,when we add to the css code
the following its working but this is not a good solution since if I've
bigger page with other control this can override them either
#__box0 {
margin-top: 20px;
margin-left: 20px;
}
there is another option to do that with CSS?
http://jsbin.com/ziziqeyopu/edit?css,js,output
The Html is renders in the renderer method
This is SAPUI5
http://openui5.org/
code but for the question its not relevant since
renderer is related to pure html/css...
i've tried with the following which doesnt works.
.mylist-content>div:first-child {
margin-right:30px
margin-top:50px
}
.mylist-radiolist>DIV:last-child {
margin-left: 30px;
margin-top:100px;
}
If you still haven't figured it out, give this a try:
.mylist-content #__box0 {
position: relative;
top: 20px;
left: 20px;
}
What you see above should do the same thing as your first attempt, but not interfere with anything else on your page, by:
Adding extra application restrictions to the CSS rule, by having the .mylist-content scope restriction (even though this should not be necessary, in theory, because #__box0 is an ID and should be unique on the page).
Shifting the position of the dropdown without affecting any other elements - this is done with position: relative and the corresponding top and left offsets.
Without knowledge of SAP UI and/or your particular situation, I doubt someone will be able to give you a more appropriate answer.
Related
Sorry about this absolutely newbie question, but I've been searching for an already similar post, and couldn't find it.
My question is:
I have a paragraph text in my HTML code which I want to automatically change into a new text once I click a specific Button.
Can this be done with CSS only, without any javascript?
Since some users block javascript, that's why I was looking for a way around...
Thanks a lot.
actually #Vaidya & #Preet it is possible via css only :
https://css-tricks.com/swapping-out-text-five-different-ways/
#fana you'll need to use a plus selector or tilde selector to make the changes affect the following div not itself but other than that you're good to go.
I can see that using css to replace content is strongly discouraged within the stackoverflow community. However I haven't found another cause other then that of code cleanliness.
I really think in coming years the true potential of CSS/SASS will unravel and people will cease to see the programmatic/dynamic as strictly excluded from CSS/SASS.
It can't be done through CSS You must need to add a script for an on-click event.
I know it is not what you exactly want but it can give you idea about it and with some changes you can make it.(but conditional and on click event using css is definitely not possible, you need javascript for that)
If you can make it work on Text click itself then it is easily possible. You only need a checkbox which is hidden and label in which you will show text. On click of text you can swap into anther text with only css:
#example {
position: relative;
}
#example-checkbox {
display: none;
}
#example-checkbox:checked + #example:after {
content: "Hide";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
}
<input id="example-checkbox" type="checkbox">
<label for="example-checkbox" id="example">Show</label>
Reference See css only part.
Hope it will help you.
I'm just trying to get the backgrounds touching on their long edge; like in this code, but with the two blues touching.
the code i have:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
You have to normalize the css (overwrite the default states of padding and margin properties).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
As much as Kind User's answer solves your problem perfectly, you will still find yourself having to ask for help again next time a similar problem occurs. So rather than attempt to answer your question directly, I will explain how to figure it out for yourself.
Your browser will have an inspector (usually right click and choose Inspect from the context menu). I often use Firebug which is an extended inspector you can install as a plugin, but it is not essential for this task and the one built into your browser will suffice.
Click on the button on the top left of the inspector that looks like a cursor over a box, then click on any element on your screen to select it.
You will see under 'rules' all of the CSS rules that are currently affecting that element. Selecting the 'box model' tab will allow you to see the size of the element itself as well as the padding, border and margin on each side. Hovering your cursor over the element will also highlight each part of the box model separately so you can easily tell that the white space you saw was part of the margin.
To test this theory, you could go back to the rules tab and create a new rule stating margin:0px; and you will immediately see the effects. This is an effective technique for checking what CSS changes would appear to do before adjusting your actual file.
Side note: Just for clarification, although I would like to think it was obvious, I never make such assumptions. Any changes made in the inspector are entirely non-persistent in that they will not be saved in your file. If you refresh the page it will reload from the file and any changes made in the inspector will be gone.
¡Hello! I designed a Budget Calculator and implemented it in Drupal 7. You can see the result here:
http://www.delengua.es/curso-espanol-espana/calculadora-de-precios
I'm sure it has a lot of errors. But the one i want to fix is related to the position of the blocks. You may see that if you click on some option in the optgroup called "Cursos" (or in another one), you'll se an information square sided to the right of the table (i mean the table that contains the form). Specifically, if you click on "Cursos específicos" and you select something in the new optgroup, you'll get two information blocks. As you can see if you inspect them, they're positioned like this:
display: none;
position: absolute;
right: 6.5%;
top: 12.5%;
margin: 15px 15px;
width: 220px;
height: auto;
padding: 10px 10px;
Though that looks as working fine, it changes the position in firefox, and i'm frightened that it will cause more trouble. So my question is... would it be any other way to position it in relation to the table? I mean, the 'y' position should be the same as the table, and the 'x', the same + some number of pixels. I think it can be done through two ways:
a) With JavaScript (i don't know how, but i guess i could learn googling it).
b) Just with html and css.
As i prefer this option, i've tried to group the table and the information labels in only one '<div>', to declare the labels as 'inline:block;', to float them to the right, but when i do one of those things, i cannot modify the "top" position property. I got that ideas from other threads in Stackoverflow, but i don't know what can i try else. So i'll really thank any help.
Making a parent container position: relative will make the position: absolute on these elements relative to that parent container. Also, top/bottom/left/right attributes only apply for position: fixed, position: relative, and position: absolute. Floated elements ignore them unless one of those positions is defined, in which case the float is ignored.
I've tried something close to what you've said in the question and it worked for me without any problems.
First of all, wrap your form and infos in one div, like this:
<div id="wrap">
<form id="calculadoracont" method="post" onclick="test()">
// Your form
</form>
<div class="informacion" id="infoespecificos">
// Your info
</div>
<div class="informacion2" id="infoliteratura">
// Your info
</div>
// Your other infos
</div>
And in your css, just float them to where you want:
form {
float: left;
}
.informacion, .informacion2 {
// Remove the position absolute
float: right;
}
That will give you the same layout without absolute positioning.
Give it a try and let me know if it helps!
I am building a collaborative coding environment which has multiple user cursors. I need to show user's nick when other user hover on their cursor in a tooltip (like google docs does). I've tried every way I could think of injecting DOM into the class that I give to the cursor, but tooltips just don't show up.
How can I show a tooltip on the cursor (caret) when a user hovers on it?
I know this is late but it might help someone in the future.
I had the same issue in Ace where I firstly couldn't get any tooltip showing, and secondly couldn't get it to show on hover.
Hover
Marker nodes have pointer-events: none in Ace, so hover is essentially disabled and needs to be re-enabled.
Add pointer-events: auto to the marker/caret.
I.e:
.ace-multi-cursor {
pointer-events: auto;
}
Ref: https://github.com/ajaxorg/ace/issues/2720
Title/Tooltip
I was using ace-collab-ext. So to add the username above the caret I edited AceCursorMarker.js by adding <span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span> and recompiling ace-collab-ext.min.js. Below is where I added the title span:
// Caret Top
html.push(
'<div class="ace-multi-cursor ace_start" style="',
`height: ${5}px;`,
`width: ${6}px;`,
`top: ${top - 2}px;`,
`left: ${left + 4}px;`,
`background-color: ${this._color};`,
`"><span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span></div>`
);
There may be an easier way to do this that suits you, but this way worked for me especially with keeping the background-color permanent, as the attempts I made through js/css didn't persist after initialisation (cursorManager.addCursor).
CSS
This is the total css I added to my solution:
.ace-multi-cursor {
position: absolute;
pointer-events: auto;
}
.ace-multi-cursor:hover > .ace-multi-cursor-username {
opacity: 1;
}
.ace-multi-cursor-username {
opacity: 0;
pointer-events: auto;
}
My solution ended up looking and functioning exactly like the Google Docs marker, caret and tooltip.
Unfortunately it's not trivial to do. And requires more code than i can add to this answer. But there are several implementations available on github e.g https://github.com/sharelatex/web-sharelatex/blob/a91ec74d1256ad063cd37693aab620b6f1a6ce0d/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee#L102 which you can test on https://www.sharelatex.com/
A little warning: I'm just starting out with css and js/html.
I'm trying to get a wrapper to wrap around a text box. As I understand it, divs without explicit dimensions wrap their content (height/width: auto). I'm using jquery to wrap an element element with a wrapper for a label. I'd like it to wrap the entire input box (as I believe it should considering the input box is within the div), but it doesn't seem to be as simple as wanting...
For some reason, I can't get the properties of my wrapper to change after setting them - even using the Chrome JS console. So even going in and manually setting the height of the wrapper div to 40 doesn't change anything.
Here's the fiddle everyone so far has been asking for - there's not much more to this question. I just want the div to wrap the input, which it isn't.
http://jsfiddle.net/5vBz4/
As far as I know, my input styles aren't conflicting, either:
input.floatlabel {
font-family: Helvetica;
font-weight: 100;
font-size: 15px;
height: 40px;
width: 40%;
text-align: center;
}
This is what I have so far, and the result.
As I understand it, you want:
.wrapper {
display: block;
}
Fiddle