Place two buttons next to each other on the same row

Is there a way to align Native Base buttons so they both appear on the same line? Currently, the second button is positioned correctly on the right, but it seems slightly lower than the first button. How can I adjust this alignment?

          <View style={scaledAvailableTripsStyles.buttonView}>
          <Button
          rounded
          style={scaledAvailableTripsStyles.button}>
          <Text style={scaledAvailableTripsStyles.text}>Button 1</Text>
        </Button>
        <View style={scaledAvailableTripsStyles.rightButtonView}>
        <Button
          rounded
          style={scaledAvailableTripsStyles.buttonBlack}>
          <Text style={scaledAvailableTripsStyles.text}>Button 2</Text>
        </Button>
        </View>
        </View>

Styling:

button: {
    width: moderateScale(170),
    height: moderateScale(40),
    backgroundColor: '#31C283',
    justifyContent: 'center',

  },
  buttonBlack: {
    width: moderateScale(170),
    height: moderateScale(40),
    backgroundColor: '#2E3331',
    justifyContent: 'center',

  },
  text: {
    fontSize: moderateScale(14, 0.7),
  },
  searchField: {
    width: 300,
  },
  buttonView: {
    paddingTop: 450,
  },
  rightButtonView: {
    paddingLeft: 200,
  }

Edit: After adding flexDirection, spacing between the two buttons needs adjustment. Any suggestions for creating space between them?

https://i.sstatic.net/bXFpY.png

javascriptcsstypescriptreact-nativenative-base

Answer №1

If you're looking to display 2 items next to each other, consider enclosing them in a View component and apply the style property flexDirection: 'row'.

To achieve this layout, simply include flexDirection: 'row' and justifyContent: 'space-between' (to space out child components) within the buttonView object in your styles.

Answer №2

      <View style={styles.ButtonContainer}}>
       <View style={scaledAvailableTripsStyles.buttonView}>
            <Button
               rounded
               style={scaledAvailableTripsStyles.button}>
               <Text style={scaledAvailableTripsStyles.text}>Button 1</Text>
            </Button>
      </View>
      <View style={scaledAvailableTripsStyles.rightButtonView}>
            <Button
               rounded
               style={scaledAvailableTripsStyles.buttonBlack}>
               <Text style={scaledAvailableTripsStyles.text}>Button 2</Text>
            </Button>
      </View>
    </View>

Custom Styling for the Button Container:

ButtonContainer: {
   flexDirection: 'row',
   alignItems: 'center' //Ensures centered button alignment
}

Answer №3

HTML and CSS Codes

<div class="buttonContainer">
    <button class="submitBtn" type="submit">Submit</button>
    <button class="submitBtn" type="submit">Cancel</button>
</div>

CSS Code

.buttonContainer{
    position: relative;
}
.submitBtn{
    padding: 10px;
    margin-top: 20px;
    width: 49%;
    background-color: teal;
    border-radius: 3px;
    border: none;
    color: white;
    font-weight: bold;
    display: inline-block;
}

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

When an element becomes hidden, the click event will not be triggered

I am facing an issue with a blur event on a text input that toggles on a button (rendered with React). The problem arises when you click on the button, the blur event on the text input removes the button from the DOM but the button click event is not fired ...

javascriptreactjs

Is it possible for me to store the location of an element in the page_source using the .any? method and assign it to a variable for future reference in my Ruby code

My code is scanning the page source for certain constants like ' AA1 ', ' AA2 ', ' AB3 ', and so on. When a constant is found, I want to be able to access the element next to it, which has a dynamic location and changes freque ...

cssrubyselenium-webdriver

Library of User Interface components for React Native applications

As I embark on my journey of building my first major app using React Native, a question comes to mind. Is there a UI framework available for React Native that offers pre-styled components right out of the box? Similar to how Ionic provides a base theme a ...

javascriptcssuser-interfaceionic-frameworkreact-native

HTML does not support the display of characters by unicode

Attempting to retrieve the Unicode of the " ...

javascripthtmlunicode

What is the best way to wrap all divs except for the one with a .header-container-wrapper class?

In the midst of a project involving hubspot, I am facing an issue. I need to enclose all div elements within the body tag, except those with the class .header-container-wrapper. The default code provided by hubspot wraps all divs within #site-wrapper. $(& ...

jqueryhtmlcsshubspot

conducting a validation using ajax when submitting

Currently, I am exploring the implementation of AJAX validation within a submit() handler for a web form. The AJAX functionality is executed using $.ajax() from jQuery. While setting async: false yields successful results, it triggers a deprecation notice, ...

javascriptjqueryajaxasync-awaitonsubmit

Guide to changing a 10-digit number field to a string field in MongoDB

Looking to change the mobile field to a string in MongoDB. { "_id": "1373b7723", "firstname": "name1", "mobile":1000000099 }, { "_id": "137be30723", "firstname": "name2&qu ...

javascriptnode.jsmongodbmongoose

Set up an event listener for all buttons to detect clicks, and proceed to initiate an AJAX request to

Looking for a way to incorporate jQuery into my HTML code. Specifically, I want to create a function that triggers an Ajax post request to retrieve the value of an iframe and append it to the following div: <div id = "contenedorFrame"></div> ...

javascriptjqueryhtmlajaxpost

Is there a way for me to view the names of the images I am uploading on the console?

Recently, I've started using express and NodeJs. I've created a function called upload that is responsible for uploading images. Here is the code: const fs = require("fs"); var UserId = 2; var storage = multer.diskStorage({ destination: functi ...

javascriptnode.jsexpress

Incorporating numerous dropdown menus to a table filled with data retrieved from a database

I have implemented a dynamic table that adds a new row at the end when a button is clicked. One of the columns in the table contains a dropdown list, and I want this dropdown list to display values from a database. This is how I am constructing my table ...

phpjavascript

Issue with datepicker initialization causing format not to work in Bootstrap

I am currently incorporating the angular-bootstrap datepicker module into my app and have run into a minor issue. I am using an input text field and a button to display the date in the following manner: <div class="row" id="datePicker"> <p cl ...

javascriptangularjsdatepickerangular-uiangular-ui-bootstrap

What is the best way to ensure that all rows in flexbox have the same number and dimensions as the first row?

My objective with flexbox was to evenly distribute the text across the width of the page. When I say 'evenly distributed', I mean: If there are 3 sections, the center of the text in each section should be at fifths of the webpage width. This is ...

htmlcssflexbox

How can I retrieve the id and type values within a PHP foreach loop and then transmit them to the server using AJAX?

Currently, I am dealing with 2 files - index.php and changeLikeDislike.php. The problem seems to lie in the JavaScript code where it tries to retrieve the type and id values, but I am unsure of how to address this issue. My JavaScript function is being inv ...

javascriptphpjqueryajax

Having difficulty retrieving the InnerHtml from the editor div of the Bootstrap WYSIWYG rich text editor using c#

I have been utilizing the Bootstrap WYSIWYG rich text editor to create HTML email templates. The editor functions perfectly when checked in the browser. To fetch the HTML contents of the editor div using JQuery, I used $("#editor").html(); In an attempt ...

c#jquerycsshtmltwitter-bootstrap-3

Is it possible to invoke Bootstrap modal functions without using jQuery?

I'm in the process of removing jQuery dependencies from my app, but I still rely on Bootstrap. Is there a way to trigger modal functions like $('#myModal').modal('show') without using jQuery now? ...

javascriptjquerybootstrap-4

Issue: Cannot assign type 'Promise<PostInfo>[]' to type 'PostInfo[]' while updating state

At the moment, I am facing an issue with my function that fetches an API and updates state. Specifically, I encounter an error when attempting to assign a Promise to the state. type DataState = { postList: Array<PostInfo>: }; const [state, setSt ...

javascriptreactjstypescriptpromisees6-promise

Determine whether an element possesses the rel="nofollow" attribute by utilizing CSS in Selenium test cases

In my Selenium test scripts, I am utilizing CSS selectors as element locators. Currently, my goal is to verify whether an element contains the attribute rel="nofollow" using CSS. Does anyone have insight on how to accomplish this task? ...

cssselenium

Challenges arise when dealing with generics in TypeScript

I'm a beginner in TypeScript and I'm trying to write a method with a generic type argument similar to what you can do in .Net. Here's the code snippet I've been working on: class TestObject { Id: number; Truc: string; Machin: str ...

typescript

Style the div element with CSS

Is there a way to style a div element within an HTML document using Sencha framework? I have specific CSS properties that I would like to apply to my div. #logo{ position:absolute; top:20%; left:0%; } Below is a snippet of my Sencha code: Ex ...

javascriptcsssencha-touchextjs

Retrieve the date information from the <td> element, if it exists

There are numerous rows in the table. The table cell labeled "dates" may contain either a specific date or the word "Permanent". If there is a date present and it happens to be greater than today's date, it needs to be highlighted in red. I attempted ...

javascriptjquery