When comparing Pure HTML with React, it's clear that the same content is not displayed in the same

While working with react 0.14 and Foundation 5.5.2, I have come across an interesting observation regarding Foundation's button groups. When I manually write them in HTML, the button groups expand to fill the entire horizontal space. However, when I use React to render them using the same code, they do not fill the space as expected.

I compared the CSS styles between the two versions using a diff tool but did not find any discrepancies. Even upon inspecting the code, no noticeable differences were found. I also tested this on different browsers, yet the issue persisted.

To illustrate the problem, I created a JS-fiddle. The demonstration clearly shows that while the button groups manually coded in HTML span the full width, the ones rendered by React do not.

.
javascripthtmlcssreactjszurb-foundation

Answer №1

There is a difference between the rendered HTML when comparing plain HTML and React-generated HTML. The indentation in plain HTML results in whitespace between <li> elements, but React removes this whitespace (potentially due to the JSX transpiler).

To address this issue, I have modified the fiddle by encapsulating the indentation with HTML comments. This adjustment prevents the whitespace from being rendered, ensuring that both outputs are now identical: https://jsfiddle.net/2z8krnpu/

As a result, the rendered outputs are now exactly the same.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize the Image within <CardMedia>

I'm working with an array of images and I want to update the image in the Card Media component whenever the user clicks on it. My challenge is figuring out how to get the next image from the array based on the current index. Any ideas? <Grid item ...

reactjsmaterial-designmaterial-ui

Issue arises with variable not defined upon submission of ng-change event

Currently, I am attempting to save a variable from the date type input in HTML using AngularJS. In previous instances within this application, I was able to accomplish this with select tags instead of input tags and everything worked perfectly, confirming ...

javascripthtmlangularjs

Is it possible to adjust the display size of a component in Angular using a selector?

Currently, I'm facing an issue with the size of a selector, <component-selector></component-selector>. It seems to be displaying too large and cutting off the right side of the contents. I've attempted the following code: <div sty ...

javascripthtmlcssangularselector

Integrating AWS IVS quality plugin with video.js for enhanced video streaming in a Next JS application

Hello, I am new to AWS media services and recently started experimenting with AWS IVS for video streaming. I am currently working on integrating the AWS IVS quality plugin to Video.js. The player is up and running, displaying the video, but I encountered a ...

javascriptamazon-web-servicesnext.jsvideo.jsamazon-ivs

Creating a Kendo UI grid within a Kendo UI window and utilizing Knockout JS bindings

I'm encountering an unusual issue while working with Kendo UI and Knockout JS libraries. When attempting to display a kendo grid within a kendo window, the rows inside the grid are being duplicated. Below is a snippet of the code I'm using: JS: ...

javascriptknockout.jskendo-ui

Retrieve servlet input with JavaScript and use Ajax to set the value to a text box

I am working on a servlet that retrieves values from properties files. I need to pass these values to my JavaScript using AJAX and set them in a textbox. As I am new to Ajax, I would appreciate if someone could help me by analyzing the code. SERVLET ...

javascriptajaxservlets

Troubleshooting Problem: Difficulty accessing Controller in AngularJS Module

I am facing difficulties with communication between my application and a module that I have developed. Below is the AngularJS module that I created. (function (document, window) { 'use strict'; var piCart = angular.module('piCart& ...

javascriptangularjs

Show real-time data from mongodb on an HTML webpage

Currently, I am developing a Python project and I am looking to retrieve and showcase real-time data from MongoDB. Specifically, I want to exhibit new data in an HTML table page immediately after it's added to the database, while the rest of the data ...

pythonhtmldjangomongodb

What steps do I need to take to modify a JSON parser?

I need assistance in converting a parser to JSON for a new server response. Previous server response: {"names":[{"name":"Oleg","act":0,"total":0},{"name":"Vitya","act":2," ...

javascriptjsonweb

What is the limitation of including a string constant with "</script>" inside a <script> block?

I am genuinely curious about this: I thought that the following code would be valid within an HTML document: <script> var test = "<script>why? </script>"; </script> However, it turns out that this leads to an "unterminated str ...

javascripthtml

Ways to induce scrolling in an overflow-y container

Is there a way to create an offset scroll within a div that contains a list generated by ngFor? I attempted the following on the div with overflow-y: @ViewChild('list') listRef: ElementRef; Then, upon clicking, I tried implementing this with s ...

javascripthtmlangulartypescriptngfor

Unable to Click on Selenium Element

When a link is clicked on a website, the URL remains unchanged but a popup appears on the screen containing elements that can only be accessed after running driver.switchTo().defaultContent(). To access these elements, I have used a javascript executor com ...

javascripthtmlselenium

Angular filtering arrays of data

$scope.currentEvent = Object { item_id: "10535", name: "johnny", user_type: "1",category_id: "5"}, Object { item_id: "10534", name: "smith", user_type: "1",category_id: "6"}, Object { item_id: "10536", name: "Greg", user_type: "1",category_id: "7"}; $sco ...

javascriptangularjs

What values can be used for the CSS Property "padding-right-ltr-source"?

Currently, I am facing an issue with box padding specifically in Firefox. Upon inspecting the affected span element, I noticed a property called "padding-right-ltr-source" with the value "physical". Here is the snippet of code: >padding: 0px 15px; ...

cssfirefoxpadding

Is it possible to perform cross domain AJAX calls while implementing Basic Authentication?

Having a ColdFusion application located behind an ISA Server presents some challenges. In this case, part of the application requires Basic Authentication while another part does not. The issue arises when trying to access cookies set by the ISA Server upo ...

javascriptajaxcoldfusion

The utilization of the useframe function led to the context being lost in the three.js

Attempting to animate the size of a React 3 Fiber drei Box component using useFrame has presented some challenges for me. The geometry functions smoothly until I introduce the useFrame function, which triggers a THREE.WebGLRenderr: Context Lost error in th ...

reactjsthree.jsreact-three-fiberreact-three-drei

Troubleshooting a JQuery GET request failure

I'm attempting to send a GET request once the user inputs a value and use that input as a parameter, but nothing seems to be happening. The alert outside the get function is working fine. Here's my code: $(document).ready(function(){ $( "input[ ...

javascriptjqueryajaxhtml

Retrieve the currently selected element following the button press

My webpage features a Carousel with the following structure: <div class="my-controls"> <button class="button123"> <span class="abc">Next-image</span> </button> </div> <div class="my-carousel"> ...

javascripthtmljquery

Step-by-step guide on displaying elements within an array of objects

Upon receiving an object from a website, I discovered that it includes an array of objects along with other parameters. When I use console.log(req.body.cart), the output is [ { title: 'iphone 6', cost: '650' } ], but I only require the ...

javascriptjsonnode.jsexpress

Issue with Material UI components failing to return an HTMLElement reference

When working with certain libraries that require the ref prop to return an HTMLElement, I have noticed that 99% of MUI components do not fulfill this requirement. What am I missing? How can I obtain a reference to the root element of a component? import R ...

javascriptreactjsmaterial-ui