I'm hoping I don't need to provide a repro demo here if this question can be answered right away. I'd like to remove all div elements under the parent div with id="daterangescontrol" everytime I upload a file to my Shiny app. So my code is like this:
removeUI(selector = "div#daterangescontrol div")
FYI under div#daterangescontrol, there are div#daterange1, div#daterange2...div#daterange(n) generated dynamically depending on the number of columns in the dataset, which can be converted to Date. My objective is to remove all these div children when a new file is uploaded (new dataset). However. the above line of code can only remove the first child, e.g. div#daterange1. I wonder whether it's because I didn't use the right syntax for the selector. I'm not quite familiar with css. Would anyone please help? Thanks!
EDIT:
The demo code is provided in my other question post:
How to validate date range input in Shiny
please check removeUI in observeEvent(input$file).
removeUI("#daterangescontrol > div", multiple = T)
Related
I have a basic 2 column table for a form. In the left column are the labels, and in the right column are the inputs. When the user submits the form, if there are errors I want to display them directly to the right of the input in which the error was relating to. Could anyone provide an example of how to position a div next to the table row without shifting the columns across?
You could have the <div> representing the error inside of the <tr>. If there is no error it could just be empty. You can use a js templating framework like Mustache.js to pass arguments into your <div>.
I would encourage the use of Flex Grid. This is a CSS ruleset that will help you layout your form. You can still use two column format, with the only change being the you will probably want to reduce the size of the first column relative to the second column, to leave room for an error message.
Another option would be to use abandon tables and use CSS Grids instead.
Take a look at these links for more information:
http://flexboxgrid.com/
https://css-tricks.com/dont-overthink-flexbox-grids/
https://css-tricks.com/snippets/css/complete-guide-grid/
In my Adobe Edge project, I'm trying to create a website that adapts according to the width of the window. So my plan is:
1. Check the width when the site is loaded and adapt the elements if necessary.
2. Check the width whenever the window is resized and adapt the elements if necessary.
In order to do this I've created this function.
function adapt() {
if ($( window ).width() <= 800) {
sym.$("testo_box").css("width", "99%");
sym.getComposition().getStage().$("corpus_txt").html("Test");
}
}
You can see what the elements are in the attached image.
Elements
The first problem is I couldn't find any way to create this function in such a place and in such a way that it can be global, and call-able from within other scripts.
But my main problem is this: when I place this function inside Stage -> window.resize, and call it with:
adapt();
It works perfectly. But when I place it inside Stage -> document.compositionReady and call it the same way, the following line:
sym.$("testo_box").css("width", "99%");
doesn't produce the expected result. It does nothing.
I'm sure the if condition is checked and verified, because the other line:
sym.getComposition().getStage().$("corpus_txt").html("Test");
produces the expected result.
I have a workaround for this, which makes use of the timeline and labels, but quite frankly is very impractical.
Just to clear things, up, I know it's pointless to create that function to call it right below from the same "place" and only once. The result would be identical if just the "if" part was there. The plan is to make the function global and just call it from those "places".
Thanks to everyone who will be so kind to help out a newbie like me, and hopefully the answers will help other people as well.
Is there any way to make the text within an <a> tag selectable, using CSS?
I can't seem to be able to search this query for useful results on the web, "a" just finds the word "a" :)
I don't control the original creation of the document.
Are you trying to do this in a XUL document?
If so, you're probably looking for the following CSS property:
-moz-user-select: text;
I've used that on "description" elements with success but never tried on an "a" element.
You're either literally trying to just select text inside of an anchor element as a user.
OR
You're trying to use JavaScript to select text inside an anchor for the purposes of utilizing that text.
If it's the first simply select the text just at the edge outside of the anchor, if the selected character is 49% of less closer to the anchor then the browser won't select that character.
If you're trying to use JavaScript to get the text of an anchor you'll want to look at my tutorial, try selecting text and then clicking on the anchor below. That should give you some much needed direction...
http://www.jabcreations.com/blog/javascript-parentnode-of-selected-text
If none of that helps it would greatly benefit yourself as well everyone else reading your question to communicate your goal with greater clarity.
The nature of <a> is a link on HTML.So when mouse clicked on the text inside <a> the trigger of the link automatically triggered. I think it could not archive just by CSS alone. JavaScript need here
Run JavaScript Code
may let you select the text and handle click (if necessary )
I am having a weird problem with CSS.
I am trying to achieve the following.
I can have people search for a name or a part of a quote in a database and I would like to display this into a box (in this case a form ,which is easy for styling).
Problem is, the total box should have a gradient green color, but not the entire fetched data is retrieved with a green layout.
I have debugged and it seems to work just great:
I have both echo and alerted my output and it is just a normal form with table rows in it..
Here's the result outcome:
pastebin.com/AZAv6bpX (broken)
Here's my css:
pastebin.com/NATwyki6 (broken)
Here's what it looks like:
Notice the table rows still continue-ing after the gradient has stopped.
I have adjusted the table entry margins, for the div (results) they are placed in. So I am 100% sure the outcome is as I want it.
So basically I got:
code from pastebin here
And this weird layout.
Can anybody please help me out?
Either take your float:left off of your table or set overflow:auto on your form.
jsfiddle link
Because your form contents are set to float, they are taken out of the flow, and so your container will not wrap around them.
The simple fix for your css would be to add in the following;
form br { clear:both }
and then make sure that you fix the final </br> in your form to be <br /> instead.
Is it possible to calculate if an element is at the start of a new line within a <p>? For example take a look at this screenshot:
You'll see that the Twitter button has a slight margin to it. This is fine when it's following a word, but I was wondering if there was a hidden CSS gem that'd allow me to say "if you're the first 'thing' on a line then lose your margin-left".
Edit: The answer was p button:first-child or p > button, but neither work. See the comments.
You might want to set the margin to 0 all the time and then make sure the button always has a space before it. (Edit: won't work either, since a space is not enough. Again, see the comments.)
It is possible to do this calculation programmatically using JavaScript, but I'm not aware of any CSS tricks that will do it for you.
The basic JavaScript algorithm for doing this is to append an invisible node to your document with the same text styling as your paragraphs of text. Then you gradually add text to it, checking its width after each addition to see where the linebreaks are. Then when you've worked out what the width of the final line is, you check to see if that width would put the twitter button on the next line by itself, and update the CSS styles appropriately to remove the margin. This needs to be done for each <p> on the page that includes a twitter button.
It's not the most straightforward approach (in fact, Mr. Lister's solution is far simpler and produces a comparable effect as long as the margin is not more than a few pixels wide), but it's not quite as bad as it sounds, either.
Here's an example:
http://jsfiddle.net/fBUnW/6/