Select box layout on elementor for wordpress

Hello everyone,

I am currently struggling with my select boxes. I found a very simple layout that matches with my expectations, see the code at the bottom :

Unfortunately, here is the result in Elementor :

Even using style=“width:200px”, the select box stays on the ligne alone, aligned on the left.

Here is the full code :

<!DOCTYPE html>
<html>
<body>

<h1>The select element</h1>

<p>The select element is used to create a drop-down list.</p>

<form action="/action_page.php">
    <label for="cars">
  UK to have European space centre
  
<p>The European Space Agency (ESA) is to open a research centre in Britain. The facility, which 1): <select name="1" id="1">
  	<option value=""></option>
    <option value="A">would</option>
    <option value="B">will</option>
    <option value="C">would be</option>
    <option value="D">will be</option>
    <option value="E">is</option>
  </select> based on the Harwell innovation campus in Oxfordshire, will concentrate on space robotics and climate change science. The UK has been the only major ESA member not to host one of the agency’s technical or administrative centres.</p>
  
<p>The agreement to open the facility 2)<select name="2" id="2">
  	<option value=""></option>
    <option value="A">is</option>
    <option value="B">are</option>
    <option value="C">was</option>
    <option value="D">were</option>
    <option value="E">have</option>
  </select>   announced in The Hague where European science ministers have been meeting to approve agency policies and funding. Senior ESA executive Daniel Sacotte told reporters the agreement was a 3)<select name="3" id="3">
  	<option value=""></option>
    <option value="A">turning</option>
    <option value="B">symbolic</option>
    <option value="C">flagship</option>
    <option value="D">royal</option>
    <option value="E">landmark</option>
  </select>   moment:</p>
<p>"It shows renewed interest for Britain to be part of ESA, to be involved in space activity; and we welcome that. It’s a new development in our 4)  <select name="4" id="4">
  	<option value=""></option>
    <option value="A">attitude</option>
    <option value="B">merger</option>
    <option value="C">dialogue</option>
    <option value="D">relationship</option>
    <option value="E">communication</option>
  </select> with this very important member state."</p>
<p>Negotiations to open the centre have taken a number of years to complete, and became tied up with financial commitments which ESA asked the UK to make on some of the agency’s other activities, in particular in the realm of Earth observation. Britain was able to make those commitments here and sign the documents that will give the green light to the establishment of the new centre. Its precise remit has 5) <select name="5" id="5">
  	<option value=""></option>
    <option value="A">yet</option>
    <option value="B">already</option>
    <option value="C">always</option>
    <option value="D">often</option>
    <option value="E">possibly</option>
  </select>  to be fully worked out, but with the UK being a major player in ESA’s flagship space robot programme, the ExoMars rover, it 6)  <select name="6" id="6">
  	<option value=""></option>
    <option value="A">is</option>
    <option value="B">are</option>
    <option value="C">was</option>
    <option value="D">were</option>
    <option value="E">have</option>
  </select> that the centre should focus on such expertise. Mr Sacotte, the special advisor to ESA’s director general, explained:</p>
<p>"We have been identifying a few sectors of possible activity, including robotics of course; because in the development of the ExoMars programme, the industrial role of Great Britain is to develop the robot that will 7) <select name="7" id="7">
  	<option value=""></option>
    <option value="A">is</option>
    <option value="B">are</option>
    <option value="C">was</option>
    <option value="D">were</option>
    <option value="E">have</option>
  </select>  and searching for life on the planet Mars."</p>
<p>How the climate element is incorporated into the centre is still to be defined. ESA already has a centre dedicated to Earth observation in Italy, but Britain has clear expertise in climate science and the agency is 8) <select name="8" id="8">
  	<option value=""></option>
    <option value="A">is</option>
    <option value="B">are</option>
    <option value="C">was</option>
    <option value="D">were</option>
    <option value="E">have</option>
  </select>  to exploit that. Lord Drayson, the UK science minister, told reporters:</p>
<p>"I think it reflects the recognition within the United Kingdom of the growing importance of space research. We are the fourth 9)<select name="9" id="9">
  	<option value=""></option>
    <option value="A">is</option>
    <option value="B">are</option>
    <option value="C">was</option>
    <option value="D">were</option>
    <option value="E">have</option>
  </select>   contributor to the European space programme and we’ve been selective in those areas that we’ve contributed to, to enable us to develop real focus and a world lead in certain areas," he told BBC News. "It’s now time to capitalise on that lead, to get more of the
 10)<select name="10" id="10">
  	<option value=""></option>
    <option value="A">is</option>
    <option value="B">are</option>
    <option value="C">was</option>
    <option value="D">were</option>
    <option value="E">have</option>
  </select> that we’ve made in ESA actually spent here in the UK."</p></label>
  
  <input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the server called "action_page.php".</p>

</body>
</html>

Do you know a simple solution which would adapt the select box to its surrounding text?

Thank you for the time dedicated to my request,

Best regards,

Francis

(post deleted by author)

They are inline-block by default so something is likely overwriting that (the theme or Elementor).

You can set it back to inline-block

select {
  display: inline-block !important;
}

But you should probably scope that selector so it doesn’t just affect all select elements. How or what you want to scope it to is up to you.

form[action="/action_page.php"] select {
  display: inline-block !important;
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.