I'm developing an app for use with TideSDK. Obviously, in Chrome, the user can select any html text he sees. However, in TideSDK, it appears that text selection is disabled by default. I imagine a simple setting will allow it, but after Googling and looking in the documentation, I can't find anything to show how to allow the user to select text. Can anyone point me in the right direction?
body, p
{
-webkit-user-select: auto;
}
I tried the code above. it worked...
By default the body loads the -webkit-user-select: auto; in body section of tideSDK so the contents are not selectable
Found the answer. You must use -webkit-user-select: auto|text for the element you want to be selectable. Not sure why text is not selectable by default.
Related
I would like to allow users to copy and paste text from PDF documents. However when I inspect the page (with Chrome dev tools) where we are rendering the PDF document, I notice there are styles that set user-select to none. I can't find anything in the react-pdf documentation that indicates how to allow users to select text. Hoping someone knows how!
Here are the CSS rules that are defined on .react-pdf__Document > div > div > div. We could certainly override it with !important but I'm hoping there's another way.
{
position: absolute;
inset: 10px 20px;
height: 1229.41px;
width: 950px;
user-select: none;
}
you can manually add user-select: none to the following class:
.react-pdf__Page__textContent
This works for me
The browser is responsible for handling user choices thus the user interface allows the user to copy print / read aloud or otherwise interact with the text transferred download either when using a real PDF download/renderer or in react-pdf cases a web reproduction of a PDF.js.
If you serve "Image Only" as PDF then the browser needs to use any OCR screen reader.
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
I can't seem to change the style of the search box on my website. This is the website. Any help with a CSS code would be appreciated.
https://urbanyogalab.com/
These are elements that are your search box:
For example, if you want to remove borders for input field, you should do something like this:
.is-menu.is-dropdown form:not(.is-search-form) input[type=search] {
border: none;
}
Similar to other elements you need changed.
Browser developer tools like Inspector are of great help in such situations.
I want to change the beam looking I thing that appears when you hover over text. However, I've only been able to change the pointer cursor. Is this possible in CSS?
Edit: I wanna change the way the text version of the cursor looks like. Instead of being the I beam, I want it to be a custom image. Is this possible?
you need to use css to style the cursor with " cursor: someStyleName "
ex that makes it a crosshair:
span.myclass {
cursor: crosshair;
}
this link shows a use (in html, but the code is the same in css) and a demo of what it looks like, as well as many of the different style types:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
ps: this site in general is great for web dev info.. even java/jquery stuff.
when I make a number input field like this:
<input type="number" />
Then the number field gets a spinner added to it whenever I hover over the field. A lot of people talk about how to disable these spinners like this:
http://css-tricks.com/snippets/css/turn-off-number-input-spinners/
But I would like to know how do you make them ALWAYS visible and not just when you hover over them?
It's the Chrome opacity settings that are giving you a headache. This will solve your issue:
input[type=number]:hover::-webkit-inner-spin-button,
input[type=number]:hover::-webkit-outer-spin-button {
opacity: 1;
}
This being the problem is kind of opaque.
To make the spinner always show, leave out the ":hover" in Schneeez's answer.
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
It is not possible to do this with the Browser specific style.
You would need to either build that functionality yourself using some Javascript or look for a premade script on the interwebs.
You can only hide those Shadow DOM elements as they trigger very browserspecific css-attributes to provide the functionalitys like onclick or onhover.
See: http://css-infos.net/property/-webkit-appearance (You could trigger another behaviour for your Input-Field, but you cant force it to be always visible)