Is it possible to align react Fragement? - javascript

I am having a react fragment which shows loader on user clicking button.The loader is shown until response comes.Everything works fine ,except that the fragment which has loader, should be aligned to a little right.As of now my fragment code to show loader(Using Wait from spectrum).
<Fragment >
<Wait size="M" />
Please wait....
</Fragment>
How can I move fragment to right by some distance? I cannot use div as it disturbs the layout.I can though align Wait to center by using align property but it does not support any text on that.

Fragments are not rendered in the final HTML so they cannot be selected by CSS. Therefore, you should use something which can be aligned, e.g. a div or other HTML element, and use CSS to create your desired layout.
If using a div disturbs your layout, I'd recommend revising the CSS of the containing object, if at all possible.

Related

How can I make a slider like in the image? Scrollable and with text and images

I want to make a slider with a scrollable right-justified image and text like in the image, how can I do this? https://prnt.sc/26mtj6v
I am sending a sample site and picture, you can check it. The image I sent has a scrollable image and a box section for text. Half of the 2nd image will be visible and when you slide to the left in the slider logic, 2 images will come to the front and the text inside the box will change.
https://prnt.sc/26mtuw6
Although not exactly the same, our latest project section on this site is an example
http://paul-themes.com/html/liarch/home-default.html
If you wish to make a design like the img below :
For the images of my code below, I'm using Bootstrap 5.1.3 (the class names are mostly from the framework)
1) you will need to use some display: flex on a container in order to have elements in a row and next to each other (create it in your CSS to use that, if you're not using the Bootstrap Framework). Also, add a width:100% on that container in order for it to take the whole space (it's the w-100 class from Bootstrap, or else, add it in your personnal CSS - here 100% is 100% of body)
2) you will need to make that container scrollable with a overflow-x:scroll
3) you will need to create a block (div) for your title and paragraph that needs to be in position: absolute and give it top/bottom/right/left coordinates
5) you will need your container to be in position: relative, so the title/paragraph (step 3) is placed depending on the container
6) you will need to give your imgs a width sufficiently big enough for the scroll to actually start working (you need the elements inside your container to be larger than the container's total width so it becomes scrollable)
This is a quick example I made :
Here is the code of my example
HTML :
CSS :

Set Footer To Bottom Of Page Using JavaScript only

I'm trying to hack a Squarespace template to turn an announcement bar into a footer.
Can anyone advise how to force an element to the bottom of the page using JavaScript only.
No CSS, no jQuery.
Thanks
James
Without CSS you can not place anything in a specific location on the page. You can move things to the end of the HTML (The last tags of the <body> element) But they will still just show inline with the rest of the page.
CSS is required if you want to change the visible location of an element or set of elements.
I am not sure what you mean by no CSS. I understood you want to apply CSS changes with DOM manipulation.
You can apply a position: fixed and float it to bottom.
var container = document.querySelector('.announcement');
container.style.position = 'fixed';
container.style.bottom = 0;
Working fiddle

Treat div as a nonexistent element in HTML

Is adding a display:inline all that is needed for the browser display to treat the <div> as a nonexistent element (do want to consider everything inside the div though) in HTML?
I was thinking of having this div simply as a placeholder to put content into it from javascript and I was wondering whether it would be a good idea to make it display:inline
NOTE By nonexistent I mean that if the user says he wants to display the following on the page
<something here>
<something else here />
....
</something here>
Then the end result on the UI would be exactly what he wanted. Putting a div around it currently is adding a newline between this and other things.
I add this divs around something the user (the user being the programmer that is using the functionality I write) outputs in a function. I want to keep this divs completely invisible to the user. Currently there is a new line injected at times. For example there is a newline in between the two buttons
<div>
<button>Something</button>
<div>
<button>Else</button>
</div>
</div>
As long as you haven't styled the div with any width, height, margin, or padding you can leave it as is. No need to add "display: inline;". It's natural display: block; is just fine and won't take up any space as long as it is empty.
Then, if you inject content with, say, javascript the div will grow to fit the inside content.
Apparently a div has some display properties by default in the browser. Using a tag like <placeholder> seems like a good alternative that does not affect the UI at all.

PrimeFaces inputSwitch not correctly shown if it is in a hidden div

I'm using an InputSwitch inside a <div> that is shown on a button press.
The InputSwitch is not rendered correctly when the <div> is shown - it appears as just a thin gray box. If the InputSwitch is placed outside of the hidden <div> it's fine, so it definitely seems to be related to being inside the hidden <div>.
Is there some sort of initialization I should do when it is shown? My example code is as follows
This is rendered correctly
<p:inputSwitch value="#{bean.booleanValue}"/>
<div style="display:none" class="hidden-test">
This is not rendered correctly after showing the div
<p:inputSwitch value="#{bean.booleanValue}"/>
</div>
Components often dynamically determine their size when rendered. Sometimes in javascript, sometimes in css..If a parent is hidden, their calculated size can then sometimes end up being 0 (depending on how it is calculated or what css is used). Possible solutiuons:
You can try to e.g. give it an explicit width in a style or via a styleClass.
A more complex solution is to bind an 'onShow' event on the paren container en try to call the init function of the inputSwitch

jQuery scrolling doesn't show up

I'm writting a dynamic page using jQuery and I have a problem. I'm for example adding to my html file div's using append() function like this:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'></div>");
I will be creating different amount of that div's base on datebase so that's why I use this variable i to assign different id's for each div.
My problem is that even if I'm creating that div's in body and when I look at code they are in it, if I check body's height it is 0 (width is ok, something like 1200).
Main problem with that is when there are too many div's they are beyond screen but there is no scroll bar. It's something like div's aren't in body although in code they are in.
Could you propose me any solution for that? Or what am I doing wrong? My line of thought is that I'm using $(document).ready so html file is creating a page, but see empty body so height = 0 and all my div's are beyond body. What do you think about that?
Take care of positioning; position:fixed removes your divs from normal flow ->
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
as W3C says
An empty <div> does not have a height. Thus you could add as many as you want to the page and it will never get any longer. For the scroll-bar to appear you need to either set a height to the <div> with CSS like this:
.diamond_div{
height:100px;
}
Or add some content to the <div> so you would have something like this instead:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'>hello</div>");
Then your <div> would have height and once there are enough on the page to go beyond the height of the browser, the scroll-bar will then appear.
Following on from your comments. Setting the position to "fixed" removes the element from the workflow and thus will not extend the length of the page in the normal way.

Categories