Sharepoint framework language buttons are needs to be show in horizantal position

Question

Hi,

In my spfx webpart used rest api call to bind the data to webpart, with below code language buttons are showing in vertical position but those buttons need to be in horizontal position and my environment is sp 2019 on prem.

Please suggest any one where code needs to be change.

jquery.ajax({   
        url: `${this.props.siteurl}/_api/Web/Lists/GetByTitle('2015')/items?$select=FileLeafRef,EncodedAbsUrl,DocumentSymbol,DocumentType,DocLanguage,DateOfDocument`,   
        type: 'GET',   
        headers: {'Accept': 'application/json; odata=verbose;'},   
        success: function(resultData) {            
          reactHandler.setState({   
            items: resultData.d.results  
  
          });   
        },   
        error : function(jqXHR, textStatus, errorThrown) {   
        }  
    });  
  
public render(): React.ReactElement<IRecentlyOfficialdocsProps> {  
    return (   
       <div className={styles.panelStyle}>  
         <div className={styles.titleWebpart}>Recently uploaded Official-Series documents</div>  
            
         <div className={styles.sectionDocument}>               
             {this.state.items.map(function(item, key){           
               return (<div className={styles.contDocument} key={key}>  
                      <div className={styles.nameDocument}>{item.DocumentSymbol}</div>  
                      <div className={styles.dateDocument}>{item.DateOfDocument}</div>  
                      <div className={styles.nameSection}>{item.DocumentType}</div>                                            
                        <div className={styles.contButtons}>  
                        <div className={styles.btnLanguage}><button id="btnLanguage"><a href={item.EncodedAbsUrl} target="_blank">{item.DocLanguage}</a></button></div>            
                        </div>  
                </div>);   
             })}   
             <div className={styles.btnAll}><button>View All</button></div>                     
         </div>  
       </div>   
   );   
 }  

Regards,
Nagendra.

Answer 1

<div> is a block-level element. This means that its content automatically starts a new line.
You could use CSS to convert block-level elements to inline elements.

selector{display: inline-block;}  

My test code for your reference:

<div id="test1" className={`${styles.test} ${styles.test1}`}>  
          <div >{"item.DocumentSymbol"}</div>  
          <div >{"item.DateOfDocument"}</div>  
          <div >{"item.DocumentType"}</div>  
          <button><a>Arabic</a></button>  
        </div>  
        <div id="test2" className={`${styles.test} ${styles.test2}`}>  
          <div >{"item.DocumentSymbol"}</div>  
          <div >{"item.DateOfDocument"}</div>  
          <div >{"item.DocumentType"}</div>  
          <button><a>Chinese</a></button>  
  
        </div>  
        <div id="test3" className={`${styles.test} ${styles.test3}`}>  
          <div >{"item.DocumentSymbol"}</div>  
          <div >{"item.DateOfDocument"}</div>  
          <div >{"item.DocumentType"}</div>  
          <button><a>French</a></button>  

CSS:

.test{  
    display: inline-block;  
  }  
      
  
.test1{  
   width:100px;  
   height:100px;  
   background-color: aqua;  
}  
.test2{  
   width:100px;  
   height:100px;  
   background-color:brown;  
}  
.test3{  
width:100px;  
   height:100px;  
  background-color: chartreuse;  
}  

I hardcoded the elements to do the test directly.
Test result:

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi Amos Wu-MSFT,

As per your suggestion i have changed my code like below and output is like below. I have used .test and .test1 styles because dynamically generating language buttons.

<div className={styles.sectionDocument}>               
             {this.state.items.map(function(item, key){           
               return (<div id="test1" className={`${styles.test} ${styles.test1}`} key={key}>  
                      <div>{item.DocumentSymbol}</div>  
                      <div>{item.DateOfDocument}</div>  
                      <div>{item.DocumentType}</div>                                            
                      <button id="btnLanguage"><a href={item.EncodedAbsUrl} target="_blank">{item.DocLanguage}</a></button>                     
                </div>);   
             })}   
             <div className={styles.btnAll}><button>View All</button></div>                     
         </div>  

 

In my scenario fields will be in first horizontal row and buttons will be in second horizontal row .

Please suggest me in the code where need to be change.

Regards,
Nagendra.

Answer 3

Hi AmosWu-MSFT,

I have changed the css styles and code, now webpart looking like below. but still fields above the buttons are showing in horizontally.

Please advice me how to show starting 3 fields in a horizontally.

.tsx file code

------------------------------------------------

public render(): React.ReactElement<IRecentlyOfficialdocsProps> {  
    return (   
       <div className={styles.panelStyle}>  
         <div className={styles.titleWebpart}>  
         <label className={ styles.title } id="lblrecently"></label>  
         </div>  
         <div>  
{this.state.items.map(function(item, key){  
return (<div id="test1" className={`${styles.test} ${styles.test1}`} key={key}>  
<div className={styles.nameDocument}>{item.DocumentSymbol}</div>  
<div className={styles.dateDocument}>{item.DateOfDocument}</div>  
<div className={styles.nameSection}>{item.DocumentType}</div>  
<button className={styles.btnLanguage} id="btnLanguage"><a href={item.EncodedAbsUrl} target="_blank">{item.DocLanguage}</a></button>  
</div>);  
})}  
<div className={styles.btnAll}><button>View All</button></div>  
</div>  
</div>   
   );   
 }  

css styles

-------------------------------------------------

.test{  
display: inline-block;  
}  
.test1{  
width:70px;  
height:50px;  
background-color: white;  
}  
  
.nameDocument {  
  text-align: left;  
  letter-spacing: 0;  
  color: #172b4d;  
  text-transform: uppercase;  
  font-weight: bold;  
  margin-bottom: 10px;  
  float: left;  
  margin-right: 30px;  
  font-size: 1.2em;  
}  
  
.dateDocument {  
  font-style: italic;  
  font-size: 1em;  
  line-height: 1.9em;  
  float: right;  
}  
.nameSection {  
  font-weight: 100;  
  text-transform: capitalize;  
  font-size: 1em;  
  line-height: 1.9em;  
  
}  
  
.btnLanguage button {  
  background: #EBECF0 0% 0% no-repeat padding-box;  
  border: 1px solid #DFE1E6;  
  letter-spacing: 0px;  
  color: #004BB3;  
  text-decoration: none;  
  margin-right: 10px;  
  border-radius: 0;  
  padding: 5px 25px;  
}  

Regards,
Nagendra.